ExpressJs not loading CSS on certain routes ExpressJs not loading CSS on certain routes express express

ExpressJs not loading CSS on certain routes


I found your problem.

Change these:

link(rel='stylesheet', href='css/bootstrap.css')link(rel='stylesheet', href='css/style.css')

To this:

link(rel='stylesheet', href='/css/bootstrap.css')link(rel='stylesheet', href='/css/style.css')

You always want to use a preceding slash in your markup relative paths. Preceding your relative paths with a slash always refers to the application root. If you omit the slash then it tries to look at the path relative to the page you are on.

Check it out:

Because you left out the preceding slash in your link tags it tried to look for your spreadsheet relative to "song", not the application root. Omitting the trailing slash in the URL makes the relative path on the page look in the same relative path (which just happens to be the application root in your case, so it works).

If your URL was https://edmtl.herokuapp.com/song/something then it would again look for bootstrap.css at https://edmtl.herokuapp.com/song/css/bootstrap.css. Adding the trailing slash to the page URL would make it look for it at https://edmtl.herokuapp.com/song/something/css/bootstrap.css. Including the preceding slash in your page URLs will always ensure it looks in the app root at https://edmtl.herokuapp.com/ :)

PS - This is true for all web apps, not just express/MEAN apps.