Express.js View Engines

I. What are view engines?

To output dynamic content in Express, we can use a view engine or template engine.

With view engines, we can create HTML and insert a bit of JS here and there.

The Express application generator uses Jade as its default but supports several others.

Some popular template engines that work with Express are Pug , Mustache , and EJS .

To install Pug:

$ npm install pug

To install Mustache:

$ npm install mustache --save

To install EJS:

$ npm install ejs

II. How to render template files in Express

To render template files, we need to set the following:

views, the directory where the template files are located. The default directory is “views”.

If we’d like to set it to something else, we can use app.set(). It lets us configure some application settings.

app.set("views", "myviews");

view engine, the template engine to use. For example, to use the EJS template engine: app.set(‘view engine’, ’ejs’).

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

Below is an example app using EJS.

III. How To Use EJS

1. Install

To install EJS in our Express app, we use npm:

$ npm install ejs

2. Setting

Once we’ve installed EJS, we can register the view engine in our Express app.js with app.set().

const express = require("express");

// express app
const app = express();

// register view engine
app.set("view engine", "ejs");

3. Create the views

Automatically, EJS will look into the “views” folder to find the templates.

To create the views, we use the .ejs extension. For example, in /views folder, we create

index.ejs
about.ejs
404.ejs

EJS uses regular HTML for its templates

<h2>Homepage</h2>
<p>Hello, world</p>

4. Render a view

To render a view, we use the render() method. We pass in the template name inside the method without the .ejs extension.

const express = require("express");

// express app
const app = express();

// listen for requests
app.listen(3000);

// register view engine
app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("index");
});

app.get("/about", (req, res) => {
  res.render("about");
});

// 404 page
app.use((req, res) => {
  res.status(404).render("404");
});

5. EJS syntax

In the .ejs template, JavaScript expressions, HTML, and comments have special tags.

Subject	Tags	Description
JavaScript expressions	<% (…) %>	The tags define JavaScript operations
HTML-code	<%= (…) %>	The tags escape HTML-construction
	<%- (…) %>	The tags output information with unescaped buffering
Comments	<%# (…) %>	The tags highlight the comments

Example: We pass titles for each template.

const express = require("express");

// express app
const app = express();

// listen for requests
app.listen(3000);

// register view engine
app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("index", { title: "Home" });
});

app.get("/about", (req, res) => {
  res.render("about", { title: "About" });
});

// 404 page
app.use((req, res) => {
  res.status(404).render("404", { title: "404" });
});

In each template’s <head> section, we use the ejs syntax <%= title %> to output a variable.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= title %> | My Blog</title>
</head>