We will then deploy our application to AWS using elastic beanstalk environment.

We will develop a landing page where we collect and manage sales leads.

You can freely use the resulting source code as a starting point to develop your product.

And we will cover all off the concepts that you need to know to build a fully fledged Web application using Know Js we assume intermediates programming knowledge, but no background in bail application development or no genius.

Okay, let's get started.

So a little bit of background on No Jace many years back, developer Ryan Dole explored the idea of using general script for service side programming with the main motivation that existing http servers could not handle lots off simultaneous connections efficiently.

Meanwhile, also, Google's Chrome browser team developed a new jealous script changing from scratch called V eight and the unique property of V eight is that it was built to be much, much faster in interpreting and running JavaScript compared to the other browsers.

And no J s took Googles optimized V eight jealous script engine for server side programming, also creating a setup that allowed for much more scalable handling off requests and also a package manager or managing the open source.

Jealous crude libraries was introduced called MPM, and no Js was war.

Now, before we install Node.js, we're going to start by installing a script called In the Em.

So go ahead a type N V M in your browser and click on this link.

Envy Emma's short for no version manager.

It's a script to manage multiple active know Js versions on a single computer.

So let's go ahead and scroll down to copy and paste the install scripts for N V M.

Well paced it off terminal now.

I already had envy em installed, so this step may take a little longer.

In your case on what you need to do is close and reopen your terminal so that the Envy em script can initialize while your terminal starts.

You can check that your installation was successful by typing Envy em dash version.

We're now ready to install know Js So let's go back to jail or we're interested in the long term support version off no jizz.

And as off this video it is 10.15 point zero is the version that we need, So we go back to our terminal type N V M install 10 15 that zero of this step may take you a little bit longer.

You should have now no GS installed and being actively used just for the sake off showing you how it works.

You can also install other jails versions.

Let's go for 8 11 3 for example, and you can switch between know Js versions by typing envy em used so that switch back to using know Jay's $10.15 0 now for our application we're going to use, Express suggests.

So let's go ahead and visit.

Express Js up come express chases, a Web framework and the power off it is.

In its simplicity, you can develop very complex Web applications, yet it is a minimalist Web framework that is very easy to grasp, and this is the install commands for express, yes, but we're going to use another tool called the Express generator that will give us a good starting points and a directory structure.

So let's go ahead and copy and paste this command directory to install express generator.

Now here in this comment, NPM, as I mentioned, is the package manager.

We will use this to install packages and hear the dash G stands for a global install, which means the installation is going to happen the computer wide and not just one particle project.

So I'm going to press enter now.

But now we can go ahead and run express generator to generate our application and useful directory structure.

So I'm gonna copy Paste this command here, Dash Dash Few equals Puck means we're going to use pug as our HTML tempting engine.

So I'm just going to press enter and we have now created a directory structure for our application.

Now that we have January to the skeleton directory structure for our application, I want to go over each folder V creates.

Well, let's go ahead and start our text editor and let's take a look under my app.

The public folder contains our assets as it's our static files that your HTML files makes references to each HTML Files will refer to certain images such as logos and some jealous script files that need to be run on the Web page or style sheets that describe the style on a Web page.

The Ralphs folder contains the router.

Logic will get to routers in a little bit, and it's one of the key parts of our application.

And finally, views contain the representation off each individual html page in our application.

Notice that these are named park files on each of them.

Get converted to separate html page the BIN that the doubling file contains the initialization script for our Web server, and one off the notable files is Act Up J.

S.

This is the main entry point for our entire live application, and also we have the package that Jason File, which is a recipe that contains the list off open source packages we need to install to run our application.

Now let's go ahead and install these packages and run our application.

As it is, we go back to our terminal CD, my APP, and we type in p m stole.

We're pulling and installing all those packages.

This file contains not just the packages that we need, but also NPM allows us to fetch all the dependencies that these packages have and Now we know to run our application.

We need to fight this command.

And once I press enter, the Web server is running on Port 3000.

When I visit local host 3000 on my browser, I get to see this Web page served.

If you go back to our source code at the Js is the most important file that we care about after Js defines our application know Js express Js Applications are monolithic, meaning that every piece it's put together into a single application and let's see how that works.

We first important modules using the require statements and typically these modules are those ones that we find under the packages of Jason File these models here you will see that they have been imported and assigned to variable instances.

The one we're interested in is this express variable as you see the require statements includes the express package, assigns it to a variable and then later on, we call the constructor for express and a sign the results to a variable called up and up is an instance off on express application.

Typically, this is a vanilla instance, and then we make certain method coals to modify and configure our application and also use and include other modules.

Here we first set that the views are included in the directory called Views.

This is what this line does and we have as you can see, a fuse directory here and next.

We said that we are going to use pug as our view engine, So the APP instance that is unmodified and new gets modified by these set call.

And then we have certain use method calls where we defined further configuration for the components that were going to use it.

One off the notable ones is the index router object that we have defined in this project.

If you go up here, we used the require statements to include an index Js under the Routes directory, whatever that has been exported from this index.

Serious files assigned to index dropped variable, and this instance is then used for the path that is slash.

So this line means that our application is going to use index router for the slash route.

And that's how we also connect pieces off our application into one.

On a little instance, because in the extractor was defined here under index serious and it has been included from Apogee.

Yes, let's take a look at how the routes object is define.

If we go on the routes and index the Js again, we are requiring the express package.

We have a variable called Express and then we call router to create an instance off an express router.

And just as redid here, the router instance here is a vanilla instance.

It hasn't been modified, and then we make some certain method calls to define it further.

In this particular case, we're defining get method and how to handle this slash path with a function.

And then we export the router instance that we have created to be included by another module and act up Js includes that rotter here and that's how we connected and the router objects to recap is a vanilla instance that we make some modifications on it and then well, we exported and this pattern is used throughout the application.

This is how you divide your application into separate instances.

Now let's take a look at what they route Handler is and how it works.

Here we have a router variable that is an instance often expressed router, and this rotter variable has several components that we care about.

The 1st 1 is that we're making a call to get on.

This defines that the routes handler is associated with the get http method and then the second cup over.

Interested in is the path.

So typically, a router will match a particular path using a u.

R l.

And then finally, there's a handler that gets cold if a path is matched to look at it more closely.

If this is our girl, the first section defines the protocol being used, and the 2nd 1 is the domain.

And then finally, after the slash Here we have a path components.

So a router object will look at this path and see if it is a match for the path that it has in its own definition.

Finally, the router will call the handler that's associated with it.

The last bit of detail here is that the get method here is defining the http method that this route handler is limited to it only response to this get method.

If there are no routes that match for a given path or http method our application generates a 44 error, which means not found so as a recap under routes index that Js were creating an express instance.

And then we're calling Express that router to create a router instance and on this rotter were defining that for the http gets method If we are looking for the path slash and it gets matched, we call this function as our handler for this route and under app dot Js we have index Trotter representing our exports from routes slash index file.

And then we have this statement here at that use and for the slash path we're using index tractor effectively meaning that when we type this route a path with no slash or slash it, it means the same thing.

Essentially on when we press enter, we call the route handler that's defined here, which renders our index page.

And that's how essentially our route handler works before we dive into source code and define roots and handlers.

Let's cover about an http request is and how a request sequence works.

The http short for hypertext transfer political defines multiple methods for browsers to communicate with Web servers and the http methods allow the browser to take different actions.

The get methods simply fetches a resource from the Web server, such as a Web page.

When we make an http get requests, the server typically responds with a resource such as adjacent object or an HTML filing.

In our current scenario, we are interested in sending back on HTML Web page, and we use the express genius specific method called Resident Render.

A resolute render will generate an HTML page, and our Web server will respond back to the browser request with a Web page.

And the other method we're interested in is called http Post.

This is typically used for submitting data to a Web server.

When you fill out a form on a Web page and you press the submit button, the data is sent to the Web server and typically on http Post method is used.

There are multiple http methods, and what method is to be used is defined in the form definition on that particular HTML page.

But most of the time, and almost always, a post request is used.

And once the server received the Post request, it does something with the scent data, such as updating database and then the server typically calls the rez that redirect method again.

This is specific to express Js to redirect the browser to another girl or path.

So the server response with a redirect after processing data back to the browser.

And finally the browser will do another http get request as 1/3 step fetching the route that it has been redirected to.

Now there are a few more http methods, but this gives you the foundation for developing a rich Web application.

Now you know enough to develop routes, route handlers and develop your application.

One of the issues with our route handler is that the logic that matches a your L pattern is here, but also the handler function.

The handler logic itself is defined as part of the room Chandler, and what we want to do is separate these two so that we have a modular approach.

So we go to our terminal and I'm going to create a directory called Controllers.

Controllers essentially are a collection off route.

Chandler's.

I'm going to copy dysfunction from here and place it under controllers in a new file saved here and give it a name called Index and Save it with the name in the extra Js.

And if I go back to the couch defined Index as an instance off what we have exported from our controller's index Js file, I can now refer to the handler that I've defined from this route file.

So if I go back to controllers as a recap, we have an index of Js, and we have a method called Index that were exporting as our handler and under our routes, let let's save this file again on under our routes.

We are importing it as very well instance called Index, and we're assigning the index handler for this route.

Let's now save our application restarted and see if it will work restarting the application and typing this your L and it's working.

So controllers allow us to separate handler logic.

As you've seen this example from the roots handler logic, we're going to build many more of these controllers now.

Let's take a closer look at what our controller function does, So if you go under controller's index of Js, we named our function as Index, and the only call it has is to a coal called rez that render the resurrected ER called Renders an HTML page from a template.

The first arguments is the name off the template files, which is index.

If you see on their views directly, we have a file called Index of Pug, and the second argument is a JavaScript object with key value pair.

The key is title, and the value is expressed now under abduct Js.

We did define our view engine as pug, and we did define that the views are located under the Views directory, so express Jay's knows where to search as the starting point for view files.

So when we pass Index as the first argument, it will go and look at the Views directory and find that there's an index that bug file here.

And then pug will convert this template into a real HTML.

If we look at this second perimeter again Title Colon Express.

We also pass this as a perimeter to pug, so if you look at index that park, it will use variable and replace it with its value.

There are two cases where the value is being used here.

We'll get to this when we look at a park in more detail, but essentially, our controller function simply renders an HTML pages responds with a HTML page back to the requesting browser.

Now is a good time to use version control and checking all the files that we have created by assuming that you've installed gets and I'm going to initialize a git repositories here by typing gets in it d be.

Now we initialize the repertory and you can check that we have created They got Skid file in the current directory that stores all the files by R V.

Chip A story.

Now I worked a chicken old files.