I am building a back-end for my web page, with file structure like this:
public
css
main.css
main_b.css
index.hbs
index_b.hbs
server
server.js
Styling sheets are referenced in index files by link attributes containing:
rel="stylesheet" type="text/css" href="main.css"
rel="stylesheet" type="text/css" href="main_b.css"
Here is my server.js :
const path = require('path');
const fs = require('fs');
const express = require('express');
const app = express();
const hbs = require('hbs');
hbs.registerPartials(path.join(__dirname, '../public/partials'));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, '../public/css')));
// activity logger
app.use((req, res, next) => {
const now = new Date().toString();
const logEntry = `${now}: ${req.headers.host} ${req.method}${req.url}`;
fs.appendFile(path.join(__dirname, '../server/server.log'), logEntry.concat('\n'), (error) => {
if (error) {
console.log(error);
}
});
process.env.route = req.path;
next();
});
app.get('*', (req, res) => {
switch (process.env.route) {
case '/': // home page
res.render('../public/index.hbs');
break;
case '/b': // basic layout
res.render('../public/index_b.hbs');
break;
default: // unknown routes
res.render('../public/index.hbs');
}
});
app.listen(3000);
On requesting localhost:3000, log entry is ok:
Thu Jan 24 2019 07:57:08 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/
On requesting localhost:3000/abc, log entry is also ok:
Thu Jan 24 2019 07:57:08 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc
And the problem shows on testing requests with sub-routes like localhost:3000/abc/def, css doesn't render and the log entry is :
Thu Jan 24 2019 08:04:55 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc/def Thu Jan 24 2019 08:04:56 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc/teamk-reset.css Thu Jan 24 2019 08:04:56 GMT+0200 (Eastern European Standard Time): localhost:3000 GET/abc/main.css
I saw that part of the route is used to amend the css lookup path, and tried to solve the problem by index and redirect properties of the options object in Express.static(), but no success.
Would be glad to receive some directions/ reference, otherwise probably I should refactor my route querying approach.