im trying to load my CSS file in my Node JS app using handlebars, but i get the error
Refused to apply style from 'http://localhost:8080/styles/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I checked the path and its right. Any solution?
in my index.js i have app.use(express.static('public'))
and my handlebars html i have <link rel='stylesheet' type="text/css" href='/styles/main.css'>
My workspace is
-node_modules
-public
--styles
---main.css
-template-engine
--views
---layout
----main.handlebars
This is most likely caused by the way you called the app.use(express.static('public')). In general it is better to use the format below.
const path = require("path");
app.use(express.static(path.join(__dirname, "public")));
Unfortunately, it is hard to guess the exact reason for the problem from the information you've provided. Can you load other external sources like scripts or images? Or do you only experience this with the CSS files? This might be caused because express cannot locate the file or you might need to change the file permissions. Furthermore, this question is asked at least hundreds of times on StackOverflow and other sites. Have you checked the other questions? I am sure if this does not solve your problem one of the answers in there will.
Finally, I suggest you use express-handlebars instead of handlebars.js. It is probably much more suited for your needs. And don't forget to check out the default file structure in the express-handlebars as well.
Related
In React I have most of my CSS tied to my modules as follows. Module1.jsx has Module1.css, and so on and so on.
Webpack builds all these modules into a single request via bundle.js.
However, I do have about 40 lines of CSS that I use app wide that does not belong in a single module. In fact some of it targets elements outside of the app, i.e. the body tag.
Currently I have it hard coded in the index.html file which express serves. I could put it in another file and link to it, but his would require another network request.
I would like it in its own file, but then injected into index.html file before it is served.
I'm not sure if webpack can do this, or it can be done via express. But the syntax might look like this:
Instead of this:
<link rel="stylesheet" href="styles.css">
Maybe ssi for server-side-indlcude and the file to include at that location:
<ssi file="styles.css">
It just seems in-efficient to send the index.html to the client, and than for the client to request the CSS, when it can just be sent in the initial request.
In general the reasons for this are:
to clean up index.html and make it more human readable
to follow a separation of concerns design architecture
Ideas on how to do this:
using templates ( is this overkill )
is there a way to implement sever side includes?
does webpack have a way to insert files into file?
can express bundles static files?
I am trying to achieve server side rendering for an app using react-redux and express for the server, webpack is being used to create the bundle.
I started off using the following documentation:
https://redux.js.org/docs/recipes/ServerRendering.html
I have the following set up to load up the main.js created from webpack:
<script type="application/javascript" src="/static/main.js"></script>
On firing up the express server though, this is what I see in the console:
Refused to execute script from 'http://localhost:8080/static/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
This is not firing up in any browser. Any idea what might be going on?
It seems to me as configuration issue.
If it is returning MIME type ('text/html') that means, at that specific path it is not able to find/resolve the main.js file, so it is returning a default 404 html page instead, which is strictly defined to be javascript.
So, Ideally what you can do is that you can configure your express server to serve static files as shown below.
app.use(express.static(__dirname + "/static"));
For more details, you can refer to::-> https://expressjs.com/en/starter/static-files.html
Happy Coding!
Here's the code I have:
In the HTML file:
<link rel="stylesheet" href={% static 'css.css' %}" >
In settings.py:
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
The css.css file is located in the static directory which is in the same directory as manage.py ,
So why isn't the css file loading?
There is also a js file which doesn't seem to be loading either, and it's in the same directory as the CSS file and I'm loading it in with the same method as the CSS file.
Also, my pc isn't currently connected to WiFi, in case it makes a difference. I'm working with localhost.
Have you configured your Static files URL.
According to best practice
STATIC_URL = '/static/'
Actually the above is too little information to help anyway. Can you tell us the application environment (production/development) etc because there are specific configurations for each in Django. Also please provide code using the code markup. Assuming you are using Django 1.11, read this for a better understanding or better yet see a tutorial for beginners
I'm writting a simple video streaming app with Node.js and I'm using the WebChimera plugin. With chimera, the player config is written in QML and I must include it in my .jade page and of course, there's many errors when jade compiles.
Is there a way to include QML in jade?
In your Jade try including an iframe(src='/qmlfiles/my.qml') and create a subfolder called qmlfiles in your /public folder. And then put your qml content in that my.qml file. Express will then see that since qmlfiles is in /public it won't try to interpret it. This is based upon the assumption that .qml has some mime association to it that a browser would understand.
If not, then my.qml might instead just be my.html and it could include QML content. Again, locating it under /public would mean that Express doesn't use the rendering of Jade in order to try to deal with it.
I have a .LESS stylesheet, I found a way to change variables value throw JavaScript with an old modified version of less.js
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc)
the problem is that worked well on the designing stage because I was compiling the .LESS with the browser, now I'm building the site with asp.net, I decided to use dotless, the problem with compiling the .LESS file in the server is that dynamic variables convert to static, delete my variables and do not let me change the value throw JS.
The question is, Is there a way to say asp.net that the .LESS file must be compiled by the browser on the client?
Because just importing the .LESS file and the JS file in my html page doesn't work,
<link href="~/Content/css/UI.less" rel="stylesheet/less" type="text/css" />
the browser doesn't find the .LESS file and respond with a 404 HTTP Response.
Does asp.net hide that file or something?
PD: I already tried not adding the dotless dependency to the project which supposedly compile the .LESS file
Well I could find an answer, The only problem of the 404 HTTP response was that IIS does not support the file extension .less with a MYME-Type of stylesheet/less so for security reasons I suppose It hide that for requests, and what I had to do was configure that con the console like...
appcmd set config /section:staticContent /+[fileExtension='.less',mimeType='text/css']
Use dotless if your want the server to compile the LESS stylesheet.
Use the less.js file if you want to compile in the browser.
Also, instead of the appcmd command you can tell Web.config that your application will serve .less files
<staticContent>
<remove fileExtension=".less" />
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
This way, you don't have to run appcmd if you deploy your code to another machine.