CSS not working with Express and EJS (Node.js)

Question

Upon entering http://localhost:5000/ into my browser, no stylesheet works, though the favicon does, I am currently using ejs and express together in node.

I tried many fixes from other related stackoverflow 'questions' regarding this topic, but none of it seemed to work. I expected the background-color to change but was instead greeted with a white empty page and 2 errors in the console saying the following:

Uncaught (in promise) Error: Internal error opening backing store for indexedDB.open. at wrappedSendMessageCallback (browser-polyfill.js:1163:16)
Refused to apply styles from 'http://localhost:5000/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

My index.js:

const express = require('express');
const dotenv = require('dotenv');
const path = require('path')
const favicon = require('serve-favicon')
const morgan = require('morgan')

dotenv.config();

const port = process.env.PORT;

const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs')
app.use(express.static('/public'))
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
app.use(morgan('dev'))

const homeRoute = require('./routes/homeRoute')
app.use('/', homeRoute)

app.listen(port, () => {
    console.log(`[Server]: Server is running at https://localhost:${port}`);
  });

My File Structure

src - My index.js file is here
├───public
│   ├───css - My CSS file is here
│   └───images
├───routes
├───sass
└───views - My home.ejs file is here

My Route

const express = require('express');
const router = express.Router();
const path = require('path');

const options = {root: path.join(__dirname, "../views")};

router.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html')
    res.sendFile('home.ejs', options);
})

router.get('/home', (req, res) => {
    res.redirect('/');
})

module.exports = router;

Note on line 8, I set the content header to text/html because my browser was just downloading the file.

My EJS file

<!DOCTYPE html>
<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.0">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>TheShiningBoots | Home</title>
</head>
<body>
    
</body>
</html>

Sorry for the long post hope someone can help.

Answer 1

It is most likely that Express fails to locate the main.css file, thus returns a default HTML 404 not found file (and you see a MIME type error in the browser).

Try replace

app.use(express.static('/public'))

With:

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

CSS not working with Express and EJS (Node.js)

Question

1 answers

solution1
1 ACCPTED 2023-01-12 05:32:28

CSS not working with Express and EJS (Node.js)

Question

1 answers

solution1 1 ACCPTED 2023-01-12 05:32:28

solution1
1 ACCPTED 2023-01-12 05:32:28