Static javascript not rendering in jade (with expression / node.js)

Question

I hope you are healthy.

I suddenly fail to display external javascript in jade templates! To understand this, I divided it into a 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 start the server and load http: // localhost: 3000 / , I should immediately receive "hello!". message, but it just launches directly on a regular page. What else if I manually type

 script alert('hello!') 

in layout.jade template I get the message as it should. It just does not load a static script. And I definitely checked that "script.js" is in '/ public / javascripts /', as it should be. Any advice would be greatly appreciated.

Thanks in advance

Answer 1

you need to pass your script from the controller as follows:

 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 appear as static resources.

In layout.jade ...

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

In app.js ...

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

As soon as I put the "js" folder in the "public" folder, helper.js loads without problems. Simple but I'm new to all of this, and at first I didn't get it.

Answer 3

Why do you have an initial slash '/' in the Jade script tag? Using the script in <root_dir>/public/javascripts/script.js correct way to link to Jade is the script(src="javascripts/script.js") . At least this is what works on my installation. The same applies to other assets, such as CSS or images in the / public directory.

Answer 4

Thanks to Rob (you can find his answer above) for pointing in the right direction. I just want to add a small link to make it seem more natural than any magic.

In the express documentation here , it is mentioned that if static files, such as css, images, etc., are to be sent, you need to declare them using

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

I ran into the same problem using images in html code. However, it works fine now.