Problem with routing css on my Node Express server - css

Question

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.

Answer 1

I found the issue with my code,
Styling sheets should be 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"
, their names prepended with '/' for correct lookup URL construction.