MIME type error with express.static and CSS files
I know this question is old, but wanted to add my two cents with a simple example as I took a while to figure out the issue.
Working Example:
My files are located under /usr/noah
/usr/noah/index.js
const express = require('express')
const path = require('path')
const app = express()
const port = 8080
app.use(express.static(__dirname + '/static'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'static/index.html'))
});
app.listen(port, () => {
console.log('Listening on port: ' + port)
});
/usr/noah/static/index.html
<html>
<head>
<link rel='stylesheet' href='style.css' type='text/css'>
</head>
<body>
<div id='main'>
<h1>Hello World</h1>
</div>
</body>
</html>
/usr/noah/static/style.css
#main {
margin: 3em;
padding: 1em;
border: 1px solid gray;
border-radius: 10px;
}
h1 {
color: blue;
}
Then I'm running this from /usr/noah with the following command:
node index.js
The Explanation
I tend to do better with examples, so that's above. To explain what went wrong, see below:
app.use(express.static('public'))
This is used in a lot of express documentation. It works great as alanionita mentioned, only if your server is at the root of the filesystem. As you can tell, I'm two layers deep at /usr/noah.
Changing this to the Working Example app.use makes sure your files are served from the right directory, in this case /usr/noah/static.
The MIME Type Error is happening because the file served is likely a "404 Not Found" page made by Express, because it couldn't locate the CSS file. The browser expects a CSS file, gets an HTML file and says the MIME Type doesn't fit.
app.use(express.static('/static'));
means that the static files are served literally from /static. In a Unix-Based Operating System, this is a direct child to the directory root /. I don't think you do, but you shouldn't store files, let alone publicly accessible files in that directory. Instead what you are probably looking for is the static directory in your App's directory.
This is how you can tell express to use that one to server files:
app.use(express.static(__dirname + "/static"));
If you can't include a file in your HTML always double, or better even tripple check, that the file can be accessed through the browser first.
Also, the files are then located in ... href="/...", not ... href="/static/..."