Looking at multiple forums I couldn't find the answer as I see many people have this issue. trying to load a webpage ive created and the css doesnt seem to want to work after changing the index.html into ejs files. Ive followed tutorials and specific fixes and nothing. below are my MIME errors (picture), server.js, and json file. enter image description here
const express = require("express");
const app = express();
const PORT = process.env.PORT || 4000;
app.set('view engine', 'ejs')
app.get ('/', (req, res) => {
res.render("index");
});
app.get("/user/loginRegister", (req, res) => {
res.render("loginRegister");
});
app.get("/user/custDash", (req, res) => {
res.render("custDash");
});
app.use(express.static('css'));
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
{
"name": "buy_box_bandits_2.0",
"version": "1.0.0",
"description": "Working repository",
"main": "./src/index.js",
"scripts": {
"start": "node ./src/server.js",
"dev": "nodemon ./src/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Caliber-Technical-Solutions/Buy_Box_Bandits_2.0.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Caliber-Technical-Solutions/Buy_Box_Bandits_2.0/issues"
},
"homepage": "https://github.com/Caliber-Technical-Solutions/Buy_Box_Bandits_2.0#readme",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"ejs": "^3.1.6",
"express": "^4.17.1",
"pg": "^8.7.1"
},
"devDependencies": {
"nodemon": "^2.0.2"
}
}
Your links to css files are not working, and render fallback HTML instead of CSS file. This is why the error is saying the mime type is text/html. As your static directory is src/css, you need to load like http://localhost:4000/loginStyles.css in ejs templates. And better define the static directory like the following:
import path from 'path';
...
app.use(express.static(path.resolve(__dirname, './css')));