'css not rendered on all routes with express-handlebars

only base routes are rendered with css. so / , /home , /about and /portfolio have no problem. but /portfolio/project1 or about/biography are rendered without css

this is my code

const express = require('express');
const xhbs = require('express-handlebars');
const app = express();

app.use(express.static('public'));

app.use(express.urlencoded({
    extended:true
}));

const port = process.env.PORT || 3000;

app.engine('handlebars', xhbs({
    defaultLayout:'main'
}));

app.set('view engine', 'handlebars')

app.get('/portfolio', (req, res)=>{//css works fine on this route
        res.render('portfolio');
});    

app.get('/portfolio/project1', (req, res)=>{//css has no effect here
    res.render('project1');
});

and my files are structured this way

public
    css
        styles.css
views
    layouts
        main.handlebars
server
    server.js
node.jshandlebars.js


Solution 1:[1]

You should use an absolute path for the static middleware

app.use(express.static(path.join(__dirname, 'public')));

Solution 2:[2]

You can use base tag in the head section of handlebars file

<base href="http://localhost:5000">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 C.Gochev
Solution 2 Farhad Aliyev

Related Questions