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 class="main">
<input type="checkbox" id="chk" aria-hidden="true">
<div class="signup">
<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 class="login">
<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
