WittCode💻

Node and Express - Template Engines

By

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?

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.

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.

Image

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.

Image

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.

Image

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.

Image

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.

Node and Express - Template Engines