1. Introduction

In this tutorial, we aim to introduce you to Pug, a powerful and robust template engine for Node.js. Pug's syntax is concise, and it helps to render dynamic content in HTML.

By the end of this tutorial, you will learn how to:
- Install and configure Pug in an Express.js application
- Create dynamic views using Pug
- Render these views in your Express.js application

Prerequisites
Before we begin, make sure you have a basic understanding of Node.js and Express.js. Familiarity with HTML and JavaScript is also advantageous.

2. Step-by-Step Guide

Install and Configure Pug

First, create a new Express.js application (you can skip this step if you already have one). Install Express globally if you haven't already:

npm install -g express-generator

Next, create a new Express.js app:

express myapp

Navigate to the new app's directory:

cd myapp

Install the required dependencies:

npm install

To install Pug, run:

npm install pug

In your 'app.js' file, set Pug as your view engine:

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

Creating Pug Templates

In Express.js, views are typically stored in a 'views' folder. To create a Pug file, create a new file with a '.pug' extension.

For example, create 'index.pug' in the 'views' directory:

doctype html
html
  head
    title= title
  body
    h1= message

This will render a simple HTML page with a customizable title and message.

Rendering Views

To render your Pug view, use the 'render' method in your route handler. For example:

app.get('/', function(req, res) {
  res.render('index', { title: 'My App', message: 'Hello there!' });
});

3. Code Examples

Let's expand on the 'index.pug' example:

doctype html
html
  head
    title= title
  body
    h1= message
    ul
      each val in list
        li= val

This will render an HTML page with a title, a message, and a list of items. Here, 'list' is an array that we will pass from our Express.js route.

Our route handler might look like this:

app.get('/', function(req, res) {
  res.render('index', {
    title: 'My App',
    message: 'Hello there!',
    list: ['Apple', 'Banana', 'Cherry']
  });
});

The result will be an HTML page with a list of fruits.

4. Summary

In this tutorial, we've learned how to render dynamic views using Pug in an Express.js application. We've covered installing Pug, creating Pug templates, and rendering these templates from Express routes.

You can further explore Pug's capabilities, like including other Pug files, extending templates, and conditional rendering.

To learn more, visit the official Pug documentation.

5. Practice Exercises

1. Create a Pug template that displays a user's name and a list of their hobbies. Render this view from an Express route.

2. Display a list of users where each user has a name and an age. Use conditional rendering in Pug to display a special message for users who are over 50.

3. Create a Pug layout that includes a header and a footer. Use this layout in multiple views.

Solutions

1. See the 'index.pug' example above. You can replace 'message' with a user's name and 'list' with a list of their hobbies.

2. In your Pug template, use the 'each' keyword to loop through users. Within the loop, use an 'if' statement to check if the user's age is over 50. If it is, display your special message.

3. In Pug, you can create a layout using the 'block' and 'extends' keywords. Create a layout with 'block' placeholders for the header and footer. Then, in your views, use 'extends' to use this layout and fill in the placeholders.