Use Template Engines with Express
Template engines allow you to define your UIs in a declarative manner while maintaining a dynamic, data driven presentation layer. This lesson will demonstrate how to use template engines that have built-in support for Express as well as engines without explicit Express support.
[00:00] So now we have a basic list of links here rendering, but the code that we're using for it is pretty rudimentary and not really something that you'd want to use in a real application. The better way to do this is to use Express' support for template engines. We can do that by setting a couple of properties on our app instance. We're going to say set views to be the views directory, and set viewengine to be Jade.
[00:28] What that says is when you render a view, look in the views directory and by default you're going to use the Jade extension. Now that that's set up, we can actually get rid of all of this code, and just say response.render index, and then we're going to give a context object. For now we're just going to give it one property called users, and map that to our users array that we created above.
[00:51] This is saying look in the views directory for views with the file name Jade, so when we say render index, that's going to map to index.jade. Here's our Jade template, it's just got a basic HTML file structure with a header, and then we're going to create an unordered list and then loop over our users that we pass in and create a list item for each one of those. If we go refresh our page, we can see that we're now using our Jade view template.
[01:22] That's a lot more succinct and maintainable code than trying to build up these HTML strings. Now Jade has built-in support for Express, but sometimes you may want to use a template engine that doesn't like Handlebars.
[01:40] We have a Handlebars template here, which has the same structure as our Jade template, we're just going to create that list of users. If we go back here and set viewengine to hbs, when we say render index it should try and render index.hbs but when we refresh the page we get an error message saying that it can't find a module named hbs.
[02:06] That's because we need to install Handlebars itself, and we're also going to install a library called Consolidate, which basically provides some shims for various template libraries that don't support Express out of the box, and let you use them directly. We're going to go up here and require the Consolidate library that we just installed, and we're going to set that a variable named engines, and then we're going to come down here and say app.engine hbs engines.handlebars.
[02:38] That's basically saying whenever you're asked to render something with an hbs extension, I want you to use this engines.handlebars object. Since we're setting viewending to hbs, that's going to be used as the default file extension, that will be used just by calling response.render index like we are. So if we go back here and refresh our page, you can see that we're now using our Handlebars template.
[03:08] If we just add the file extension on here, you can see that we still can use that Jade template, it's just if we're using the default without an extension there, it'll use the Handlebars.