static javascript not rendering in jade (with express/node.js)

Question

I hope you are well.

I'm suddenly unable to render any external javascript in jade templates! To get to the bottom of things, I stripped it down to the bare minimum :

Node 0.6.11, Express 2.5.8, jade 0.20.3

app.js

var express = require('express')
, routes = require('./routes');

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

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

app.get('/', function(req, res){
  res.render('index', { title: 'Express' });
});

app.listen(3000);

layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='/javascripts/script.js')
  body!= body

script.js

alert('hello!');

It seems to me that when I run the server and load http://localhost:3000/, I should straightaway get a 'hello!' message, but it just runs straight to the normal page. What's more, if I manually type

script
  alert('hello!')

into the layout.jade template I get the message just as I should. It is just not loading the static script. And I have certainly checked that 'script.js' is in '/public/javascripts/' just as it should be. Any advice would be very welcome!!!

Thanks in advance

Answer 1

you need to pass your script from the controller like that:

app.get('/', function(req, res){
  res.render('index', { title: 'Express', scripts: ['javascripts/script.js']});
});

and then in your head in layout.jade:

- each s in scripts
    script(src=s)

Answer 2

Make sure your js files are exposed as static resources.

In layout.jade...

!!!5
html
   head
      script(src='js/helper.js')

In app.js...

app.use(express.static(__dirname + '/public'));

Once I put the 'js' folder under the 'public' folder, helper.js loaded without issue. Simple, but I'm new to this whole thing and I didn't get that at first.

Answer 3

Why do you have a beginning forward slash '/' in your Jade script tag? With your script in <root_dir>/public/javascripts/script.js, the correct way to reference it in Jade is script(src="javascripts/script.js"). At least that is what is working on my installation. The same is true for other assets like CSS or images in the /public directory.

Answer 4

Thanks to Rob (you can find his answer above), for pointing in right direction. I just want to add a little reference so it might seem more natural than any magic.

In the express documentation here, its mentioned that if static files like css, images etc are to be served then one need to declare it using

app.use(express.static("_dirName"));

I was facing same issue with using images in html code. With this, it works fine now.