Node.js: Subpages can't find public statics folder

Question

I'm writing a webapp in Node.js and Express. My subpages (e.g. /reflection/id) cannot find my statics folder. Rather than looking for /stylesheets, /javascripts, etc. (which would be redirected to /public/stylesheets, etc.), it is searching within the subpage, i.e. /reflection/stylesheets.

You can go to the Heroku page (also linked below) and check out the developer console, and you'll see that it's searching the wrong path.

I suspect that the problem exists in my app.js (link), probably around line 24:

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

Any idea what's going on? Am I not declaring the static path correctly? Any insights are appreciated.

Project on Git: https://github.com/gredelston/every6

Heroku deployment, relevant page: http://every6.herokuapp.com/reflection/test

Answer 1

You need to use absolute URLs

<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">

instead of

<link rel="stylesheet" type="text/css" href="stylesheets/main.css">

Otherwise the browser tries to load stylesheets relative to the current URL you are viewing.