It takes the tag name as the first thing in a line, and the rest is the content that goes inside it. This template will create a p tag with the content Hello from Flavio.Īs you can see, Pug is quite special. As mentioned above, Jade is the old version of Pug - specifically Pug 1.0.Īlthough 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. You can still use Jade (aka Pug 1.0), but going forward it’s best to use Pug 2.0.Īlso see the differences between Jade and PugĮxpress uses Jade as the default. It’s Jade 2.0.ĭue to a trademark issue, the name was changed from Jade to Pug when the project released version 2 in 2016. Template engines allow us to add data to a view and generate HTML dynamically. What is Pug? It’s a template engine for server-side Node.js applications.Įxpress is capable of handling server-side template engines.

Adding id and class attributes to elements.

Setup Pug to be the template engine in Express.

Within your Express route, you can then render your Pug files by calling the res.render function with the path of the file (starting from the directory set by the app.set('views') option). app.set('view engine', 'pug') įurther, you must set the view directory of your app so that Express knows where to look for your Pug files (for compilation). However, you must set the view engine property of your Express application to pug. If you are using Express in your application, you do not need to require('pug'). You can now use pug in your project through the standard require mechanism: const pug = require('pug')

Run npm install pug -save to install the pug module to your current project.Have the Node.js environment installed on your machine.To install the Pug template rendering system, follow these steps: When you run this file with npm main.js, you should get the following HTML code output in your console: Hello World, John!Ĭongratulations, you just created and compiled your first template! On to more advanced stuff, such as Conditionals, Iteration, and much more! Installation First, let's create a template to be rendered! p Hello World, #)

Pug template engine example