express.js different routes adding different assets

Question

express.js different routes adding different assets

I have my javascripts in the normal public/js/ folder, everything works normally for normal routes like '/', '/blogs' etc

    app.get('/blog', routes.blog)
    app.get('/', routes.index)

so when loading assets to the client express logs

    GET /js/jquery.js 304 3ms
    GET /js/bootstrap.js 304 3ms
    GET /js/showdown.js 304 2ms

here everything is good, however when I try to add a parameter to a get request like so

    app.get('/blog/:title', routes.blog)

I get asset loading logs like this

    GET /blog/js/jquery.js 404 2ms
    GET /blog/js/bootstrap.js 404 2ms
    GET /blog/showdown.js 404 2ms

Why is it changing the directory to '/blog/' for the js.

I have not changed anything from the normal express app.js setup, so I will post it and all my dependencies if needed but first I would like to see is there a common solution to this.

javascript
node.js
express

Answer 1

your HTML is using relative URLs for the src

<script src="js/jquery.js"></script>

Change that to an absolute URL starting with a / and you'll be fine.

Answer 2

I guess that's because your HTML file loads the assets using relative paths, so once a second forward slash appears in the URL the paths get messed up. So for instance; "/blog" = good, "/blog/" = bad. You need to either use absolute paths for your assets (paths starting with a forward slash, e.g. "/blog/js/jquery.js"), or write the paths dynamically using a template system (something like
"{{rootpath}}blog/js/jquery.js").