Using HTML view templates in Express JS framework

February 22, 2015, 8:17 pm
Author: James Griffiths

One of the great things about working with the MEAN stack (MongoDB, Express JS, AngularJS and Node - for those not in the know!) is its relative simplicity: JavaScript is the common thread tying all the components of the stack together, so the learning curve is relatively shallow.

One of the worst things? Jade templates.

Seriously.......Jade sucks.

Here's how to get the Express framework to use HTML templates instead.

It's all in the rendering

Thankfully, due to the amazing community of developers surrounding and contributing to Node, we can implement HTML views for our Express Apps using EJS (Embedded JavaScript), which is an open-source templating language written in JavaScript. This is available as a node module which can be installed directly into our project(s) straight from the command line.

To do this open up your console, navigate to the root of your Express JS project directory and issue the following command:

npm install ejs --save

Note that we use the --save flag, when installing node modules, to write the dependency to our package.json file.

Hopefully the installation proceeded smoothly and you should see an ejs sub-directory now located in your projects node_modules directory.

Now that we have successfully installed EJS we want to instruct the Express framework to no longer use Jade as the engine for rendering view templates. This involves opening and making some minor changes to the app.js file in the root of your project directory.

Locate the following lines in your app.js file:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));

Now replace (or comment out) the following line that instructs Express JS to use Jade as the template rendering engine:

app.set('view engine', 'jade');

With the following call to implement EJS for rendering view templates instead:

app.set('view engine', 'ejs');

With this minor modification we can now start to use HTML inside our view templates (and it didn't take much in the way of configuration did it?)

Creating a view

In your project views directory create a file named index.ejs for your application's home page and enter the following content for this view:

<h2><%= heading %></h2>
<p><%= welcome %></p>

This file contains 2 placeholder tags with variables titled heading and welcome. These placeholder variables will be populated with data from the project default route (just to demonstrate how data can be passed to and rendered into a HTML template).

These placeholder tags use the <%= syntax to HTML escape the JavaScript data that will be rendered there.

Don't forget to save this file before we move on!

More details on the syntax options avilable for the EJS plug-in are available here.

Passing data to our view

As we are going to pass some data to the home page for our application we need to modify the default route being used by Express JS. To do this open up the /route/index.js file and locate the following section of code:

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });

Let's make some amendments and populate this default route with data for our home page view:

router.get('/', function(req, res, next) 
    heading   : 'Welcome', 
    welcome   : 'This is how easy it is to embed HTML inside Express Views'

Save the file, go back to your console and, within the root of your project directory, start up your node app with the following command:

npm start

You should then see output akin to the following:

> nameOfYourAppDisplayedHere@0.0.0 start /Users/YourName/Sites/nameOfAppHere
> node ./bin/www

If so, your Node server is running! Now hit up the following address in your browser:


And, all being well, you should see your index view rendering like so:

<p>This is how easy it is to embed HTML inside Express Views</p>

Goodbye Jade, hello HTML! :)


« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.