Updated Aug 27 2019
Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨
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/.
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
Installing Pug is as simple as running npm install
:
npm install pug
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'))
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
.
You can interpolate a variable using:
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
p Hello from #{name}
You can interpolate a function return value using:
app.get('/about', (req, res) => {
res.render('about', { getName: () => 'Flavio' })
})
p Hello from #{getName()}
p#title
p.title
doctype html
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')
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')
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');
ul
each color in ['Red', 'Yellow', 'Blue']
li= color
ul
each color, index in ['Red', 'Yellow', 'Blue']
li= 'Color number ' + index + ': ' + color
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
...
You can set variables in Pug templates:
- var name = 'Flavio'
- var age = 35
- var roger = { name: 'Roger' }
- var dogs = ['Roger', 'Syd']
You can increment a numeric variable using ++
:
age++
p= name
span.age= age
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++
In a Pug file you can include other Pug files:
include otherfile.pug
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.
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 in Pug can be of two types: visible or invisible in the resulting HTML.
Inline:
// some comment
Block:
//
some
comment
Inline:
//- some comment
Block:
//-
some
comment