We are going to install Pug in the same way the we installed Express earlier in this series, with NPM, so that it saves a reference to the dependency in our package.json file. Pug has some great features including a clean shorthand for writing HTML markup, templating logic, and the ability to write inline JavaScript.

In this tutorial we will be working with a templating engine named Pug, which changed its name from Jade recently after it was learned that Jade was already a registered trademark. Each has its own strengths, syntax, logic, and methods of handling data injection. There are lots of different templating engines that work with JavaScript including Mustache, Handlebars, EJS, and Pug to name just a few. To do this, we need to use a templating engine to render our dynamic data to the page. So, rather than serving a “hard-coded” html page, we are going to inject dynamic information into the page when it is served. Dynamic content is content that is generated at the time you request the page. Now let’s start making things a little more interesting by serving up some dynamic content.

In the previous post we served up some static content. This post is part of a Node.js series and is a continuation of my last post, Serving Static Content with Node.js and Express.

Pug template if conditions