HTML Templating with Pug

Understanding Pug

Pug is a high-performance template engine for Node.js and browsers that simplifies creating dynamic HTML. It replaces traditional HTML syntax with an indentation-based syntax, making code cleaner, shorter, and more readable. Imagine it as a shorthand for HTML that lets you focus on content structure without worrying about closing tags.

Why Use Pug?

Think of Pug as your digital sous-chef in the kitchen of web development. Just as a sous-chef preps and organizes ingredients, Pug helps organize and simplify your HTML, reducing clutter and making your code easier to manage. It’s particularly useful when working on projects where you need to render dynamic data into templates.

For example:

Rendering data from a database onto web pages
Creating reusable components like headers, footers, and navigation bars
Efficiently managing conditional content or loops in your HTML

Getting Started

To use Pug, you need to install it in your Node.js project. Run:

npm install pug

Next, set up Pug as your templating engine in an Express.js application:

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

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

Basic Pug Syntax

Pug eliminates the need for closing tags and relies on indentation to determine nesting. Here's an example:

html
  head
    title Pug Example
  body
    h1 Welcome to Pug
    p This is a paragraph.

When compiled, this generates the following HTML:

<html>
  <head>
    <title>Pug Example</title>
  </head>
  <body>
    <h1>Welcome to Pug</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Dynamic Content with Variables

Pug makes it easy to inject dynamic content using variables:

// In your route handler
app.get('/', (req, res) => {
  res.render('index', { title: 'Home', message: 'Hello, World!' });
});

In the index.pug file:

html
  head
    title= title
  body
    h1= message

This outputs:

<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Real-World Examples

Imagine you're building an e-commerce site. You need to display a list of products dynamically:

// In your route handler
app.get('/products', (req, res) => {
  const products = [
    { name: 'Laptop', price: 999 },
    { name: 'Phone', price: 599 },
    { name: 'Tablet', price: 799 }
  ];
  res.render('products', { products });
});

In the products.pug file:

html
  head
    title Products
  body
    h1 Product List
    ul
      each product in products
        li= product.name + ' - $' + product.price

This renders:

<html>
  <head>
    <title>Products</title>
  </head>
  <body>
    <h1>Product List</h1>
    <ul>
      <li>Laptop - $999</li>
      <li>Phone - $599</li>
      <li>Tablet - $799</li>
    </ul>
  </body>
</html>

Advanced Features

Pug supports advanced features like mixins (reusable templates) and conditionals:

// Define a mixin
mixin product(name, price)
  li= name + ' - $' + price

// Use the mixin
ul
  +product('Laptop', 999)
  +product('Phone', 599)

This makes templates reusable and modular, perfect for large projects.

Why Developers Love Pug

Pug is a favorite among developers because it simplifies HTML, improves readability, and integrates seamlessly with Express. It’s perfect for projects where dynamic data and clean templates are essential.