Express (Node.js) - Include CSS and JS files conditionally

Question

I am currently working with the Express framework for Node.js and I am having trouble including stylesheets and javascript files on a per page (route) basis. I am using the default Express setup with a routes/index.js file with the following content:

exports.index = function(req, res){
    res.render('index', { title: 'Index Page Test' })
};
exports.browse = function(req, res){
  res.render('browse', { title: 'Browse Page Test' })
};

The routes above works fine and it loads index.jade and browse.jade into the "body" of layout.jade as expected. However, the assets (CSS and JS files) that the index route requires is not the same as what the browse route requires. Is it possible for me to pass an array to the layout.jade template containing the required assets and simply have it looped?

I attempted to do the above via:

Index.js (Route)

scripts: [
   'javascripts/jquery.js',
   'javascripts/easel.js',
   'javascripts/script.js'
]

Followed by:

Layout.jade

    each js in scripts
        script(src= js)

However, it simply throws an error saying "scripts is not defined." I am pretty sure I am not doing this right. Also, just to add, I stumbled upon another similar StackOverflow question here: Node.js with Express: Importing client-side javascript using script tags in Jade views? But I am not too keen on the method shown there (it requires an additional helper). If possible, I would like to stick to the functions provided by the template engine itself.

Thanks.

EDIT: If it helps, I am trying to achieve something similar to this: http://kerkness.ca/kowiki/doku.php?id=template-site:create_the_template

mihai · Accepted Answer · 2012-04-08 19:46:51Z

2

Try to pass the scripts array to the views like this:

res.render('index', { title: 'Index Page Test', scripts: scripts})

answered Apr 8, 2012 at 19:46

mihai

38.8k11 gold badges64 silver badges90 bronze badges

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

4 Comments

Ian Over a year ago

Sorry if I didn't make myself clear, but I tried that method already and it just throws a "scripts is not defined" error.

mihai Over a year ago

Then you clearly must be doing something wrong :) I tried this and it worked for me

mihai Over a year ago

What version of express are you using? Also, in your example it seems like scripts is a member of some object. Can you post the full code?

Ian Over a year ago

Ah sorry. I just realised my rather embarassing, rookie mistake. I have been too used to playing around with PHP that I did not restart the application after making the modification. It works now. Thanks a bunch!

Exploit · Accepted Answer · 2012-04-08 23:48:35Z

2

Try using dynamicHelpers.

It will become available as a local variable in your jade template as scripts.

app.dynamicHelpers({
  scripts: function(req, res){
    return ['javascripts/jquery.js', 'javascripts/easel.js','javascripts/script.js'];
  }
});

answered Apr 8, 2012 at 23:48

Exploit

1081 silver badge9 bronze badges

3 Comments

Ian Over a year ago

Awesome! It works now. Is there a way I can alter the "scripts" array in different routes?

Exploit Over a year ago

Use something like supervisor to automatically restart your node application.

Petrogad Over a year ago

dynamic helpers is gone in express 3: github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

Collectives™ on Stack Overflow

Express (Node.js) - Include CSS and JS files conditionally

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related