1. Introduction

1.1 Introduction

For many years, express was the HTTP server framework for node applications. And rightfully so, it was really the first successful server framework in the node ecosystem. And it enjoyed regular updates for several years but Express begin to stagnate. And as the story commonly goes, other frameworks started to gain popularity. One of those frameworks is happyJS. Hi, I am Jeremy McPeak, and I invite you to spin some time with me and take a look at happyJS and why it has become the most Popular alternative to express. Naturally, we'll start at the very beginning. We'll set up a project and just dive right in. We'll create a very simple Hapi powered application. And then you'll learn how to use the inert plugin. To serve static assets like images, CSS, and JavaScript, but of course using Hapi to just serve static assets is a little overkill. So you'll learn how to take advantage of the different features provided by the vision plugin to generate dynamic content, so Things like layout pages, partials, and view helpers. After that, we'll focus on handling user input. You'll learn how to grab data from the request URL and its query string and then we will handle information from form fields and post requests. Now we have a lot of ground to cover, so when you're ready queue up the next video and we will get started.

1.2 Installation and Hello Hapi

Before we just dive right into Hapi, let's briefly go over the things that you will need to follow along in this course. And the list is rather short because Hapi is a Node framework so it goes without saying that the very first thing you need is Node.js. Now, if you don't have Node installed, just go to nodejs.org, click on the LTS Button and install it. And you could go with the current version. I mean, there's nothing that says that you can't use it. However, LTS stands for long term support, so most production environments are going to be running the LTS. So just Stick with that. And once you have installed node which is a very simple installation just take the default, then you need a code editor. And the chances are very good that you have one. However, since we are going to be dealing with Primarily JavaScript. The best JavaScript development environment is Visual Studio Code. There is no debate here, it is the best. So feel free to use whatever you want. But I'm using Visual Studio Code. And with that out of the way we can get started working with Hapi. So, the first thing we are going to do is create a project folder. So we can call this whatever we want. I am going to call it 'I'm so Hapi'. And then we want to, Initialize out project. Now I'm going to se -y so that it's going to just give the default information because I hate filling out that little question there. But one thing I am going to change is the startup. File, which is the main file. Instead of index.js, I'm going to call it app.js. That's just what I like to do because it makes sense to me. This is an app. All right, so, we need a few things. The first Is happy itself so we are going to install with NPM Hapi h a p i and we're going to save it and then we are also going to install Nodemon or no demon or Nodemon there are many ways that you can pronounce it because the author Of nodemon so that you can call it whatever your want. And it is simple nodemon. Now this is a file watcher so that we don't have to constantly stop and restart our application whenever we make a change. This is going to do it automatically for us. So I call it nodemon because it is a monitor for our node projects files. So nodemon. I am going to install this globally because this is a tool that I would use really for any node application that doesn't necessarily have to be something based upon happy or express although if you start working with web pack and things like that, then it kind of makes sense to use Webpacks, watching capabilities. But other than that, we are done as far as our dependencies are concerned. So let's go to our code editor, and let's create a new file called app.js. This is of course going to be the entry point for our application, so The first thing we want to do is pull in Hapi. Now, if you look at the documentation, any time that they pull in Hapi, they use a capital H. And you can say whatever you want about that. I personally would probably prefer a lowercase h because whenever I see an uppercase H, I think of a class. And there's nothing that says this isn't a class. However, usually with the class you can new Hapi the constructor which in our case, anytime that we create a server which we're going to do right now, we'll We use Hapi.server so we're calling really a static method on this object here. So whenever you create a server, you need to supply two things, the host Which in our case is going to be localhost, and then the port. And the port can be whatever you want, of course the default is 80. But typically with development environments, we tend to not use port 80. But it's usually something that begins with 8. It could be 8080, or 8888, or 8000. I'm going to go with the 8000. And then we went to start our server and we just to that with the start method. Now, it would be useful to have a message display in the console that says that our server has started, so we'll say server started at, and then we would include, The host in the port, and we can get that very easily with our server object. We have server.info.uri, and that's going to put out the entire uri. So now, if we go to the command line and we run nodemon, Then we are going to see that our application started at localhost:8000. So let's go to the browser, let's go to localhost:8000, and we get a response. But it's kind of expected because we haven't told our application to do anything. And we can see that the status code is 404 and it's not found. That's because while we do have a running application, it is serving requests but it's not really. Doing anything with those request because we haven't told our application to do anything. So what we want to do then is set up a route. So we can do that very easily with our server Object, we have a method called route, and then we supply several options for this route, so the first is going to be the HTTP method and that is going to be for a get request because we want to handle a get request, that is the default type of request, and then you need to specify The path. Now, this is relative to the root of our application. So if we say just slash. That's going to be the root. That's kind of the index of our application. So that means that this route is going to handle requests made for the root of our application And then we need to tell it what to do whenever it receives that request. And that is nothing more than a function. Now this function is going to accept two things. We have a request object and then we have a response object. Now, the request response is indicative of express, that's typically what you would see. As far as the convention is concerned. If you look at the documentation for Hapi, it is request, all written out, and then h for the response. So that's what we are going to go with because that appears to be the convention. And then we just need to do something. As far as returning some kind of data. So in our case we can just simply return a string that says Hello, Hapi and that would be sufficient. So let's just do that. And if we look at the console we're going to see that our application has started several times because our JS changed several times. And so, if we refresh the page We see our response. And this is returning whatever we specify. So if we wanted to include some html here, we could do that as well. Because all html is, is text that's going to be rendered in the browser. And there you go. So if we even wanted to include some JavaScripts, we could do that. So could add an alert that says hi, we're getting a little bit into the weeds here with adding too stuff here in our string literal. But I just want to point out that no matter what we put in here that's going to be sent in the response. And since everything that we did can be parsed by the browser, it is being parsed by the browser. And so we have a working application using the Hapi framework. Now, in the next lesson we are going to add the ability to handle static files. Because even though we are using Hapi, which really indicates that we want something not static, there are still static assets that we need to serve like CSS, images and JavaScript.