Real data

We've now written two files with the extension .njk. We've also installed something called nunjucks into our app, and referred to it in our server.js file.

One of the problems with normal HTML files is that they are static. It's not easy for us to tell a server which parts should stay the same, and which parts should change based on data the app holds.

Nunjucks is a templating language, and it helps us overcome this problem.

How nunjucks works

Anything that you could write in a .html file, you can also write in a .njk file.

Nunjucks lets us insert special placeholder tags in our HTML, representing places where real data should be inserted later on.

When a user requests one of our views, the server will look for these placeholder tags, and try to replace them with real data.

By the time the user recieves the webpage they requested, all the nunjucks tags will have been stripped out and replaced with actual content.

Basic nunjucks tags

The simplest nunjucks tag gives the name of a Javascript variable we want to replace the tag when the view is sent to a user:

{{ currentYear }}

We can insert this tag into normal HTML like this:

<h1>The year is {{ currentYear }}</h1>

Try adding this snippet to your index.njk file now.

If you restart your app and check the view in the browser, you should just see 'The year is '.

The tag has been removed, but there isn't any real data to replace it with yet.

Passing data into a view

These tags only work if we make the necessary data available in a view.

Let's say we want the {{ currentYear }} tag to be replaced with '2018' when a user sees the page.

We need to change our route code in server.js to pass that data in:

server.get('/', function(req, res){
  res.render('index.njk', {
    currentYear: 2018
  })
})

Be careful to modify the corresponding route for the view file that you're interested in.

Restart your app and look at the page again.

You should now see the message 'The year is 2018'.

You can pass as many pieces of data as you like into a view, and call each piece whatever you like.

You can use all the data types we were introduced to in the last module, like strings, numbers and booleans:

server.get('/', function(req, res){
  res.render('index.njk', {
    currentYear: 2018,
    showMessage: true,
    usersRole: "Blogger"
  })
})

Eventually, we will fetch this information from a database.

Logic

We can use nunjucks to write if statements, just like we did with Javascript in the last module:

{% if currentYear == 2018 %}
  The year is 2018!
{% endif %}

In this example, the message will only appear if the currentYear variable passed into the view is equal to 2018. Otherwise, nothing will appear.

Next, we'll look at some more advantages nunjucks gives us over plain HTML.