Help Needed - I'm struggling to understand why the CSS file is not loading in ejs. The terminal isn't showing any error message, but it's displaying this message: "GET /assets/css/style.css 404 159 - 0.674 ms". My server (localhost) is running perfectly fine.
What I've Tried: I have used app.use(express.static(__dirname + '/assets/css')); which resulted in the same message. I also experimented with changing file paths and tried other methods, but nothing seems to be working.
My ejs code:
const express = require('express');
const dotenv = require('dotenv');
const app = express();
const morgan =require('morgan');
const path = require('path');
dotenv.config({path:'./config.env'});
const PORT = process.env.PORT ||8080
// parse request to body-parser
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// log request
app.use(morgan('tiny'));
// set view engine
app.set("view engine","ejs");
app.set("views",path.join(__dirname,"views"))
//load assets
app.use('./css',express.static(path.resolve(__dirname,"assets/css")));
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));
app.use(express.static("assets"));
app.get('/', (req,res)=>{
res.render('index');
});
app.listen(PORT,()=>{console.log('Server is running successfully');});
_header.ejs File
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" href ="/assets/css/style.css">
</head>
<body>
<!----HEader-->
<header id="header">
<nav>
<div class ="text-center">
<a href ="/" class ="nav-brand text-dark">User Management System</a>
</div>
</nav>
</header>
File structure:
-assets
--css
---style.css