ExpressJS without Jade? Use Underscore template!

Many of you must have felt like a burden knowing that Express recommended you to learn another template language (Jade).

Don’t worry, you can code all your templates on HTML using underscoreJS!

Oh yay?

Let’s take a look on how you implement that on your express app.

First install express package, create your express app:

$ npm install -g express
$ express ./foo && cd ./foo

Install your underscore package

$ npm install -d underscore

If you edit app.js you’ll see something like this:

/**
 * Module dependencies.
 */

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

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

// Configuration

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());
});

// Routes

app.get('/', routes.index);

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

Now, all you need to do is, to comment out 1 line and register underscorejs:

/**
 * Module dependencies.
 */

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

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

// Configuration
app.configure(function(){
  app.set('views', __dirname + '/views');
  //app.set('view engine', 'jade'); ----> Comment this out!!
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

// Add these lines to register underscore template
var _ = require('underscore');
app.register('.html', {
  compile: function(str, options){
    var compiled = require('underscore').template(str);
    return function(locals) {
        return compiled(locals);
    };
  }
});

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

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

// Routes

app.get('/', routes.index);

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

Now, go to routesindex.js:

$ vi routes/index.js

Change the template name from ‘index’ to ‘index.html’:

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index.html', { title: 'Login' })
};

Next, go to views directory and create layout.html

< html >
  < head >
    < title ><%=title%>< /title >
  < /head >
  < body >
  <%=body%>
  < /body >
< /html >

And last, still in views directory, create another file called index.html

Hello World!

And there you go.. you can write your HTMl code in peace =)