I'm creating an express app and my CSS code stops working whenever i add an ":ID" parameter to the URL. I know it's a filepath issue because bootstrap still comes in fine, but on the page with the ID parameter it shows this: "Refused to apply style from 'https://XXXXXX.c9users.io/unapproved/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
main.css is in my /public folder, but it looks like it's looking in a folder titled "unapproved".
I've tried changing the routing order, i've tried changing my app.use(express.static(__dirname)) code.
here's my app.get:
app.get("/unapproved/:id/", function(req, res){
var invoiceID = mongoose.mongo.ObjectId(req.params.id);
InvoiceObj.findById(invoiceID,function(err,foundInvoice){
if(err){
console.log(err);
}else{
res.render("invoiceScreen",{invoice:foundInvoice});
}
});
here's my html:
<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>
here's my header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice system</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
I think change to css path absolute path will solve your problem
<link rel="stylesheet" href="/main.css">
In this kind of situation, it's better to use virtual path for your static files because relative path doens't work very well; like:
Assuming folder structure:
app.js
public
| +-- main.css
app.use('/static', express.static(__dirname + "/public"))
And in you html, make path absolute
<link rel="stylesheet" href="/static/main.css">
instead of using ./ or ../ before your assest(images / css / js ) for example.
./css/style.css or css/bootstrap.css ../images/example.png
you can use / for example
/css/style.css or /css/bootraps.css /images/example.png
/ will tell your app to look from root dir.
Related
Please help me as i am trying to add a css file all the day long and always fail
app.js code :
var express = require("express");
var app = express();
var path = require('path');
app.set('view engine', 'ejs');
app.set('views', '../node_modules/express/views/');
app.use(express.static('public'));
app.get("/",function(req,res){
console.log("welcome");
res.render("test");
});
app.listen(3000,function(){
console.log("connected")
});
test.ejs code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- <link type="text/css" href="app.css">-->
<!-- <link href="/public/app.css" rel="stylesheet" type="text/html">-->
<!-- <link type="text/css" href="/public/app.css">-->
<!-- <link rel="stylesheet" type="text/css" href="/app.css" >-->
<link rel="Style" type="text/css" href="/app.css" >
</head>
<body>
<h1>here</h1>
</body>
css code :
body{
background-color: green;
}
server structure :
root-->public-->app.css
i also faced the error : was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). but i solved it and and tried a lot of ways to change the path and keep it in the same folder with the ejs
thank you in advance
in your app.js
app.use(express.static(__dirname + '/public'));
app.use('/public', express.static(__dirname + '/public'));
In app.js:
app.use(express.static('public'))
In ejs/html:
<link rel="stylesheet" href="/css/index.css">
Serving static files in Express
Okay guys thank you all but the solution was just to add ../ before public
app.use(express.static('../public'));
as express was searching for public inside the server folder that has the app.js
I am making a CRUD app in Nodejs/Expressjs, templating engine is EJS.
The idea for the update is display user_id from a database and when admin clicks on user_id it should redirect to edit_team.ejs page.
It is working fine but when it is redirecting to edit_team.ejs page, the css files are not getting load. I am getting below error
For every other .ejs files, all css files are loaded.
I have included 'public' folder in app.js file.
Code:
Folder Directory:
app.js:
app.use(express.static('app/public'));
view_team.ejs
<a class="button" href='/edit_team/<%= team[i].team_id %>'>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
edit_team.js:
var express = require('express');
var path = require('path');
const { Client } = require('pg')
const connectionString = 'postgresql://localhost:5432/idid';
//router object
var router = express.Router();
router.get('/edit_team/:id', function(req, res){
res.render('login/edit_team');
});
module.exports = router;
edit_team.ejs (pasting only head section):
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
can someone please help me trying to figure out what is wrong here?
A URL such as /edit_team/23 serves up edit_team.ejs, which contains the relative path css/bootstrap.min.css. This is relative to the /edit_team path, so it'll be edit_team/css/bootstrap.min.css, which probably isn't what you want.
You should be able to confirm this using your browser's dev tools. Look in the Network tab and check the paths for the files that aren't loading.
Try using paths that aren't relative to the current path, such as:
<link href="/css/bootstrap.min.css" rel="stylesheet">
Note the extra /.
Here is a lot of questions and answers how to make assets concatination or replacement in template. Use grunt-concat to merge files, use gulp-html-replace to replace in templates. And i can`t understand how to connect them with each other.
So given template, friends.tpl with special set of css files:
!DOCTYPE html>
<html>
<head>
<!-- build:css friends.min.css -->
<link rel="stylesheet" href="css/component1/style.css">
...
<link rel="stylesheet" href="css/componentN/style.css">
<!-- /build -->
</head>
<body/>
The desired result
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/friends.min.css">
</head>
<body/>
And created friends.min.css file with concatenated files above.
How to achieve this - concat based on template data
Use gulp-htmlbuild,it does what you want.
gulp.task('build', function () {
gulp.src(['./index.html'])
.pipe(htmlbuild({
// build js with preprocessor
js: htmlbuild.preprocess.js(function (block) {
// read paths from the [block] stream and build them
// ...
// then write the build result path to it
block.write('buildresult.js');
block.end();
})
}))
.pipe(gulp.dest('./build'));
});
gulp build will take index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- htmlbuild:js -->
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<!-- endbuild -->
</body>
</html>
And turn it into:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="buildresult.js"></script>
</body>
</html>
https://www.npmjs.com/package/gulp-htmlbuild
My view can't find layout. But everything looks fine. My structure is shown below:
And my view is shown below:
#model xxx.Web.Model.Home.IndexModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/_MainLayout.cshtml";
}
And my layout is shown below:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Bootstrappage:Free Bootstrap Template (bootstrap 2.3.1 version)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--
<link rel="stylesheet" href="themes/style/bootstrap.min.css" />
<link rel="stylesheet" href="themes/style/bootstrap-responsive.min.css" />
-->
<link rel="stylesheet/less" type="text/css" href="../../themes/less/bootstrap.less">
<script src="../../themes/js/less/less.js" type="text/javascript"></script>
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script type="text/javascript">
$(function () {
#RenderSection("DocumentReady", false)
});
</script>
</head>
<body data-offset="40">
#{Html.RenderAction("Header", "Partial");}
#{Html.RenderAction("Navbar", "Partial");}
#RenderBody()
#{Html.RenderAction("Footer", "Partial");}
<script src="themes/js/lib/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Also my controller is shown below:
public ActionResult Index()
{
IndexModel model = new IndexModel();
HomeModelFactory modelFactory = new HomeModelFactory();
model.Files = modelFactory.CreateIndexModel();
return View(model);
}
And exception:
Why I am getting this exception? It was working well.
And the full contents of the View / Controller as well please?
Some possible scenarios without looking at the View / Controller are;
- Some sections are missing (e.g. "DocumentReady")
- The view is trying to resolve model properties which are not set (i.e null)
You might check your properties setting on your _MainLayout.cshtml file. I had this same problem (the Layout page could not be found in the search path) until I set the VisualStudio properties BuildAction to Content. I had copied the file and renamed it, and the property had been set to 'none'.
This is your problem: Layout = "~/Views/_MainLayout.cshtml";
The _Layout reference should be Layout = "~/Views/Shared/_MainLayout.cshtml";
Dont make these type of mistakes again!
below is part of my head section in HTML. i found that the content of my page always load before the jquery.css such that the layout is so plain and return to the desired layout after 0.5 second loading time. What should I modify the code in order to avoid the plain content? is it related to the deviceready? in before, href is to the hyperlink, after that, i change it to a local file. i surprised that even a local file, it use 0.5 second to load it, instead of loading it instantly.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", showConfirm, false);
}
</head>
Try moving the line that loads Cordova-2.3.0.js below the lines that load your CSS. So something like:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", showConfirm, false);
}
</head>
It works after i change jquery mobile and jquery to latest version............