My current project involves using Express to create a login application, with EJS as the chosen template engine. The file structure of the application is as follows:
package.json
server.js
routes
index.js
users.js
views
layouts.ejs
login.ejs
register.ejs
welcome.ejs
public
css
bitnami.css
The 'bitnami.css' file contains CSS code downloaded from Bootswatch.
In 'server.js', the following code is implemented:
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' includes:
const express = require('express');
router = express.Router();
router.get('/',(req,res)=>{
res.render('welcome',{layout : 'layouts'});
})
In 'users.js', the code is as follows:
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;
The 'layouts.ejs' file contains the 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>
</script>
</body>
</html>
When loading the CSS file from a CDN or using a static middleware for routes with paths other than '/', such as '/users', the CSS file works correctly. However, I am seeking a less redundant solution to this issue.
Adding the following code to 'users.js' ensures the CSS file functions 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;