#PASS DATA TO PUG TEMPLATE INSTALL#
#PASS DATA TO PUG TEMPLATE UPDATE#
#PASS DATA TO PUG TEMPLATE CODE#

The second example is preferred if you wish to show a dynamic value within a string of text. The first example is preferred if the variable is the only content in a given element. Assuming that text is a variable that represents some text, we can interpolate its value and render it in our template like so: p= text There are two ways to interpolate dynamic data within our template. To nest elements, just create a new line and indent the new tagname. Rather that writing standard HTML and tags, all we need to write to represnet an HTML element is the tag name.

#PASS DATA TO PUG TEMPLATE CODE#

This code should come after all dependencies and constants have been defined and before the first app.use line in your index.js file. The code to achieve both of these is below: app.set('views', 'views')

#PASS DATA TO PUG TEMPLATE UPDATE#

Next we will update the ‘view engine’ property of our and set its value to the name of the templating engine we wish to use, in this case ‘pug’. The first argument is the name of the property we want to update and the second argument is the value.įirst we will update the ‘views’ property and set its value to the path to our views directory. We are going to do this by setting two Express Application Settings, 'views' and 'view engine' by using the app.set method. Next, we need to tell Express where to look for our template files, and what templating engine we are using.

#PASS DATA TO PUG TEMPLATE INSTALL#

To do that, run the following in your command line tool: npm install pug -save

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.

Pass data to pug template