Sunday , 19 February 2017
Home / Programming / JavaScript / Node.js / Views – Node.js Tutorial for Beginners
Views
Views

Views – Node.js Tutorial for Beginners

In this tutorial we’ll be talking about views. By the end of this tutorial, you’ll be able to separate code logic and design easily. I’ll also be introducing a template engine called Handlebars.

Handlebars

We need to install handlebars before we can use it. What is handlebars? Well, it’s a template engine. Handlebars is beyond the scope of this tutorial series. Luckily, I’ve already covered it in another series I wrote. You can find it here.

Handlebars Tutorial Series

Handlebars is usually done on the client side, but we’ll be rendering the templates on the server. Let’s install handlebars with the following command.

This will install handlebars for us and allow us to compile and process handlebars templates. Let’s update our server variable with the following code.

The third parameter is completely optional. This is where Hapi starts to shine. Hapi is a configuration based framework. We just have to change the default settings by passing in an object and Hapi will take care of the rest. Right now, we only want to change how the views work. The views object has a couple of properties we can set. The engine property will tell Hapi what kind of extension the application should look for when finding templates. We’ll be using HTML, but we want handlebars to process and compile these HTML files.

The path property is where Hapi can find these templates. You’ll notice that we have ./ prefixed to the folder name. This just tells Node that we want it to search for this folder in the root directory of the application. Create a folder named views in the root directory of the application. We’ll be creating our templates here soon.

The isCached property will cache our templates if set to true. This value is set to true by default, but we change it to false since we’re in the development phase of this project. You should set this to true when you’re working on a production server. That’s it! We can now start working with views. Before we do, let’s add the required files for our templates to display properly.

Public Directory

We need to be able to serve images, CSS, and JS files without having to define a route for each file. Hapi has you covered with dynamic routes. We’ll be using bootstrap to style our blog application. Create a folder called public and put the bootstrap files in this folder. You can download bootstrap by clicking here.

We now need to create a route that will handle serving these files to our visitors whenever they’re requested. Let’s add this new route below our home page route.

Let’s take a look at the path property. You’ll notice that there’s curly brackets surrounding the word path. This tells Hapi that this part of the route string will be dynamic. We also insert an asterisk to tell Hapi that this path can have multiple nested folders. So, for example, if a user wanted to access the bootstrap.min.css file, then they would have to type http://localhost:8080/public/css/bootstrap.min.css. Our handler is where the magic happens.

The handler property can either be a function or an object. If it’s an object, then we can quickly define some properties that Hapi will use to create this dynamic route. We want this route to be a directory because that’s what it is. We set the path property to tell where Hapi can find our files. It’ll automatically append the dynamic part of our route to our path.

The listing property will tell Hapi to not list our files and the index property will tell Hapi that there is no index.html file.

We now have a dynamic route for serving static files. We can now focus on our home page. Update your home page route to the following bit of code.

We only updated our handler function. Instead of directly replying a simple message, we reply a view. A view is just a HTML file. We just pass in the name of the HTML file that it should display. We omit the .html file extension because we told Hapi earlier that this will be the default extension. Hapi will automatically append the .html file extension for you.

It’ll also look for the index.html file in the views  folder. Let’s create the index.html file in the views folder now. Insert the following code below.

Index Template Source Code

Index Template Source Code

Right now, our template is very static. We aren’t doing anything special so I won’t go over what’s in this file. Feel free to look it over. Start your server and try going to the homepage. You should see something similar to the image below.

Views
Views

Conclusion

We have now learned how to create templates. Feel free to mess around with this code and make any changes you’d like. Our templates are static. With handlebars installed, we can actually make them dynamic. In the next tutorial we’ll learn a little about databases that will store our blog posts.

About Jasko Koyn

Check Also

Asynchronous

Asynchronous – Node.js Tutorial for Beginners

Before we continue onto our blog web site. I would like to talk about asynchronous …

2 comments

  1. Thanks Jack. Very helpful.

    Do you have a tutorial on serving dynamic views with Hapi/Handlebars by rendering on server? Basically, the next step in making this static template update from data from Mongo?

    Don

  2. Great post! Easy to understand while still being informative.

    I think Dons suggestion is what would be the logical next post of the series too. Also the fruit characters are great lol 😀

Leave a Reply

Your email address will not be published. Required fields are marked *