Css file not loading in ejs
Question
Issue - I cannot figure out why the CSS file is not loading in ejs.There is no error message given by the terminal. Its showing message -GET /assets/css/style.css 404 159 - 0.674 ms.The server (localhost is running perfectly).
What I tried:app.use(express.static(__dirname + '/assets/css'));This also gives the same message.I even tried to change the file paths and tried other methods to do so but nothing works.
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")));
//css/style.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 Sucessfully ');});
_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
1 answers
solution1
1 ACCPTED 2021-05-13 17:55:31
app.use is used to to add golbal middlewares to your routes.
The basic syntax goes like:-
app.use('/someRoute', middleware);
Instead of...
app.use('./css',express.static(path.resolve(__dirname,"assets/css")));
//css/style.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"));
Try...
app.use(express.static(path.join(__dirname, "assets")));
This will serve your whole assets folder on the web.
The above line of code will serve your assets folder along with ALL its contents onto the web for every route your server has and will have in future.
Since now the assets folder is already served up, you do not actually need to add assets to your href inside your <link> tag.
The path to your css file is assets/css/styles.css .
Earlier, you server was looking for assets/assets/css/styles.css since assets is already served up.
Inside your _header.ejs file change the href of your link to:-
<link rel="stylesheet" type="text/css" href ="/css/style.css">
Now the server will look for assets/css/styles.css which exists so there is no error now.
I hope this helps.
I don't understand what you were trying to do with this...
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")));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.