CODEWITHSUNDEEP
node.jsexpresspug
turbopasi
turbopasi

Reputation: 3605

Node.js Pug - CSS won't load on one specific page

Im building my first node.js app with express and pug as view/template eingine. A problem I am experiencing atm is the following:

Issue: Same CSS file loads on other routes & template.pugs but won't load on one specific route/template. Get a 404 error.

my server.js:

var express = require('express');   
var path = require('path');
var app = express();

var bodyParser = require("body-parser");

app.set('views', './templates');
app.set('view engine', 'pug');

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

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

require('./router')(app);

var listener = app.listen(process.env.PORT, function() {
  console.log('Server is live on PORT : ' + listener.address().port);
});

my router.js (css loads for "/" & "/events", not for /events/new"):

var controller = require ('./controller');

module.exports = function (app) {

//start
app.get('/', controller.index);

// All Events View
app.get('/events', controller.show_events);
app.get('/events/new', controller.new_event_form);

};

my controller.js (css loads for "index" & "show_events", not for "new_event_form" )

module.exports = {
 index: index,
 show_events: show_events,
 new_event_form: new_event_form
};

function index (req, res) {
  res.render('index');
}

function show_events(req, res) {
  res.render('show_events'); 
};

function new_event_form(req, res) {
  res.render('new_event_form');
};

Now comes the odd part. For this template "show_events.pug" it loads the css file. route: /events

doctype

html
  head
    title Database
    link(rel='stylesheet', href='./css/main.css')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
  body
    div#wrapper
      header
        h1 Database: Events
      menu
        a(href='/')
          h2 Back
        a(href='/events/new')
          h2 Create New Event

But for this template "new_event_form.pug" it won't load the css file. Route: /events/new

doctype

html
  head
    title Database
    link(rel='stylesheet', href='./css/main.css')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
  body
    div#wrapper
      header
        h1 Event: New
      menu
        a(href='/events')
         h2 Cancel

Css perfectly loads as well for the index "/" route.

Folder/file structure so far

 controller.js
 router.js
 server.js
 public
 - - css
 - - - - main.css
 templates
 - - index.pug
 - - show_events.pug
 - - new_event_form.pug

Kind find any mistake so far, don't get why it loads on the index route and the show_events route, but not on the new_event_form route.

Thanks for any hints or solution !

Update when comparing the routes i noticed some differencies: - for https://terminal.glitch.me/events the request adress for the css file is https://terminal.glitch.me/css/main.css - for https://terminal.glitch.me/events/new the request adress for the css file is https://terminal.glitch.me/events/css/main.css

Upvotes: 0

Views: 1541

Answers (1)

turbopasi
turbopasi

Reputation: 3605

So simple:

In the pug file for the events/new route the link ref should contain 2 dots before /css/main.css, not 1

So I changed this 

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

to this

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

now it's working

It was just not clear for me how to use ../ this type of things for absolute paths ...

Upvotes: 2

Related Questions