I'm developing my app from the backend side. My page is supposed load the css locally. I'm using nodejs, express.js, and ejs(for my pages) - The MEN/MEAN stack.
<link href="../public/stylesheets/style.css" rel="stylesheet" type="text/css">
I'm 100% sure the link is correct since VS Code allows you the check, but I've gotten an error when loading the page up. The error: "The resource from “http://localhost:3000/public/stylesheets/style.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)"
The CSS works fine when I use the style tag instead. What's going on here?
Okay so I solved it. The issue is with Express, it changes the "text/css" part to "text/html". A quick easy workaround would be to remove the "rel=stylesheet" but that can produce mixed results. The best thing is to use app.use(express.static("public")) - this will let express know that the public folder is for styles and scripts.
The link now should look like <link href="stylesheets/style.css" rel="stylesheet" type="text/css"> and it will work.
You should tell express that you have a static assets that you parked all on public folder.
app.use(express.static("public"))
To know more express magic, follow this github repo.
https://github.com/sagormax/node-admin/
Related
So I'm using XAMPP (if that matters) and every time I restart the local server, the styling stops working.
For example I have this style link right now:
<link href="style/mainstyling.css" rel="stylesheet" type="text/css"/>
Everytime when I restart the local server the styling is actually working, but when I make a change into the css file itself, it doesn't affect the page at all. The fix right now is when I copy all the css code and put it into another file with completely different name and connect it again with the php (html) page itself.
I've been reading articles about it and I couldn't find any particular answer that could actually be the problem solver in this situations. It's either the cache of the browser or I don't know.
And yes, everything is in the right directory.
Open up Developer tools in Chrome (F12), go to your network tab and look at the HTTP response of
mainstyling.css Check that:
Got a 200 OK and not a 404.
The response Content-Type is "text/css"
Check the response body has CSS in it.
Run the CSS through a css format checker and check it is valid.
Hi all and sorry for my english...
I have this strange problem on a website built in html and css
On localhost works correctly...
When I upload the site on the server, this work for some second, then the page refresh without CSS style page!
I can't understand why
If open the source of page, before there is
<link type="text/css" href="styles/simple.css" rel="stylesheet"/>
After
<style></style>
Any suggestions?
is it a self hosted site or you are using a provider? Or in other words, do you have access to the server configuration? Looks like there are some .htaccess rewrite rules if there are no instructions on your code to reload the page.
EDIT: I have seen that you get these errors on reload:
TypeError: $(...).PikaChoose is not a function;
Error: Permission denied to access property 'toString' (2 times);
TypeError: $slider.after(...).cycle is not a function
These means that you have some js that is making troubles. This also means that the browser stops including files (like js plugins that are returning error on call). SO: if you load css after this error you miss that css.
My suggestion is to:
load all the css first
load all the js after
consolidate all the css since you have many rules that overwrite each other
disable some wierd plugins like mod_pagespeed since it looks like this is one that is causing the issue
I am a beginner with node.js and am using express with the ejs layout, and I want to know how to get rid of the .html extension when putting up a page. For example if I go to my localhost:3000/about.html - that works but I want it to show up as just /about. Also, having trouble figuring out how to change the favicon if anyone knows how to quickly change that from the express default.
Any help would be great thanks.
(I realise this question is old, but it appears high in Google search results, and the accepted answer isn't the best solution.)
The best solution for serving up static content in express.js is express.static. To avoid having to specify file extensions in URLs you can configure it with a list of default file extensions that it will use when searching for static files:
app.use(express.static(pathToBaseFolderOfStaticContent, {
extensions: ['html', 'htm'],
... // Other options here
}));
This will serve up pathToBaseFolderOfStaticContent/somePage.html or pathToBaseFolderOfStaticContent/somePage.htm in response to a GET request to http://www.example.com/somePage, which is what you want. For example, if you visit https://arcade.ly/star-castle, the file it serves up is just a static file called star-castle.html. I haven't had to add any special routing for this, or any other static file - it's all just handled by express.static.
I only need to add specific routes for content that requires active work on the server to return. A big advantage here is that I can use a CDN to cache more of my content (or nginx if I were running an internal line of business app), thus reducing load on my server.
You can obviously configure as many default file extensions as you like, although I'd tend to keep the list short. I only use it for resources where the URL is likely to appear in the address bar, which generally means HTML files, although not always.
Have a look at the following documentation on serving static content with express.js:
http://expressjs.com/en/starter/static-files.html
http://expressjs.com/en/4x/api.html (the express.static documentation is at the top)
This is also answered at In express what is the common way to associate a default file extension with static content requests?.
The favicon.ico issue can be solved by dropping your favicon into the root folder from which you serve static content, as well as implementing +Costa's solution where you reference it using a <link> in the <head> of your documents.
In theory you shouldn't need to do put the favicon in the root folder but, in practice, some browsers will still ask for it from the site root even though it's referenced in the <head> of your document. This leads to a spurious 404 error that you'll be able to see in client side debugging tools (e.g., Chrome dev tools).
The Favicon issue is usually a caching problem. As long as you have this code in your base html layout:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Then just navigate to wherever that image is with your browser, and that should force your cache to update.
I figured it out. I looked at this post Render basic HTML view? which solved the problem I was having.
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res){
res.render("index.html");
});
And this all goes in the app.js or whatever file you are running.
Im trying to convert an html template to ASP.Net MVC 4 project. Bbut i have run in an problem. Then opening the localHost:11062/ site everything looks prefect. But if i try same address just calling the controller and action direct localHost:11062/StartMenu/Index, which should be the same, but it's not. For me it looks like the css file isent loaded correct. But if it wasent the start site should not look different?
I suspect that you have hardcoded the url to some of your CSS files, just like this:
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
instead of using an url helper:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Of course the same is true for all static resources such as javascript, images, ...
You should never hardcode urls in an ASP.NET MVC application. Always use url helpers when dealing with urls.
Also if you are referencing some static resources (such as images) in your CSS file, don't forget that they should be relative to the location of the CSS file.
You might easily see this in the Net tab of a javascript debugging tool such as FireBug where you would get 404 errors for the corresponding resource.
I am using ibm websphere and creating a Dynamic web project. All of my JSP files are in my WEB-INF folder and i use servlet mapping in my web.xml file to make them accessible. This has worked fine so far. however i have problem with my CSS. as always, my CSS file is located in WebContent in a folder named css. heres my link for my jsp
<link rel="stylesheet" href = "css/styles.css">
I'm having no luck getting my css to show...
what am i missing?
The relative URLs in the generated HTML output are by the browser interpreted relative to the request URL (as you see in browser's address bar), not to their physical location in the server's disk file system. It's namely the webbrowser who has got to download them by a HTTP request, it's not the webserver who has got to include them from disk somehow.
One of the ways is to use a domain-relative path for those resources, i.e. start with /. You can use ${pageContext.request.contextPath} to dynamically inline the current webapp's context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
This will end up in the generated HTML output as follows:
<link rel="stylesheet" href="/yourContextPath/css/styles.css">
This way the browser will be able to download them properly.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
I think you need to see it from the browser's perspective, how it is the URL of the page, the context path and the current path.
If your app context path is for example "myApp" then you can do something like this to make it work:
<link rel="stylesheet" href = "/myApp/css/styles.css">
If you want to make it relative so it does not depend on the context path, then if your url looks like http://localhost:8080/myApp/myservlet/file.jsp
Then your link tag would be
<link rel="stylesheet" href = "../css/styles.css">
Firebug or the chrome console may be really helpful to understand what the browser is trying to fetch.
Hope this helps!