Cannot load css file in ejs file-CodePudding

I am using an ejs file which is supposed to include a css file for styling, but the css file wouldn't load. Can someone help me resolve the issue. The server only loads the html view, but not css, despite using express.static() to serve the static files.

signup.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Hostel</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/signup.css">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <div >      
        <input type="checkbox" id="chk" aria-hidden="true">

            <div >
                <form>
                    <label for="chk" aria-hidden="true">Sign up</label>
                    <input type="text" name="txt" placeholder="User name" required="">
                    <input type="email" name="email" placeholder="Email" required="">
                    <input type="password" name="pswd" placeholder="Password" required="">
                    <button>Sign up</button>
                </form>
            </div>

            <div >
                <form>
                    <label for="chk" aria-hidden="true">Login</label>
                    <input type="email" name="email" placeholder="Email" required="">
                    <input type="password" name="pswd" placeholder="Password" required="">
                    <button>Login</button>
                </form>
            </div>
    </div>
</body>
</html>

app.js:

const express=require("express");
const connectDB = require("./db");
const app=express();
const path=require("path");
const userRouter=require("./routes/users");

app.use(express.json());
const port=process.env.PORT || 3000;

connectDB();

app.set('views', path.join(__dirname, '/views'));
app.set("view engine", "ejs");

app.use('/css', express.static(path.resolve(__dirname, "assets/css")));
app.use('/js', express.static(path.resolve(__dirname, "assets/js")));

app.use("/",(req,res,next)=>{
    res.render("signup");
});
app.use("/users",userRouter);

app.listen(port,()=>{
    console.log(`Server running on port ${port}`);
});

Folder Structure:

server
|
|->assets/css/signup.css
|->views/signup.ejs
|->app.js

Thank you in advance

CodePudding user response：

Problem

The URLs in your HTML page don't match the express.static() middleware you have.

So, for example, when you have this:

<link rel="stylesheet" type="text/css" href="../assets/css/signup.css">

That's going to combine the path and domain of of the page URL to formulate a request to your server for something like:

/assets/css/signup.css

But, you don't have a route that matches that. You have this:

app.use('/css', express.static(path.resolve(__dirname, "assets/css")));

But, that requires a path that starts with /css and you have no route that starts with /assets.

Solution

So, drop the reference in the HTML page to /assets. That's an internal (to your server) location that the HTML page doesn't need to know anything about. In fact, you can technically change that on your server without breaking or changing the web page.

So, change your HTML tag to this:

 <link rel="stylesheet" type="text/css" href="/css/signup.css">

This is an absolute path URL and will send a request for:

/css/signup.css

That will match your route here:

 app.use('/css', express.static(path.resolve(__dirname, "assets/css")));

The /css part of the URL will match the app.use('/css', ...) route and after removing the /css part from the path, it will then look for the remaining page of the URL signup.css in the path.resolve(__dirname, "assets/css") directory.