How to use the Express.js template engine
Explains the basic usage of template engines in Express.js, with examples of EJS, Pug and Handlebars.
overview
This article describes the Express.js template engine. You can check the execution sample code from the following GitHub link.
Here, we will explain the routing method using the following versions.
Express v4.18.1
nodejs v19.7.0
In addition, all the code created this time is posted on GitHub.
What is a template engine?
A template engine is a software component for outputting input data in document form based on a specific data model. When outputting data to HTML with Express.js, it is necessary to make an API request and process the response data. It is possible to output to
The primary template engine for Express.js
Express.js allows you to use a number of template engines. Below are some of the major template engines.
| Name | GitHub | Recommended | Difficulty |
|---|---|---|---|
| EJS | Repository | 〇 | Beginner |
| Jade/Pug | Repository | 〇 | Beginner |
| Handlebars | Repository | Intermediate | |
| Hogan.js | Repository | Intermediate |
To use a template engine, install the npm package for each engine and declare it in app.set.
How to use EJS
The initial settings for using EJS are as follows.
npm install --save ejs
Next, set the directory where you want to save the template files. In this example, we will create a views directory and save a file called hello.ejs in it.
The EJS sample code is as follows.
ejs.js
var express = require("express");
var app = express();
app.set("view engine", "ejs");
app.set("views", "./views");
app. get("/", function(req, res) {
const message = "hello world";
res.render("./hello", { message: message });
});
app.listen(3000, () => console.log("listening on http://localhost:3000"));
The EJS template adds HTML elements separated by indentation.
ejs.ejs
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p><%= message %></p>
</body>
</html>
After following these steps, let’s run the application and visit http://localhost:3000.
How to use Pug
Pug’s default settings are as follows:
npm install --save pug
app.set("view engine", "pug");
app.set("views", "./views");
Next, set the directory where you want to save the template files. This time, create a views directory and save a file called hello.pug in it.
The Pug sample code is as follows.
pug.js
var express = require("express");
var app = express();
app.set("view engine", "pug");
app.set("views", "./views");
app. get("/", function(req, res) {
const message = "Hello World";
res.render("./hello", { message: message });
});
app.listen(3000, () => console.log("listening on http://localhost:3000"));
Pug templates basically add HTML elements separated by indentation.
doctype html
html
head
title Hello Pug
body
p#{message}
The above pug file is equivalent to the following HTML.
<!DOCTYPE html>
<html>
<head>
<title>Hello Pug</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
With all the files created, let’s run the application and visit http://localhost:3000.
How to use Handlebars
First install the express-handlebars package.
npm install --save express-handlebars
Then set Handlebars as the template engine in your Express application.
handlebars.js
var express = require("express");
const handlebars = require("express-handlebars");
var app = express();
app.engine("handlebars", handlebars.engine());
app.set("view engine", "handlebars");
app.set("views", "./views");
app. get("/", function (req, res) {
const message = "Hello World";
res.render("./hello", { message: message });
});
app.listen(3000, () => console.log("listening on http://localhost:3000"));
Next, create a Handlebars template.
/layouts/main.handlebars
<html>
<head>
<meta charset="utf-8" />
<title>Example App</title>
</head>
<body>
{{{body}}}
</body>
</html>
hello.handlebars
<p>{{ message }}<p>
With all the files created, let’s run the application and visit http://localhost:3000.
summary
There are many template engines available for Express.js, and you can choose one according to your characteristics and situation. There are many other options besides EJS, Pug, and Handlebars introduced in this article, so choose according to your own preferences and requirements.