Express comes with a lot of defaults that people don’t know they can change. Using Nunjucks shows that there are options out there that people can use.
- [Michael] Hey and welcome back to Mastering Express Web Application Development. Now that we've done our groundwork of 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 decoupled which allows us to use any templating package that we want. In this video, we'll be installing Nunjucks, an alternative templating language that can be used with Express and we'll integrate it so 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 app and see what it looks like currently. As you can see, it's just an Express header with the words Welcome to Express. The Jade template has actually been compiled with 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 knows how to configure itself for Express. Here, we pass the app instance into Nunjucks and everything is taken care for us. We also say that we want to automatically escape and html is open in our views. And all of our views are currently located in 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 automatically try and render index jade, when told to render index. Let's change that to html, as that's the suffix our 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 rendered as though it is html, and it doesn't look very good anymore. That means we need to change our templates to 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 tag with 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 concept which I'll introduce you to soon, but for now, let's just delete this file and 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 say that 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 braces will 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 adheres to 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 there that you might enjoy working with, more than the defaults.
Next time we are going to be taking a look at how we can consume the Instagram API and integrate it into our application. See you then.
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.
- Consuming an API
- Showing results on a webpage
- Caching requests in memory
- Refactoring for testing
- Mocking to remove dependencies
- Spying with Sinon.JS
- Sending and receiving data in real time
- Mounting subapplications
- Serving content conditionally for AJAX
- Securing your app
- Improving performance
- Examining large-scale Express apps: Ghost.org and Balloons.IO