Gallery
Share
Explore

Node.js Lesson Workbook: Using Pug View Template Engine

Node.js provides many template engines to create dynamic HTML pages from server-side applications. Some popular template engines that work with Express are Pug (formerly known as Jade), Mustache, and EJS
1
⁠
2
⁠
.

To use a template engine with Express, you need to install the engine and set it as the view engine for your application. For example, to use Pug as the template engine, you can install it using npm install pug and then set it as the view engine in your Express application using app.set('view engine', 'pug')
1
⁠
⁠
2
⁠
.
Here's an example of using Pug as the template engine in an Express application:
javascript
const express = require('express');
const app = express();

// Set the view engine to Pug
app.set('view engine', 'pug');

// Define a route that renders a Pug template
app.get('/', (req, res) => {
res.render('index', { title: 'My App', message: 'Welcome to my app!' });
});

app.listen(3000, () => {
console.log('Server listening on port 3000');
});

In this example, we first set the view engine to Pug using app.set('view engine', 'pug'). We then define a route that renders a Pug template called index. The res.render() method is used to render the template and pass data to it. The data is passed as an object with properties title and message, which can be accessed in the Pug template using the syntax #{title} and #{message}
1
⁠
⁠
2
⁠
.

Introduction

Pug is a high-performance, robust, and feature-rich template engine for Node.js. It allows you to write reusable HTML and includes features like variables, mixins, and includes. In this workbook, we will cover how to use Pug with Express.js to build dynamic websites.

Topics Covered:

Introduction to Pug
Basic Syntax of Pug
Using Pug with Express.js
Rendering Dynamic Content with Pug
Building a Website with Express.js and Pug

Lesson 1: Introduction to Pug

Pug, previously known as Jade, is a Node.js template engine that allows you to write concise HTML. It provides a set of features like variables, iteration, mixins, includes, and inheritance which makes it ideal for building reusable and maintainable HTML blocks.
To install Pug, use the following npm command:
bashCopy code
npm install pug

Lesson 2: Basic Syntax of Pug

Pug uses whitespace and indentation as part of its syntax. Let's consider a basic Pug template:
pugCopy code
doctype html
html
head
title= title
body
h1 Hello, world!

This Pug template will compile into the following HTML:
htmlCopy code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

Lesson 3: Using Pug with Express.js

To use Pug with Express.js, you need to set it as the view engine for your Express application. This can be done using the app.set() method:
javascriptCopy code
const express = require('express');
const app = express();

app.set('view engine', 'pug');

Lesson 4: Rendering Dynamic Content with Pug

With Pug, you can pass JavaScript variables and display them in your views. For instance:
javascriptCopy code
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})

Then, in your index.pug file, you can use these variables:
pugCopy code
doctype html
html
head
title= title
body
h1= message

Lesson 5: Building a Website with Express.js and Pug

Now, let's consider an interesting vertical - a website for a digital library. We'll use Express.js and Pug to display a list of books.
We'll start by defining our data:
javascriptCopy code
// server.js
const express = require('express');
const app = express();

app.set('view engine', 'pug');

const books = [
{ title: '1984', author: 'George Orwell' },
{ title: 'To Kill a Mockingbird', author: 'Harper Lee' },
{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
];

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

app.listen(3000, () => console.log('Server started on port 3000.'));

Next, we'll create our Pug template:
pugCopy code
// index.pug
doctype html
html
head
title Digital Library
body
h1 Welcome to the Digital Library!
ul
each book in books
li= book.title + ' by ' + book.author

In this example, we've used Pug's each keyword to iterate over the books array and display each book.
Run the server, navigate to http://localhost:3000 in your browser, and you should see a list of books displayed on the page.
This lesson workbook should help you to understand the basics of using the Pug template engine with Express.js. Pug is a powerful tool that can help you build dynamic and reusable HTML for your applications. Happy learning!
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.