Nodejs/Express.js path issue

Question

I have this Express app which makes use of routes and hbs for contemplating. When I added sub routes(like \\risi\\first ) the path name for all the css/html files was appended with the route name - risi

How do I make them access the files?

Relevant code from app.js:

var risi= require('./routes/risi');
app.use('/risi', risi);

Risi.js route:

var express = require('express');

var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('risi', { title: 'RISI' });  //Works perfectly fine
});

router.get('/first', function(req, res, next) {
  res.render('risi', { title: 'RISI' }); //unable to access the CSS / JS from here
});

router.get('/second', function(req, res, next) {
  res.render('risi', { title: 'Joi' });
});

router.get('/third', function(req, res, next) {
  res.render('risi', { title: 'Log' });
});

router.get('/fourth', function(req, res, next) {
  res.render('risi', { title: 'Yo TO RISI!! <3' });
});

module.exports = router;

Here is the error from console:

GET /risi/css/main.css 404 99.4567 ms -1166

The said CSS file is at /css/main.css

Someone pls hlp!

Answer 1

You should use an absolute path

/css/main.css

(note the prepended / ) to link to your css files to guarantee the href isn't appended to the routes href