Understanding Express Template Engines

If you’ve worked with the Express.js framework in the past, you’ll know that Express can handle server-side template engines. You can populate your HTML pages with various information and data directly onto your view. This allows us to generate HTML dynamically.

In this article, we’ll introduce 3 popular template engines for Express: Pug, EJS and Mustache.

What Template Engines Should I Use?

There’s a wide variety of template engines that work with Express. The default template engine found in Express is Jade, which is now known as Pug. However, the default Jade installed in Express is still using the old version.

In this breakdown, we’ll introduce the basic syntax and uses of Pug, EJS, and Mustache.

How To Use Pug

To install Pug and use it in our Express app, we have to use npm to install it first:

$ npm install pug

Then you can set the view engine to pug when you initialize your app, then make a get call and render your view:

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/home', (req, res) => {
  res.render('home');
});

Now that you’ve done that in your Express app, you can add a template into your views directory as views/home.pug and fill it in:

h2 This is the home page
p It's a test view

That view will end up creating a HTML template with a h2 tag that wraps the text ‘This is the home page’, and a p tag that wraps the text “It’s a test view”.

If you wanted to pass data from your Express application to your home view, you can render a variable like so:

app.get('/home', (req, res) => {
  res.render('home', { animal: 'Alligator' });
});

Then your view will look like this:

h2 This is the #{animal} home page
p It's a test view

Then your h2 tag will surround the text “This is the Alligator home page”. Beyond that, you can experiment and build your own Pug files as you see fit!

How To Use EJS

Now that we’ve finished with the introduction to Pug, let’s try out EJS:

$ npm install ejs

Once you’ve installed EJS, you can call it into your Express app:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/home', (req, res) => {
  res.render('home');
});

Now that you’ve changed your view engine to ejs, you can create a template in the views directory under views/home.ejs. EJS uses regular HTML for its templates:

<h2>This is the home page</h2>
<p>It's a test view</p>

Now, let’s say that we want to add a list of animals to our HTML page. We can pass an array of animals through our Express application to our EJS template.

app.get('/home', (req, res) => {
  let animals = [
    { name: 'Alligator' },
    { name: 'Crocodile' }
  ];
  res.render('home', { animals: animals });
});

In your views/home.ejs file, you can loop through the data using .forEach:

<h2>This is the home page</h2>
<p>It's a test view</p>
<ul>
  <% animals.forEach((animal) => { %>
  <li><%= animal.name %></li>
  <% }); %>
</ul>

With this code, you will do a .forEach loop over the animals array, and output each animal’s name inside a li tag. And that’s all there is to it! You can call JavaScript directly in your EJS template and use it however you’d like.

How To Use Mustache

For our last template engine, we’ll be going over how to install Mustache and use it in an Express application.

$ npm i mustache-express

Then you can set your view engine in your Express application.

const express = require('express');
const mustacheExpress = require('mustache-express');
const app = express();
app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache');

app.get('/home', (req, res) => {
  res.render('home');
});

The file extension for mustache will look like this: views/home.mustache:

<h2>This is the home page</h2>
<p>It's a test view</p>

And to display data from your Express application in your template, pass the data through your route:

app.get('/home', (req, res) => {
  res.render('home', { animal: 'Alligator' });
});

Then within the mustache template, you can call the variable directly:

<h2>This is the {{ animal }} home page</h2>
<p>It's a test view</p>

Then animal in the .mustache file will show ‘Alligator’. If you want more information on how to use Mustache, feel free to check out their page here.

Simple And Efficient

Express’s template engine is a great way of serving up static template files in your applications. It gives you the flexibility of displaying data through the template easily. Next time you want to build an Express project, make sure you take a look into these template engines and try them out!