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.
>Solution :
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'));