Node and Express - Template Engines
Learn everything about Express in this Node and Express tutorial series. This article goes in depth on Express template engines, specifically pug.
Table of Contents 📖
- What is a Template Engine?
- Popular Templating Engines for Express
- What is Pug?
- Installing Pug
- Setting Pug as the Template Engine
- What is app.set()?
- Telling Pug where our Templates are
- Creating our First Template
- Displaying our Template
- What is response.render?
- Providing Data to our Template
- What is an Interpolated String?
- Summary
What is a Template Engine?
Template engines allow us to use template files with dynamic content. For example, we could have an HTML file that represents a user's profile page. The structure of this HTML page will be the same for each user, but certain displayed information will be different such as the username, profile picture, etc.
Popular Templating Engines for Express
Some popular template engines for Express are Pug, EJS, and Mustache. For this tutorial, we will be using Pug.
What is Pug?
Pug is a powerful template engine for Express that has a variety of features.
Installing Pug
We will install Pug the same way we installed Express, using the Node package manager (npm).
npm install pug
Setting Pug as the Template Engine
We have installed Pug, but we haven't actually set it as our template engine. To do this, we use the method set with our Express app.
app.set('view engine', 'pug');
Note that to use Pug, we don't use the require function.
What is app.set()?
The Express app method set is used to store variables. It is often used along with the method get which retrieves the stored variables.
app.set('favChannel', 'WittCode');
app.get('favChannel'); // Returns WittCode
Certain names in the set method are used for configuration. For example, the key "view engine" is reserved for setting the Express application's view engine.
Telling Pug where our Templates are
Another reserved key for the set method is "views". This tells Express where our templates are.
app.set('views', './views');
So lets create a folder called views at the top level of our project structure.
Creating our First Template
Within our views folder, lets create a file called profile.pug and place the following inside.
doctype html
html
head
title User Profile
body
h1 My profile
This is pug syntax that will be rendered into the following HTML.
<!DOCTYPE html>
<html>
<head>
<title>User Profile</title>
</head>
<body>
<h1>My Profile</h1>
</body>
</html>
Displaying our Template
Now, navigate over to our index.js file within routes/users/index.js and place the following code inside our /:username route.
router.get('/:username', (request, response) => {
response.render('profile');
});
What is response.render?
The method response.render is used to compile our template. The first parameter is the view we want to display. Here, this is our profile.pug file.
Note how we just have to provide the word profile because we have established our view engine as pug and provided the location of our templates with app.set. Technically, this is saying render the template ./views/profile.pug.
If we navigate over to localhost:1234/users/WittCode we will get the following.
Providing Data to our Template
The response.render method also takes a second parameter, an object whose values can be displayed on the template file.
router.get('/:username', (request, response) => {
response.render('profile', { username: request.params.username });
});
The code above passes the request parameter (whatever takes place of :username in /users/:username) to our profile template. We can then access it in our template like so.
doctype html
html
head
title User Profile
body
h1=username
Now, if the object passed to response.render has a key username, its value will be displayed in a h1 tag.
If we changed the url to /users/Bob, then Bob would be displayed in the h1 tag. If we want to display the username inside some text, we can do the following.
doctype html
html
head
title User Profile
body
h1 #{username}'s Profile
What is an Interpolated String?
What we did above is known as an interpolated string. An interpolated string is a literal string that contains variables. So, we can display our username variable inside a string in our template.
Summary
But there we have it! Don't worry, we will be learning more about Pug as we continue this series, this article serves more as an introduction. Nevertheless, if this article was helpful, please consider donating at the top of the page, sharing this article, and subscribing to my YouTube channel WittCode.