Question

I am unable to call my script.js file from inside jade though javascript renders perfectly fine if inserted inline. This is my first attempt, so the js file is simply an alert:

alert("javascript works");

I’m inclined to believe that I am improperly calling the script. Currently layout.jade looks like:

doctype 5
html
  head
    title= "LeafPress - Hot off the Presses"
    link(rel='stylesheet', href='/stylesheets/style.css')
  block scripts
    script(type='text/javascript', src='/javascripts/script.js')
  body
    block content

I’ve tried a number of permutations of the script path (../public/javascripts/script.js; /public/javascripts/script.js; public/javascripts/script.js; javascripts/script.js; script.js), as well as trying placing the script directly in the root and ‘views’ dir.

app.js:

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes/index')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(app.router);
  app.use(require('stylus').middleware(__dirname + '/public'));
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);
app.get('/permalink', routes.permalink);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

index.js:

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

exports.permalink = function(req, res) {
  res.render('permalink', { title: 'Comments page' });
};

My relevant file hierarchy looks like:

- public
  - javascripts
    - script.js
- views
  - index.jade
  - layout.jade
- routes
  - index.js

app.js

This seemed relevant, but didn’t fix the problem: static javascript not rendering in jade (with express/node.js)

Answer 1

Try removing this line entirely app.use(app.router);. Manually changing the location of the router in the express middleware stack is usually going to yield undesired behavior. Don’t do it unless you are truly certain you know exactly why you are doing it and what you expect to happen. What the express logger’s output for the notorious cannot GET /javascripts/script.js, which will point directly at middleware/routing misconfiguration.

I’m guessing your markdown syntax is your question is just busted, but make sure the script.js file is inside the javascripts directory, not a sibling of it.