- Introduction to Pug
- How does Pug look?
- Install Pug
- Setup Pug to be the template engine in Express
- Your first Pug template
- Interpolating variables in Pug
- Interpolate a function return value
- Adding id and class attributes to elements
- Set the doctype
- Meta tags
- Adding scripts and styles
- Inline scripts
- Loops
- Conditionals
- Set variables
- Incrementing variables
- Assigning variables to element values
- Iterating over variables
- Including other Pug files
- Defining blocks
- Extending a base template
- Comments
Introduction to Pug
What is Pug? It’s a template engine for server-side Node.js applications.
Express is capable of handling server-side template engines. Template engines allow us to add data to a view and generate HTML dynamically.
Pug is the new name for an old thing. It’s Jade 2.0.
Due to a trademark issue, the name was changed from Jade to Pug when the project released version 2 in 2016. You can still use Jade (aka Pug 1.0), but going forward it’s best to use Pug 2.0.
Also see the differences between Jade and Pug
Express uses Jade as the default. As mentioned above, Jade is the old version of Pug - specifically Pug 1.0.
Although the last version of Jade is 3 years old (at the time of writing, summer 2018), it’s still the default in Express for backward compatibility reasons.
Pug’s official website is https://pugjs.org/.
How does Pug look?
p Hello from Flavio
This template will create a p
tag with the content Hello from Flavio
.
As you can see, Pug is quite special. It takes the tag name as the first thing in a line, and the rest is the content that goes inside it.
If you are used to template engines that use HTML and interpolate variables; like Handlebars (described next), you might run into issues, especially when you need to convert existing HTML to Pug. This online converter from HTML to Jade (which is very similar, but a little different to Pug) will be a great help: https://jsonformatter.org/html-to-jade
Install Pug
Installing Pug is as simple as running npm install
:
npm install pug
Setup Pug to be the template engine in Express
and when initializing the Express app, we need to set it:
const path = require('path')
const express = require('express')
const app = express()
app.set('view engine', 'pug')
app.set('views', path.join(__dirname, 'views'))
Your first Pug template
Create an about view:
app.get('/about', (req, res) => {
res.render('about')
})
and the template in views/about.pug
:
p Hello from Flavio
This template will create a p
tag with the content Hello from Flavio
.
Interpolating variables in Pug
You can interpolate a variable using:
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
p Hello from #{name}
Interpolate a function return value
You can interpolate a function return value using:
app.get('/about', (req, res) => {
res.render('about', { getName: () => 'Flavio' })
})
p Hello from #{getName()}
Adding id and class attributes to elements
p#title
p.title
Set the doctype
doctype html
Meta tags
html
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='description', content='Some description')
meta(name='viewport', content='width=device-width, initial-scale=1')
Adding scripts and styles
html
head
script(src="script.js")
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
link(rel='stylesheet', href='css/main.css')
Inline scripts
script alert('test')
script.
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
Loops
ul
each color in ['Red', 'Yellow', 'Blue']
li= color
ul
each color, index in ['Red', 'Yellow', 'Blue']
li= 'Color number ' + index + ': ' + color
Conditionals
if name
h2 Hello from #{name}
else
h2 Hello
else-if works too:
if name
h2 Hello from #{name}
else if anotherName
h2 Hello from #{anotherName}
else
h2 Hello
Another example:
if users.length > 2
each user in users
...
Set variables
You can set variables in Pug templates:
- var name = 'Flavio'
- var age = 35
- var roger = { name: 'Roger' }
- var dogs = ['Roger', 'Syd']
Incrementing variables
You can increment a numeric variable using ++
:
age++
Assigning variables to element values
p= name
span.age= age
Iterating over variables
You can use for
or each
, they are interchangeable and there is no difference:
for dog in dogs
li= dog
ul
each dog in dogs
li= dog
You can use .length
to get the number of items:
p There are #{values.length}
while
is another kind of loop:
- var n = 0;
ul
while n <= 5
li= n++
Including other Pug files
In a Pug file you can include other Pug files:
include otherfile.pug
Defining blocks
A well-organized template system will define a base template, and then all the other templates will extend from it.
Part of a template can be extended by using blocks:
html
head
script(src="script.js")
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
link(rel='stylesheet', href='css/main.css')
block head
body
block body
h1 Home page
p welcome
In this case one block, body
, has some content, while head
does not. head
is intended to be used to add additional content to the heading, while the body
content is made to be overridden by other pages.
Extending a base template
A template can extend a base template by using the extends
keyword:
extends home.pug
Once this is done, you need to redefine blocks. All the content of the template must go into blocks, otherwise the engine does not know where to put them.
Example:
extends home.pug
block body
h1 Another page
p Hey!
ul
li Something
li Something else
You can redefine one or more blocks. The ones not redefined will be kept with the original template content.
Comments
Comments in Pug can be of two types: visible or invisible in the resulting HTML.
Visible
Inline:
// some comment
Block:
//
some
comment
Invisible
Inline:
//- some comment
Block:
//-
some
comment
Download my free Node.js Handbook
More node tutorials:
- An introduction to the npm package manager
- Introduction to Node.js
- HTTP requests using Axios
- Where to host a Node.js app
- Interact with the Google Analytics API using Node.js
- The npx Node Package Runner
- The package.json guide
- Where does npm install the packages?
- How to update Node.js
- How to use or execute a package installed using npm
- The package-lock.json file
- Semantic Versioning using npm
- Should you commit the node_modules folder to Git?
- Update all the Node dependencies to their latest version
- Parsing JSON with Node.js
- Find the installed version of an npm package
- Node.js Streams
- Install an older version of an npm package
- Get the current folder in Node
- How to log an object in Node
- Expose functionality from a Node file using exports
- Differences between Node and the Browser
- Make an HTTP POST request using Node
- Get HTTP request body data using Node
- Node Buffers
- A brief history of Node.js
- How to install Node.js
- How much JavaScript do you need to know to use Node?
- How to use the Node.js REPL
- Node, accept arguments from the command line
- Output to the command line using Node
- Accept input from the command line in Node
- Uninstalling npm packages with `npm uninstall`
- npm global or local packages
- npm dependencies and devDependencies
- The Node.js Event Loop
- Understanding process.nextTick()
- Understanding setImmediate()
- The Node Event emitter
- Build an HTTP Server
- Making HTTP requests with Node
- The Node fs module
- HTTP requests in Node using Axios
- Reading files with Node
- Node File Paths
- Writing files with Node
- Node file stats
- Working with file descriptors in Node
- Working with folders in Node
- The Node path module
- The Node http module
- Using WebSockets with Node.js
- The basics of working with MySQL and Node
- Error handling in Node.js
- The Pug Guide
- How to read environment variables from Node.js
- How to exit from a Node.js program
- The Node os module
- The Node events module
- Node, the difference between development and production
- How to check if a file exists in Node.js
- How to create an empty file in Node.js
- How to remove a file with Node.js
- How to get the last updated date of a file using Node.js
- How to determine if a date is today in JavaScript
- How to write a JSON object to file in Node.js
- Why should you use Node.js in your next project?
- Run a web server from any folder
- How to use MongoDB with Node.js
- Use the Chrome DevTools to debug a Node.js app
- What is pnpm?
- The Node.js Runtime v8 options list
- How to fix the "Missing write access" error when using npm
- How to enable ES Modules in Node.js
- How to spawn a child process with Node.js
- How to get both parsed body and raw body in Express
- How to handle file uploads in Node.js
- What are peer dependencies in a Node module?
- How to write a CSV file with Node.js
- How to read a CSV file with Node.js
- The Node Core Modules
- Incrementing multiple folders numbers at once using Node.js
- How to print a canvas to a data URL
- How to create and save an image with Node.js and Canvas
- How to download an image using Node.js
- How to mass rename files in Node.js
- How to get the names of all the files in a folder in Node
- How to use promises and await with Node.js callback-based functions
- How to test an npm package locally
- How to check the current Node.js version at runtime
- How to use Sequelize to interact with PostgreSQL
- Serve an HTML page using Node.js
- How to solve the `util.pump is not a function` error in Node.js