I am using express to build a simple login app. I am using ejs as my template engine.the file structure of my application is
package.json
server.js
routes
index.js
users.js
views
layouts.ejs
login.ejs
register.ejs
welcome.ejs
public
css
bitnami.css
bitnami.css contains the css code I have downloaded from bootswatch
server.js has following code
const express = require('express');
const app = express();
const PORT = process.env.PORT;
const expressLayouts = require('express-ejs-layouts');
const path = require('path');
global.appRoot = path.resolve(__dirname);
console.log(path.join(global.appRoot,"public"));
//EJS
app.use(expressLayouts);
app.set('view engine','ejs');
//set static path
app.use(express.static(path.join(global.appRoot,"public")));
//Routes
app.use('/',require('./routes/index'));
app.use('/users',require('./routes/users'));
app.listen(PORT,()=>{
console.log(`server running at ${PORT}`);
})
index.js has
const express = require('express');
router = express.Router();
router.get('/',(req,res)=>{
res.render('welcome',{layout : 'layouts'});
})
users.js has
const express = require('express');
router = express.Router();
router.get('/login',(req,res)=>{
res.render('login',{layout : 'layouts'});
})
router.get('/register',(req,res)=>{
res.render('register',{layout : 'layouts'});
})
module.exports = router;
module.exports = router;
layouts.ejs has following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BNI EVENT</title>
<link rel="stylesheet" href="css/bitnami.css">
<script src="https://kit.fontawesome.com/9c59f82571.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<%- body %>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
If I load the css file from a CDN or if I use a static middleware for each router that has something after '/' ex('/users') the css file works but I want to know if there is a less redundant solution to this problem
If users.js has the following code the CSS file works properly
const express = require('express');
router = express.Router();
const path = require('path');
// setting the static middleware for this route
router.use(express.static(path.join(global.appRoot,"public")));
router.get('/login',(req,res)=>{
res.render('login',{layout : 'layouts'});
})
router.get('/register',(req,res)=>{
res.render('register',{layout : 'layouts'});
})
module.exports = router;
const head = `<html><head><title>Title</title><head><meta charset="utf-8">`+ `<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>`+ `<link rel="stylesheet" type="text/css" href="/style.css">`+ `</head>`;