ExpressHow-ToBeginner · 4 min read

How to Use Pug with Express: Setup and Example

To use Pug with Express, first install Pug with npm install pug. Then set Pug as the view engine in your Express app using app.set('view engine', 'pug'). Finally, create Pug template files in the views folder and render them with res.render().

📐

Syntax

To use Pug with Express, you need to configure Express to use Pug as its template engine and then render Pug files as views.

app.set('view engine', 'pug'): tells Express to use Pug for rendering views.
app.set('views', './views'): (optional) sets the folder where Pug files are stored, default is ./views.
res.render('templateName', data): renders the Pug template named templateName.pug with optional data.

javascript

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

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

// Optional: set views directory
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index', { title: 'Home Page', message: 'Hello from Pug!' });
});

app.listen(3000);

💻

Example

This example shows a simple Express app using Pug to render a homepage with a title and message.

Create a views/index.pug file with Pug syntax to display the data passed from Express.

javascript and pug

// app.js
const express = require('express');
const app = express();

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

app.get('/', (req, res) => {
  res.render('index', { title: 'Welcome', message: 'This is a Pug template rendered by Express.' });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

// views/index.pug
//- Pug template
html
  head
    title= title
  body
    h1= message
    p This page is rendered using Pug with Express.

Output

<!DOCTYPE html><html><head><title>Welcome</title></head><body><h1>This is a Pug template rendered by Express.</h1><p>This page is rendered using Pug with Express.</p></body></html>

⚠️

Common Pitfalls

Forgetting to install Pug with npm install pug causes errors when starting the app.
Not setting view engine to pug means Express won't know how to render Pug files.
Placing Pug files outside the views folder or not setting the correct views path leads to "template not found" errors.
Passing incorrect data or forgetting to pass data results in empty or broken pages.

javascript

/* Wrong: Missing view engine setup */
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.render('index'); // Error: no view engine set
});

app.listen(3000);

/* Right: Correct setup */
app.set('view engine', 'pug');
app.set('views', './views');

📊

Quick Reference

Summary tips for using Pug with Express:

Install Pug: npm install pug
Set view engine: app.set('view engine', 'pug')
Store templates in views folder
Render templates with res.render('templateName', data)
Pass data as an object to use in templates

✅

Key Takeaways

Always install Pug and set it as Express's view engine before rendering templates.

Place Pug files in the 'views' folder or configure the views path accordingly.

Use res.render() to send Pug templates with optional data to the client.

Common errors come from missing setup or incorrect file locations.

Pug templates use indentation and simple syntax to create HTML easily.