In this video you're going to create and run your very first node j s based server.
This is going to offer users an entirely new way to interact with your applications instead of needing
to run commands from the terminal to interact with your app.
They'll be able to visit a U R L and by the end of this video you're gonna have a you are well you can
visit in the browser to interact with your node j s application with the node server we can serve up
whatever our application needs.
So imagine I'm trying to create a portfolio Web site to show off my work.
I can create a node server that serves up all of the assets the browser would need to load.
This would include H TMF documents CSA s files to style the page client side JavaScript and maybe some
images of my work.
Now we could also take the other approach with the server and instead of serving up a Web site we could
serve up an HDTV Jason based API.
That would be similar to the map box or the dark sky API where we're exchanging Jason data back and
forth with the server.
Now we are going to explore both approaches throughout the class.
We're going to start off by creating simple web servers.
Then once we're comfortable with that we're going to move on to create TTP based API as with database
storage authentication email sending and more.
As mentioned in the section introduction the tool we're going to use to create our node servers is the
very popular express library.
You can find Express on the Web over at Express J S dot com Express is one of the original NPM packages
and it's one of my favorite express definitely helped put no JSA on the map back in the day because
it made it so easy to create web servers whether you wanted to serve up something like a static web
site or whether you wanted to create a complex HDTV Jason based API to serve as the back end for something
like a mobile or web application.
Now we're gonna use Express extensively throughout the class but I wanted to take a moment to show you
where you can find it on the Web so you know where you can go to learn more.
They have a great getting started guide that will cover all of this.
In the class they also have a guide for doing more complex and advanced things which will also cover.
And finally they have a great API reference which serves as the low level documentation for every single
method and tool available.
Now in this video in particular the goal is to get a basic server up and running.
I want to be able to pull up a you are well in the browser and see an asset that my server served up
and that is exactly what we're going to do right now to do this.
We're going to create a brand new directory so let's head over to visual studio code.
I'm going to close all open files collapse all open directories and we're gonna make a brand new one
inside of the node course folder.
Right here we can call this something like web server.
Perfect.
And now we're going to install and use Express inside of the terminal.
Let's take a quick moment to navigate into our new directory.
That would be C D web server since I'm currently inside of the node course directory.
And once I'm in the web server folder we need to initialize NPM so we can actually install Express which
is indeed an NPM module.
So right here I'm going to use NPM in it.
Now we could just run this and then fill out the individual fields for package.
Jason as mentioned earlier though we can just use the Y flag which is just going to answer yes using
the default value for each question.
And that's perfectly fine since we were gonna use the defaults anyways.
I run the command and what do I get.
I get a package dot Jason File now that we have this in place we can install the Express library.
That would be NPM I express at the latest version which is four point sixteen point four.
I'm gonna run the installer and once that's done we can focus on actually creating a no J Yes script
that will create configure and start up the server.
Now I'm gonna do this in a brand new directory so in the web server folder I'm going to create a sub
directory called Source or S.R. C for short.
And this is where we're gonna end up putting all of our node J.S. scripts.
So instead of having them in the root of the project like we did with the notes app and with the weather
app we're gonna go ahead and keep things a bit more organized so I can show you how to create a more
complex directory structure that's going to scale a little better as your application starts to grow.
So as things get more complex it's gonna be more important to stay organized.
Now that we have things in place let's go ahead and clear the terminal output down below and create
a single file in the source folder.
This is going to be the starting point to our node Apple ocean and I'm going to call this app dot J.
S in here we're going to load in Express configure it to serve something up and then we're gonna start
the server to get started let's create a new constant so we can load the library in I'm going to create
a constant Express and I'll use require to grab the library exports and what the Express library exposes
is just a single function so express is actually a function as opposed to something like an object and
we call it to create a new express application and that is exactly what we're gonna do.
Just a single time right below right here.
Let's create a new variable to store our Express application.
I'm gonna call this something like app and all we do to generate the application is called Express.
Now the Express function doesn't take in any arguments.
Instead we configure our server by using various methods provided on the application itself.
That means this line is all done and down below we can start to tell our Express application what exactly
it should do.
For this example imagine we owned the following domain.
App dot com.
Now obviously when someone visits app dot com we want to show them something maybe the home page for
our company Web site but we're gonna have other pages as well like app dot com forward slash help or
app dot com forward slash about.
So right here we have one domain app dot com and all of it's going to run on a single express server.
What we have setup though are multiple routes.
We have the route route we have forward slash help we have forward slash about and we could add others.
So how do we set up our server to send a response when someone tries to get something at a specific
route.
We set that up using a method on app it is app dot get this lets us configure what the server should
do when someone tries to get the resource at a specific U.R.L. maybe we should be sending back HDL or
maybe we should be sending back Jason now the get method which we're gonna use a ton throughout the
class takes in two arguments.
The first is the route so the partial you are all that would be nothing for this first example forward
slash help for the second or forward slash about for the third and it also takes in a function.
Now the function is where we describe what we want to do when someone visits this particular route.
So in this case when someone visits the home page this function would describe what to send back to
them.
Now this function gets called with two very important arguments.
The first is an object containing information about the incoming request to the server.
This is commonly called R E Q which is short for request.
You'll see this used throughout the documentation.
The other argument is the response.
So this contains a bunch of methods allowing us to customize what we're going to send back to the requester.
This is commonly called R E S which is short for response.
Now down below we can go ahead and look at their request to figure out what we want to do.
We could do something like read data from the database or create some HDMI all and we could use various
methods on response to actually send a response back.
Let's go ahead and stick with a very basic text response.
Just displaying some text in the browser to get that done.
We're going to use response dot send.
This allows us to send something back to the requester so if someone's making a request from code using
something like the NPM request library they'll get this back.
If they're making the request from the browser this is what's going to display in the browser window
right here.
We're going to pass in a string and we're going to stick with a simple message like hello express.
Perfect.
Now that we have this in place we have something that's going to show up at the root you are.
And now the last thing we need to do is actually start the server up.
Currently the server is not up and running.
If we were to run the application we would never be able to view it in the browser to start the server
up.
We have to use one more method on app which will only ever use a single time in our application that
is app dot.
Listen.
This starts up this server and it has it.
Listen.
On a specific port for the moment we're gonna use a common development port which is port three thousand.
Now port three thousand is obviously not the default port.
When you visit a Web site you don't provide the port because there are default ports for example for
an H TTP based website.
It is port 80.
As we explore production deployment a little bit later in the class we'll learn how to use those ports.
But for now in our local development environment as we're just viewing on our local machine port three
thousand is gonna work really well.
Now the other optional argument we can pass to the listen method is a callback function which just runs
when the server is up and running.
The process of starting up a server isn't a synchronous process though it'll happen almost instantly.
Right here though we could print a little message to the console just letting the person who's running
the application know the server did start correctly.
So right here server is up on port three thousand.
Now this message is never going to display to someone in the browser that is what this message is for.
This is just going to display as a useful piece of information when running the application down below.
Let's go ahead and do just that.
We can start up the server by using Node.
Now since the file isn't in the root of the web server project we'll use source forward slash app dot
J S providing the complete path to it and if we run the script you'll notice that basically instantly
server is up on port three thousand prints.
The other thing you'll notice is that it's been maybe 10 seconds since I originally ran the command
and we haven't been brought back to the command prompt to run something else.
That is because the node process is still up and running with the notes app or the weather app.
There was some discrete task that needed to be completed.
I needed to read a note or I needed to fetch the weather information for a given location.
When that task was done the node process was closed with the web server.
It's never gonna stop unless we stop it because its job is to stay up and running.
Listening and processing new incoming requests so it's staying up and running so if someone does visit
the root of our Web site they can get a response right away.
Now that means that it is going to stay up and running as long as we let it.
We can always shut it down using controlled C that'll shut down the web server and bring us back to
the command prompt and we could always start it again if we need to know that our server is up and running.
Let's go ahead and visited in the browser.
I'm gonna crack open a new tab in the browser and since we're running the server on our local machine
we're not going to be able to access it off of our machine and we're not going to be able to access
it from a real domain.
We'll learn how to do that sort of thing when we explore production deployment.
For now the server is only accessible on our machine and we can access it at local host.
Now it's local host port three thousand.
That is the port we chose to listen on when we called app dot.
Listen.
So right here colon to provide the port and then three thousand if I visit this.
What do I see.
Right here I get my message Hello express printing to the screen.
So when we visited that you are all in the browser it went off to our server the Express server found
the matching route which is this one for the route and it processed the request using our handler the
handler used response dot send to send back a text response and that is exactly what we're seeing inside
of the browser.
Now to set up a second route we just add another call to app dot get so down below.
The first one I'll add a second one and we're still going to pass in that string though this time we're
going to provide the new route.
So instead of nothing for the route of our website we're going to use forward slash help for the help
page.
So right inside of here forward slash help.
Now what do we want to do when someone visits that you are all we're gonna go ahead and set up our function
telling the Express server what it should do.
We're gonna get our two arguments request and response.
And for the moment we are once again going to use response dot send to send something back.
Right here I'll just display a title for the page like Help page.
Perfect.
Now that we have this in place we are going to need to restart our server for the changes to take effect
right now.
The currently running the server has no idea.
You've added something to the file.
We can always fix this by shutting the server down with control C and starting it up again but instead
of doing that over and over again we'll just use node Monde which we installed earlier.
So no demon space source forward slash app dot J S that's going to start up the server and it's going
to restart the server whenever we make a change to abduct Jess and save it.
Now over in the browser I can refresh the route to still see Hello express.
I could also head over to forward slash help to view my help page.
Now if I was to visit any other are which I didn't have setup like forward slash about what are we going
to see.
We're going to see an error message cannot get forward slash about later on we'll learn how to set up
a for a four page four routes that we don't have a support setup for but that's a slightly more complex
topic and it'll come up a bit later.
For now it is challenge time where you're going to add a few new routes to our web server on your own.
Down below I have the challenged comments outlining what I'd like you to do.
Right here you are going to set up two new routes for the server.
So we already have two.
You'll be adding two more for a grand total of four.
One you're going to set up an about route and render a page title.
That means when I visit this U.R.L. I should see something like about page showing up.
And number two you're going to set up a weather route and there you can render a title for that page
as well.
Something like view whether or show weather would get the job done.
The exact text you show isn't important.
What is important is that when you visit your two you are L's in the browser.
You see the text you chose.
So take some time to add those two new routes to our Express server visit both in the browser making
sure they're showing up and when you're done come back and click play
how that go.
Let's kick things off by setting up the about route.
So once again if we want to support a new route we have to set a new one up with app dot get right here
we provide those two arguments forward slash about for the route and then we provide our callback function
telling express what to do when someone visits this route.
Now we get some information about their request which we haven't used so far but we'll use pretty extensively
later on in the class and we get our response which we do indeed need in order to send something back
down below.
We'll be using response dot send to send back a message.
I will just print about now with this in place I should be able to save the file no demand automatically
restarted the server and if I refresh the browser I can see my text showing up which is fantastic.
Next up we can set up the weather page so down below.
That's going to be app dot get forward slash weather would get the job done though maybe you picked
something slightly different.
That's a OK and from here we'll set up our callback function.
We're going to define the request and response arguments and then we're going to send our response down
below using response dot sent.
What are we going to send back.
I'll just send back something like your weather.
Perfect.
Now we have four routes in place and we can test things out over here in the browser.
I'm going to switch from forward slash about to forward slash weather and what do I get.
I get your weather showing up.
So now we have a route.
Page We have a health page and about page and a weather page and our little application is really coming
together down below.
I'm going to go ahead and delete the comments from earlier as well as the challenge comments and I'll
wrap the video up by saving our file now that we have a basic express server in place.
We're gonna be able to continue expanding off of this learning how we can render aid to the AML learning
how we can render Jason or serve up assets from a directory on our machine.
I'm excited to get to all of that and more.
So let's jump right in to the next video.