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

Question

I'm writing a webapp in Node.js and Express. My subpages (eg /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, ie /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.

Answer 2

try app.use(express.static('public')) , express will automatically find the 'public' folder in your root directory. Here is docs for express.static