Using node and express to serve get(/foo/:bar) requests, when res.render(template), all relative links in template are relative to /foo instead of /

Question

The offending route in my node server code is this:

app.get('/s/:searchTerm', function(req, res) {
  res.render('index');
});

After this happens, all the relative links in index.jade are relative to "hostname/s/" instead of "hostname/", which is broken.

My node setup looks like this:

app.set('view engine', 'jade');
app.set('views', __dirname + '/views');

app.use(express.static(__dirname + '/public/'));
app.use(express.favicon(__dirname + '/public/img/favicon.ico'));

app.use(express.json());
app.use(app.router);

All of these routes work except for the /s/:searchTerm route. Even the /results route works. There, the relative links in partials/result are relative to 'hostname' as I'd expect.

app.get('/', function(req, res) {
  res.render('index');
});

app.get('/s/:searchTerm', function(req, res) {
  res.render('index');
});

app.get('/results', function(req, res) {
  res.render('partials/results');
});

index.jade simply references layout.jade:

extends layout

layout.jade begins like this:

!!! 5
html(lang='en' data-ng-app='FooApp')
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    meta(name='author', content='[email protected]`')
    link(rel='shortcut icon', href='img/favicon.ico')
    title FooApp.com â„¢
    // Bootstrap core CSS 
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css', rel='stylesheet')
    // Custom css for this template 
    link(href='css/style.css', rel='stylesheet')
    //if lt IE 9
      script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
      script(src='https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js')
  body(data-ng-controller='SearchController'
    .navbar.navbar-inverse.navbar-fixed-top(role='navigation')
    .container
      .navbar-header
        button.navbar-toggle(type='button' data-target='.navbar-collapse'

How do I render a partial and keep links in that partial relative to 'hostname' ?

edit: added index.jade and layout.jade code

edit: Ah, I see I'm doing something redundant with favicon.

Answer 1

The behavior you are seeing is what is expected as hrefs are relative to the page that loads them. Since your /a/:searchTerm route is nested at /a, hrefs to static assets like img/favicon.ico will pick up their relative parent route. If you want the href to look in the root of your public directory for static assets, then prepend a / to the href like so: /img/favicon.ico