ExpressJs doesn't load CSS on certain routes
I was working with MEAN stack and I ran into this problem where my CSS was not loading properly on some pages. Try the following two links for comparison / understanding:
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:
expands the 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!')
source to share
I found your problem.
Change them:
link(rel='stylesheet', href='css/bootstrap.css')
link(rel='stylesheet', href='css/style.css')
For this:
link(rel='stylesheet', href='/css/bootstrap.css')
link(rel='stylesheet', href='/css/style.css')
You always want to use the preceding slash in relative markup paths. The forward slash preceding your relative paths always refers to the root of the application. If you omit the forward slash, it will try to view the path relative to the page you are on.
Check it:
Since you left the previous forward slash in the tags link
, it was trying to find your table versus "song" and not the root of the application. Omitting the trailing slash in the URL makes the relative path on the page look like a relative path (which is usually the root of the application in your case, which is why it works).
If your URL was https://edmtl.herokuapp.com/song/something
, then it will search again bootstrap.css
in https://edmtl.herokuapp.com/song/css/bootstrap.css
. Adding a trailing slash to the URL of the page will cause it to look for it in https://edmtl.herokuapp.com/song/something/css/bootstrap.css
. Including the preceding slash in your page urls will always ensure that it looks at the root of your application in https://edmtl.herokuapp.com/
:)
PS - This is true for all web applications, not just / MEAN enabled applications.
source to share