In the exercise in the previous lesson,
we built a simple HTTP server that could serve up static content,
this was built completely using Node.js.
Now that we have learned about Express,
the minimalist framework that supports development of server on top of Node.js,
let's now examine how we can use Express to build the same server in this exercise.
To get started, go to the Node.js folder that we have been using for storing
all the code for this course and then,create a new folder there named node-express,
and then move into this folder.
Now, we will create
a public folder here within the node express folder.
Then, we will go to that node HTTP public folder and then copy these two files,
the index.HTML and aboutus.html to the node-express public folder.
We're going to serve up these two files using
the Express server that we're going to build in this exercise.
Now, going to the terminals.
Move into the node-express folder in the terminal and then at the prompt type npm init,
to initialize a node application.
Then, for the package name let's just use node-express,
and for the description we'll say Node Express Examples,
and entry point is index.js,
and all the rest of that same like before,
and let's create the package.json file.
Now, let me open
the project using the editor Visual Studio Code in my case and then,
in the package.json file let's go in and add in the new script called start,
which is node index and save the changes.
Now, that we have initialized the node module,
let's go ahead and install the Express framework within
the project to make use of it to build our express server.
So, at the prompt,
type npm install express.
So this is how you would install
a third-party node module if you are taking this course for
the first time and have not taken the previous courses
then this is something that is important to note.
This is how you will install a node module by adding the minus minus save,
we are also saving the information that
this third-party node module is a dependency
for our project and this information will be saved in the package.json file.
If you have taken the previous courses of the specialization,
then you already know about this information.
So, let's go ahead and install the Express module.
As you can notice,
we are using Express version 4.16.3 in this course.
So, let's now go back to our code.
Taking a look at the package.json file,
you see that within the package.json file by installing Express we already see
another property that is included into the package.json file called dependencies.
This dependencies track all the packages
on which this current project is going to be dependent upon.
Here you see Express being installed
there and the corresponding version of Express being installed here,
so this declares that this particular project is
dependent upon Express version at least 4.16.3.
In addition, you also see this folder called node modules created here.
So this is where all the third-party node modules that are installed by
your application are going to be stored.
Now, when we do a Git commit,
we don't want to commit this node modules folder.
So to ignore that,
lets create a file
named.gitignore and within the.gitignore file,
let's type in node_ modules.
So, this is letting Git know that we do not wish to
commit the node modules folder to the Git repository.
So, with this let's save the changes.
So now when you create a Git repository,
the node modules folder will be ignored.
It is not required because you can always recreate the node modules folder anytime
you clone this project from your Git repository by simply typing npm install.
This will look at the package.json file,
and look at all the dependencies,
and the development dependencies that are in the package.json
file and are automatically installed all those packages for you.
Now, that we have completed this,
let's create our first Express project,
so to do that we'll create a file named index.js and in the index.js
we'll declare a const express require express.
Now, you'll note that express is a third-party node module and it has been
installed in our node modules folder in the correct directory.
So, when we declare this here saying that this Express module is required,
then it will be automatically included from the node modules folder into our application.
Now, also install HTTP
the core module here.
Now, that we have installed this,
let's create the course name as
local host and port number as 3000.
So you see that we are using exactly the same way of doing
this exercise as we did for the HTTP exercise earlier.
Now, at this point,
we will declare this const called app as express.
So this way, we are saying that our application is going to use the Express node module.
So, once we do that,
then Express provides a bunch of methods that we can use to construct our web server.
So after this, we'll say app.use() and inside here,
we will declare a function that will be called to set up our server.
So, this function takes three parameters req,
which is the request; res,
which is the response, and next.
Now, as we saw Express uses additional middleware.
So, the next is used when you need to
invoke additional middleware to take care of work on your behalf.
We will see the use of next in some of the later exercises,
but the function here will take three parameters req, res, and next.
Next is an optional parameter that can
be not included if you are not going to use it within your code.
So, inside here we'll say,
console log and then,
we'll log that headers,
and we'll respond with the status code set to 200.
Set header content type
as text HTML.
So, you notice that much of this code looks very similar
to the way we set up our node application.
So, we'll say res.end and
here HTML body h1.
We'll just say this is an Express server and close off
the tanks there, and that's it.
From your understanding of the node HTTP,
you already understand what these three are doing
and the same thing is also done in the Express server.
Now that we have set up the server using the App,
we will set up the server,
and then this is where we will use the HTTP createServer,
and thus createServer is now going to take app as it's function parameter there,
and thereafter, we'll simply say server.listen port,
hostname and the arrow
function here within which I'm going to print out,
console, log back coat server running at HTTP://hostname:port,
that's it. So you'll see that this part is very much similar
to what you have done for the HTTP exercise,
except that the createServer now takes this app,
which we have declared earlier Express.
So, Express is adding in additional functionality which will be
used by the HTTP server that we create using note.
Once we are done with this,
let's save the changes,
and then we will go ahead and start the server,
and have a look at what the server will serve up.
Going into the terminal, add the terminal,
type NPM start and you will see that your server is up and running.
Now when we access this from either the browser or from postman,
you will see what it serves up.
So, here I have Postman up and money.
Let me send the GET request to localhost 3,000 just like before
and you will see that this is serving up the HTML code that we include in there,
and so this is an Express server.
Clicking on the preview,
this will show you what it will look like in a browser,
and this shows the raw version of the code that has been sent back from the server side,
and you can see that the status code is 200, okay?
And the other header information vector has been sent from the server site.
Notice in particular it says x powered by Express in the header.
With this, we complete the first part of this exercise where we have seen
how we can make use of Express to set up a simple web server.
Let me now stop the server and then initialize the Git repository,
so at the prompt I will type "git init" and
then "git status" and you'll see that files that have been untracked,
so I will say "get and dropped" and these files are now added into the Git repository,
and so when you say git status,
you see the files that have been added.
Note in particular that the node modules folder
has not been added to the Git repository because in
the.gitignore file we explicitly stated that
the node modules folder should not be included in the Git repository.
So now, let's check in our commit exchange by saying git
commit minus m Express example,
and we have committed this to our Git repository.
In the second part of this exercise,
we will look at the use of Express middleware called Morgan.
Morgan is used to log information to the screen,
so it'll log information about incoming requests to the screen so that we
can see some information being printed in our console here.
Also, we will see how we can set up our Express server to serve up static HTML files.
To get started, at the prompt type npm
install Morgan minus, minus save.
Now, Morgan is going to be a dependency that we're going to be using in our Application.
So, that's why it's minus,
minus save and this would get Install,
and you can see that I'm using Morgan version 1.9.0 in this course.
Now that we have installed Morgan,
let's see how we can make use of it within our Application.
So going to our Application,
the way to make use of Morgan is to declare here
const Morgan require Morgan,
and then we'll say,
"App use Morgan with the development".
So, this is the development version.
So, it will print out additional information to the screen as required.
Now, going into our application.
Within our application, I'm not going to log the entire headers.
Instead, let me remove this because Morgan will
log sufficient information for us to look at,
and I'm going to set up my server to serve up the HTML files from the public folder.
So to do this,
I'm going to declare up use and express static.
This tells Express to serve up the static files from double underscore dirname.
So, this says the root of
this project and they will find those files
in double_dirname, plus/ public.
So, recall that we created the public folder in the node Express folder.
So, this is informing Express that you will look at
this particular folder in the root folder of this project and inside the public folder.
So, this will be the folder from which
static HTML files will be served up by my Express server.
After making these changes,
let's save the changes,
and then restart our server,
and then see how it works.
Going to that prompt,
let's type npm start,
to start our server,
and once the server is up and running,
let's examine what it will serve up when we send various requests to this server.
Using Postman, let's first send a get request to local host:3,000
and you'll notice that it is serving up the index.html file.
We have set up our server to serve up static files from the public folder,
and if we just say localhost:3000 by default,
it'll serve up the index.html file.
So, this is how your typical Web server works.
So, that's what we have ended up setting up our express server to do.
Now, let's type in localhost:3000 about.html and send the request,
and says this is about our strategy HTML,
and also the about us HTML file has been saved up here.
So in the preview,
you can see the resulting file that has been served up from our server site.
Let's try to access a non-existent file
and you'll see that when you try to access a non-existent file,
then it will default to the second setup that we have done in our code,
which says this is an Express server.
We have not specified to our Express server how to handle
situations where it encounters a file that doesn't exist.
So, that is why it is using the default that have set up right below the Express static,
which is to serve up the default value, and of course,
this is not the most ideal behavior
but that's what we have in the Express server at this moment.
Later on, we will modify the Express server to handle
errors in more detail, in later exercises.
This is also a good time for you to do a Git commit of the changes.
So, let's check Git status after stopping the server,
and we'll add the modified files,
and then do Git commit
minus m Express,
serve static files.
That's it. With this,
we complete this exercise.
In this exercise, we have seen how we can set up
a simple web server to serve up content on our behalf.