ExpressJs not loading CSS on certain routes

Question

I've been working with the MEAN stack and I ran into this issue where my CSS wouldn't load properly on some pages. Try the following two links to compare/understand:

https://edmtl.herokuapp.com/song

https://edmtl.herokuapp.com/song/

Layout.jade:

doctype html
html
  head
    title= title
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    link(rel='stylesheet', href='css/bootstrap.css')
    link(rel='stylesheet', href='css/style.css')

app.js:

var song = require('./routes/addSong');
app.use('/song', song);

routes/addSong.js:

var express = require('express');
var router = express.Router();
var db = require('mongoose-simpledb').db;
/* GET home page. */
router.get('/', function(req, res) {
    res.render('addSong', {title: 'Add A Song'});
});

router.post('/createNew', function(req,res){
    var song = new db.Post({
        name: req.body.songname,
        artist: req.body.artist.split(","),
        remix: req.body.remix,
        genre: req.body.genre,
        url: req.body.url,
        description: req.body.description,
        blogger: req.body.blogger
        });
    song.save(function (err,song){
        if(err) return console.error(err);
        res.send(song);
    });
});

router.get('/:songid', function(req,res){
    db.Post.find({_id: req.param('songid')}, function(err, song){
        if (err) return console.error(err);
        res.render('song', {title: song.name,
                            songInfo: [song]});
    });
});

module.exports = router;

addSong.jade:

extends layout

block content
    center
        div(style="text-align: left; width: 600px")
            form(method='POST' action='/song/createNew')
                div
                    label(for='songname') Song Name:
                    input(type='text' name='songname')
                div
                    label(for='artist') Artist:
                    input(type='text' name='artist')
                div
                    label(for='remix') Remixed By:
                    input(type='text' name='remix')
                div
                    label(for='genre') Genre:
                    ul
                        li
                            input(type="checkbox" name="genre" value="Dubstep") 
                            span Dubstep
                        li
                            input(type="checkbox" name="genre" value="Chill Out") 
                            span Chill Out
                        li
                            input(type="checkbox" name="genre" value="Progressive House") 
                            span Progressive House
                        li
                            input(type="checkbox" name="genre" value="Deep House") 
                            span Deep House
                        li
                            input(type="checkbox" name="genre" value="Electro House") 
                            span Electro House
                        li
                            input(type="checkbox" name="genre" value="Trap") 
                            span Trap
                        li
                            input(type="checkbox" name="genre" value="Drum and Bass") 
                            span Drum and Bass
                        li
                            input(type="checkbox" name="genre" value="Big Room") 
                            span Big Room
                        li
                            input(type="checkbox" name="genre" value="Funk") 
                            span Funk
                div
                    label(for='url') URL:
                    input(type='url' name='url')
                div
                    label(for='description') Description:
                    br
                    textarea(rows="4" cols="80" name='description')
                div
                    label(for='blogger') Blogger:
                    input(type='text' name='blogger')
                div
                    input(type='submit' value='Create!')

Answer 1

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.