Search code examples
cssnode.jsstylesmime-typesmime

MIME type error for local CSS or JS prevents loading custom styles when working with NodeJs

I am racking my brain the whole week on this error now! My plan was to create a simple 'send email from nodejs' application. The problem that I ran into was, a mime-type error for my style.css. The error says it's is in a text/html format. I started as usual with 'npm init -y' and 'npm install express nodemailer nodemailer-mailgun-transport -S'. I also created a 'server.js', 'index.html' and 'style.css' (See code below). And that's it. The application works as expected and linking bootstrap cdn also works. It is only my custom css that gives me a hard time. So to simplify it I even took a copy/paste html template from w3schools

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body> 
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

style.css

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

server.js

const express = require('express');
const app = express();
const PORT = 8080;
const path = require('path');

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(PORT);

package.json

{
  "name": "SendMail",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "nodemailer": "^6.4.15",
    "nodemailer-mailgun-transport": "^2.0.1"
  },
  "style": "style.css"
}

The error in Chrome: Error in chrome

What I've tried:

Edit: Inline styling and JS works as expected. I am guessing that it has something to do with express.

Is there anything else that I could try? Let me know if you need additional info. Thanks in advance!

Solution

  • When serving static files (like images, css, etc.) it is usually best practice to place those files in a dedicated directory called public or static, or whatever you like. Then you need explicitly tell your express app to serve files from there like so:

    app.use(express.static(__dirname + '/public'));

    So your server.js becomes:

    const express = require('express');
const app = express();
const PORT = 8080;
const path = require('path');

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(PORT);

    And then you can call your CSS file like this in your index.html:

    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="public/style.css" />
  </head>
  <body> 
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>