Ejs not rendering css files

Question

I'm working on a CRUD app with Nodejs and I'm having problem to render external css and bootstrap5 from my project directory. Only the html blocks are rendered when I try to pass get with post Id. It works when I use a cdn. . app.get('edit'){....} works but when app.get('/edit/:id'){..} do not render the Styling

 // this one works, rendering html and styling // admin fetch all posts app.get('/admin', (req,res) => { con.query( 'SELECT * FROM post', (error, results) => { res.render('./admin/adminland', {post: results, layout:'./layout/dashboard'}); } ); }); // It still loads the page but it deosnot render the css. // edit post app.get('/edit/:id', (req,res) => { con.query( 'SELECT * FROM post WHERE postid =?', [req.params.id], (error, results) => { res.render('admin/post/editpost', {post: results[0], verified: req.session.loggedin}); } ); });

Answer 1

I have used the express.static() .. it is working for other pages. The problem is When I use inline styling or from a CDN on editpost page it works fine but When edit/:id is passed, styling is not working. If:id part is removed it works again.

This sounds like it's likely because you're using the wrong URL in your page to refer to the stylesheet. My guess is you didn't start the URL with a / so it gets treated as a relative URL so as soon as you put it in a page that isn't a top level path, it stops working because the browser adds the page's path to the start of the URL and that's the wrong URL.

Add a / to the start of the stylesheet URL in your web page so the browser doesn't add the page's path to the start of the URL before requesting it.

Also, if you look in the browser console, it will probably show you the actual URL it's trying to fetch and gets a 404.