Home › Forums › Express in General › How to use alternative (non-Jade) template engines with Express

Tagged: , , ,

This topic contains 0 replies, has 1 voice, and was last updated by  Yaapa 1 year, 9 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • July 22, 2013 at 7:19 pm #36

    Yaapa
    Keymaster

    In Chapter 5, “The Jade Templating Language”, I mentioned that Jade is one of the many template engines supported by Express. However, staying true to its name, the chapter was dedicated solely to the Jade templating language. I could not address the process of using other template engines because of subject concerns, so I am creating this post to help those who want to use something else apart from Jade, as the template engine in their Express app.

    It starts with a good news: Express supports a big list of template engine alternatives, viz.:

    Some of these engines play nice with Express, meaning they provide an interface for Express to plug in into them seamlessly; while some of them don’t. However that’s not really a problem because, TJ Holowaychuk has done an excellent job of creating a module to consolidate all of these template engines to work uniformly with Express. The module is aptly named consolidate.

    To begin the exercise, generate a skeleton app in an empty directory, using the express command.

    $ express

    Next, install the consolidate module in the app directory. We will specify the --save option to ensure the module is added to the dependencies in the packages.json file.

    $ npm install consolidate --save

    Note that, consolidate is an adapter module and does not include the template engine modules, we will have to manually install the template engine of our choice ourselves. Let’s use Handlebars as an example and set it up to use with our Express app.

    Next step, we install the Handlebars template engine module. Make sure it is installed as a local module.

    $ npm install handlebars --save

    The package.json file would have been updated and will look something like this now:

    {
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.3.1",
    "jade": "*",
    "consolidate": "~0.9.1",
    "handlebars": "~1.0.12"
  }
}

    By the way, you can have more than one template engine rendering the views of your Express app, hence the entry for jade along with handlebars. However, I recommend sticking to one template engine; I am showing it just so you understand how Express works, better.

    Create index.hbs in the views directory:

    <html>
  <title>{{title}}</title>
  <body>
    <h1>{{title}}</h1>
    <i>
      <h2>"{{message}}"</h2>
      - {{author.name}}
    </i>
    <hr />
    <footer>
      <small>Rendered by Handlebars</small>
    <footer>
  </body>
<html>

    We update app.js to use the consolidate and handlebars modules. Note that, I have edited the original app file for the sake of clarity and brevity. Make sure to pay good attention to the comments in the following code, they are crucial for you to understand how templating works in Express.

    var express = require('express');
var http = require('http');
var app = express();

// The `consolidate` adapter module  
var cons = require('consolidate');

app.set('port', process.env.PORT || 3000);
app.set('views', './views');

// .hbs files should be handled by `handlebars`
// `consolidate` takes care of loading `handlebars` and interfacing it with Express
app.engine('hbs', cons.handlebars);

// we set 'hbs' as the default extension of template files
// this is optional, but you have to specify the view files's extension if you don't
// it defaults to 'jade'
app.set('view engine', 'hbs');

app.get('/', function(res, res) {
  res.render('index', {
    title: 'Ride the Handlebars',
    author: {name: 'Lemmy Kilmister', age:67},
    message: 'It seems that our brave new world is becoming less tolerant, spiritual and educated than it ever was when I was young.'
  });
});

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

    Start the app and load http://localhost:3000/ on your browser to see the view generated by Handlebars.

    As mentioned earlier, we can have more than one template engine in the same app. To demonstrate this, create a Jade-based view in the views directory, named index.jade.

    html
  head
    title #{title}
  body
    h1 #{title}
    i
      h2 #{message}
      |- #{author.name}
    hr
    footer: small Rendered by Jade

    Now, add a new route in the app which will use Jade for rendering the view.

    app.get('/jade', function(res, res) {
  // we now have to explicitly specify the extension name for Jade templates
  res.render('index.jade', {
    title: 'Jaded',
    author: {name: 'Steven Tyler', age:65},
    message: 'Humility is really important because it keeps you fresh and new.'
  });
});

    Restart the app and load http://localhost:3000/jade to see the view generated by Jade.

  • Author
    Posts
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.