Previous

Express.js Setting Up Pug

Pug (formerly known as Jade) is a high-performance templating engine for Node.js and is commonly used with Express.js. It provides a clean, whitespace-sensitive syntax that allows you to write HTML more concisely.

 

Key Features of Pug

  • Concise Syntax: Pug uses indentation-based syntax, eliminating the need for closing tags, making it cleaner and more readable.
  • Dynamic Content: Allows for the embedding of dynamic data within the HTML.
  • Template Inheritance: Pug supports template inheritance, which makes it easy to reuse common elements like headers and footers.
  • Partials: Allows inclusion of other Pug files to create reusable components.

 

Steps to Set Up Pug in Express.js

Install Pug
To use Pug in your Express.js application, you need to install it. Run the following command:

npm install pug

Set Pug as the View Engine
In your app.js or server.js file, set Pug as the view engine for your Express application:

const express = require('express');
const app = express();

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

// Optionally, specify the views folder if it's different from the default
app.set('views', './views');

Create Views Folder
Create a views folder in your project directory where you will store your Pug templates.

Create Pug Templates
Inside the views folder, create Pug template files (e.g., index.pug).

Example views/index.pug:

doctype html
html
  head
    title= title
  body
    h1 Welcome to #{title}!

Render Views in Express Routes
You can now render Pug templates and pass dynamic data from your Express routes.

Example route:

app.get('/', (req, res) => {
    res.render('index', { title: 'My Express Application' });
});

When a request is made to the root URL (/), Express will render the index.pug template and replace the #{title} placeholder with the value 'My Express Application'.

Run the Application
Now, run the Express application using the following command:

node app.js

When you navigate to http://localhost:3000 in your browser, you should see the rendered HTML page with the dynamic content.

 

Using Template Inheritance in Pug

Pug supports template inheritance, which helps in reusing common elements like headers, footers, or navigation menus.

Create a Layout Template
Create a layout.pug file that serves as the base template for other views:

doctype html
html
  head
    title My Website
  body
    header
      h1 My Website Header
    block content
    footer
      p My Website Footer

Extend the Layout in Other Templates
Other templates can extend this layout by using the extends keyword and defining content with the block keyword.

Example index.pug:

extends layout

block content
  h2 Welcome to the Homepage!
  p This is a simple example of using Pug.

In this case, the index.pug file will render the content inside the block content area of the layout.pug template.

 

Passing Data to Pug Templates

You can pass various types of data (strings, objects, arrays) from your Express routes to Pug templates.

Example of passing an object:

app.get('/', (req, res) => {
    const user = { name: 'John Doe', age: 30 };
    res.render('index', { user });
});

In views/index.pug, access the properties of the user object:

h1 Name: #{user.name}
p Age: #{user.age}

 

Using Partials in Pug

Pug allows you to use partials, which are reusable templates, to make your code cleaner and more modular.

Create a Partial Template
Create a header.pug file inside the views/partials folder:

header
  h1 This is the Header

Include the Partial in Other Templates
In your index.pug template, include the header partial:

include partials/header

h2 Main Content

The include partials/header tag will insert the content of the header.pug partial inside the main template.

 

Using Helpers in Pug

Pug does not have its own helper system, but you can pass functions from Express as locals to Pug templates and use them as helpers.

Example of passing a function:

app.get('/', (req, res) => {
    const formatDate = (date) => {
        return new Date(date).toLocaleDateString();
    };
    res.render('index', { formatDate, currentDate: new Date() });
});

In views/index.pug, use the passed function:

p Current Date: #{formatDate(currentDate)}

 

Summary

Setting up Pug in an Express.js application is easy and allows for dynamic rendering of HTML content. After installing Pug and configuring Express to use it as the view engine, you can create Pug templates and render them with dynamic data. Pug also supports template inheritance, partials, and custom helpers, making it a powerful tool for building modular and reusable views in your application.

Previous