FREELessons: 12Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Using the Vision Plugin

Web applications typically rely on view engines (aka templating engines) to generate HTML dynamically. Vision is a popular plugin for Hapi that uses the Handlebars view engine. So in this lesson, we'll install and configure vision.

Related Links

2.1 Using the Vision Plugin

Happy is an application framework. And so it kind of goes without saying that if we're going to use Happy, we are going to be displaying dynamic content. We're going to be interacting with a data store and filtering data and then sending that to the browser so that the user can see whatever it is that they requested. So, yes, static assets have their place but For the most part, we want to dynamically generate our HTML and we could do that manually, which we have done. But on the grand scale, that's just insane. So instead what we're going to do is use a view Engine or a templating engine. There's many terms that you could use. I'm going to use a view engine, because it's easier to say. And thankfully, we have many view engines that we can use to generate html. In fact, if there is a view engine available for node applications Chances are we can use it. So things that you could use with express like ejs, handlebars and just about all of them you can use hapi as well. But, but hapi is, I'm not going to say that it's better but it provides us some features that Make up for the lack of features that a particular view engine might have. Like first of all, let's install the plug-in that we need in order to work with views and that is called vision. So we will save that. And you can use whatever view engine that you want. But I am going to use handlebars. First of all because I like it, I like the syntax of it. Second of all, it lacks some very important features like layout pages. It also lacks kind of partials, you know partial views and things like that. Now it might sound weird that I want to use handlebars because it lacks those very important features but we're going to find later on That happy and the vision plugin actually makes up for those deficiencies so that we can define a layout page and we can use it. We can define partials, we can define helpers and use them inside of our views and it works across all of the view engines that happy supports. So it's not just a handlebars thing. It's just something that will work regardless of what view engine that we use. So now that we have our view engine and we have the vision login, the first thing we need to do is register the vision plug-in. So let's add the require for vision to our register method and that is registered the next thing we need to do then is to configure happy so that we can use the handlebars View engine for generating HTML, so to do that we use our server object. We now have this method called "views" That is one thing that the vision plug in gives us. We get to tell happy The engines that we want to us. Yes plural, we can use as many view engines as we want, all we have to do is tell Hapi what we want to use a view engine for. So in this case, we're going to say that we want to use handlebars for generating HTML and we could also use other view engines as well. But since we only have one, we're going to stick with this. And then we need to tell Hapi where are views reside. Well that's kind of part of our source code so let's say it's going to be inside of source and views and then we will put our views there. So we're going to start by creating that folder inside of source so let's do that and then we will have. a file called index.html and this would be, well it could be a view that we wanted to use for just generic stuff, it is going to be a simple page that will have a page title and then the little message and of course That's very, very, very simple but that's what we're going to do in this lesson. So, we want a data point for the page title and let's also use the page title within an h1 in the body so we will add that there and then we will have a paragraph that's going to contain Our message so that's the data that we're going to display within the view and all we have to do then is pass that data to our view and we will do that inside of our routs So instead of just outputting this very simple ht mail, we are going to use that index view. To do that, well, we can do this in a couple of different ways. The first way is to use our response object and now have a method called view. And then we will specify the name of the view that we want. Now, we don't have to say index HTML. We can just say index because what Happy is going to do then is look for a File and HTML file because that's what we told it we are using handle bars for, HTML, and it will try to find an index HTML inside of the views folder And of course, it's going to find it because we put it there. And then we need to pass the context, that's the data that we are going to pass to the view so that it can display that, so that is called the context. So we have the pageTitle, this can just Index. And then we have the message And they could be welcomed to our site. So nothing too difficult there, and if we look at the browser, let's refresh the page. And voila, we have the view, We have our page title being displayed both in the H1 and in the title, and then our message. Now, I mentioned that we can do this in a couple of different ways. The first way is to use this handler function, which is very useful if we need to do some kind of processing. So if we need to interact with the database, filter that somehow, then of course we would want to use a function. But if we don't need a function, what we can do then is use an object. We can say handler which in this case is fine since we're not doing any type of processing. So we will have this object. And then we're going to have a property called view. And we need to tell it the template that we want to use. In this case, it's index. But then we also need to supply the context. Which was our page title. And our message. So let's just copy, paste that and there we go. So we will get the same results. Hopefully we do and there we go. So if we need to do some kind of processing we could use a function. If we don't then we could just define the handler as an object Give it a view property, and then give the information about that view. Now, let's say that we have some site data that we want to display on all of our views. So we have our page title. Let's have a site. Title as well and let's set this to our first Hapi App. And then let's display that inside of our views. So that inside of the title element right after our page title we will have a dash and then we will display our site title. And let's make sure that these works and it does. So this is something that's We would have to supply to every view, which would be tedious. I mean, no, that's just not something that we would want to do. But it needs to be dynamic data. It's not something that we would want to hard-code into The view itself. So instead what we can do is specify a global context. So we have the idea of having a local context, a context that's local to an individual route. But then we can Set up a global context so that that context would be merged with the local context and then we would just have everything available to us. So whenever we set up or Figure our view engines. We can also add in the global context by just specifying this context object. And then we have our site title here. And so Hapi is going to take this global context, merge it with the local context, and we will have all of that data with our view. So that we can display it inside of the browser. And there we go. We have the same behavior. Well in the next lesson, we are going to look at layout pages and partial views. Those are two things that the handle bars view engine doesn't have or doesn't do very well. But thanks to the vision plugin, we will be able to use those features.

Back to the top