- [Michael] Hey and welcome back to MasteringExpress Web Application Development.Now that we've done our groundworkof setting up our configuration and logging systems,it's time to make our application do something.Until the latest version, Express supported Jade,Handlebars, and EJS by default.However the latest version is even more decoupledwhich allows us to use any templating package that we want.In this video, we'll be installing Nunjucks,an alternative templating languagethat can be used with Express and we'll integrate itso that we can use it in our application.

By default, Express ships with Jade,which we can see in our app.js file.You can find the Jade template in the views folder,and they look like this.If you're not used to Jade, this can be quite confusing.Personally, I like to use the one called Nunjucks,which is heavily inspired by the Python templating language,Jinja2, as I use similar templating languages,when writing other programming languages.

Let's start by loading up our appand see what it looks like currently.As you can see, it's just an Express headerwith the words Welcome to Express.The Jade template has actually been compiledwith a down to normal html.This is what we're going to reproduce with Nunjucks.We start with npm install nunjucks --save.This must be feeling very familiar by now,but before we can use anything,we have to download and install it.

The next step is to configure Nunjucks in app.js.As Express is a huge project, Nunjuck actually knowshow to configure itself for Express.Here, we pass the app instance into Nunjucksand everything is taken care for us.We also say that we want to automatically escapeand html is open in our views.And all of our views are currently locatedin the views folder.

The next thing to change is the view engine.At the moment, this is set to Jade,which means that Express will automaticallytry and render index jade, when told to render index.Let's change that to html, as that's the suffixour files will use when we write our Nunjucks template.And finally, let's rename all those Jade templates to html.

If we now run our application or load our application again,we can see that the Jade template is being renderedas though it is html, and it doesn't look very good anymore.That means we need to change our templatesto use the Nunjucks syntax, rather than the Jade syntax.I think we should tackle the layout first.So let's open layout html,and say this html document has got a head tagwith a style sheet and this block content.

A block is somewhere that you can put content.In this case it's actually called content.Nunjucks has a similar conceptwhich I'll introduce you to soon,but for now, let's just delete this fileand put our html in here.We need to tell Nunjucks where we want our content to go.In this case, we want it between the body tags.To do this, we have this special syntax where we say,this is a block and it's called content.

We use this when we come to fill our index html.Speaking of which, let's do that now.Open index html and delete everything again.Now, when we start this file, we want to saythat it extends layout html.Then we want to design a content block.Whatever we put in between these two tags,will be shown inside the content block in our layout.

We'll just say, Express, welcome to Express.If we restart our application and we visit the page,it looks just like it did before, the same html.We've got a new title in here, and it says,Welcome to Express.Last but not least, let's take a look at the error template.Again, let's just delete the Jade template,and replace it with our Nunjucks one.

We extend layout html,we name our block content,and this bit looks a little bit different.These are variables in Nunjucks.Anything in double curly braceswill be expanded to the variables that's passed in.If we take a look at app.js, anytime there's an error,we pass in a message and the error object itself.Then, we just show them error and the status,and the stack from the error object.

Let's see that in action.So our application works like normal,but if we try to visit a page that doesn't exist,we see an error page, as expected.Conclusion, Express is extensible.It supports anything that adheresto the conventions that it defines.Today, we learned about one of those, Nunjucks,a powerful templating engine based on Jinja2.Don't be afraid to explore and see what else is out therethat you might enjoy working with, more than the defaults.

Next time we are going to be taking a lookat how we can consume the Instagram APIand integrate it into our application.See you then.

Author

Released

10/6/2016

Note: Mastering Express Web Application Development was created by Packt Publishing. It was originally released on 6/30/2015. We are pleased to host this training in our library.

Express.js is a fantastic JavaScript framework, but most people only scratch the surface. Express is perfect for developing APIs with performance in mind and, as a thin layer, it allows you to add any additional technology you want. Mastering Express Web Application Development introduces the tools and libraries you need to take your Express development career to the next level.

To start, author Michael Heap creates a new Express application, showing how to configure it and increase application visibility with logs. Explore Express along with various libraries that will help improve your development experience. Then take a look at technologies such as SSL and nginx, and work through deploying your application to production in a secure and scalable way. Michael also introduces some existing open-source Express projects and reviews how they are structured, to help you organize your own applications in a systematic way. By the end of the course, you'll be familiar with a wide range of new Express tools and libraries, all of which will help you deliver the best value to your customers.