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

If you use Firebug or Chrome's inspector, can you see any errors in loading the JS file? — loganfsmyth
– loganfsmyth, Commented Mar 1, 2012 at 21:27
@loganfsmyth thanks for your comment! in firebug the addresses are listed but I can't click through to the documents. there are no errors... — Petrov
– Petrov, Commented Mar 1, 2012 at 21:50
If you just type the URL into the browser, can you see the script? Also, when you say they are listed, you mean you can see the script tag? You should be able to see the network request in there too. Maybe see if the request has a successful response w/ data. — loganfsmyth
– loganfsmyth, Commented Mar 2, 2012 at 0:27
You've probably checked this already, but every single time I've had this problem it's been something to do with the indentation. Make sure you have 2 spaces not tabs. Other than that, I agree that you should see what's being written to the HTML to get some clues. — feralcreature
– feralcreature, Commented Mar 2, 2012 at 0:55

plus- · Accepted Answer · 2012-03-07 11:07:08Z

9

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)

answered Mar 7, 2012 at 11:07

plus-

46.7k16 gold badges63 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rob · Accepted Answer · 2013-03-29 21:35:48Z

5

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.

answered Mar 29, 2013 at 21:35

Rob

3413 silver badges5 bronze badges

Comments

Neil · Accepted Answer · 2012-07-17 15:47:41Z

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.

answered Jul 17, 2012 at 15:47

Neil

1,7282 gold badges12 silver badges7 bronze badges

Comments

Blaze · Accepted Answer · 2016-09-08 13:23:22Z

0

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.

answered Sep 8, 2016 at 13:23

Blaze

1,7222 gold badges22 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related