Express is capable of handling server-side template engines.
Template engines allow us to add data to a view, and generate HTML dynamically.
Express uses Jade as the default.
Jade is the old version of Pug, specifically Pug 1.0.
The name was changed from Jade to Pug due to a trademark issue in 2016, when the project released version 2. You can still use Jade, aka Pug 1.0, but going forward, it’s best to use Pug 2.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.
In any new project, you should use Pug or another engine of your choice, like EJS, Handlebars, or any other supported template engine.
Let’s see the basics of Pug now. The official site of Pug is https://pugjs.org/.
You can use many different template engines, including Pug, Handlebars, Mustache, EJS and more.
To use Pug we must first install it:
npm install pug
and when initializing the Express app, we need to set it:
const express = require('express')
const app = express()
app.set('view engine', 'pug')
We can now start writing our templates in .pug files.
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}
Look at the Pug guide for more information on how to use Pug.
This online converter from HTML to Pug will be a great help: https://html-to-pug.com/