Hey, guys. In this lesson, we're going to be building our very own express server using Express and
Node.js.
If you need a little bit of reminding what the backend is, again, remember that we said the server
is just simply any computer, and in most cases a server is a big and powerful computer that's on 24/7
and it's always listening for any requests, looking for a particular resource, like an HTML
file of a website, or the CSS or the JavaScript, etcetera.
Now, in addition to the server, the back end also consists of an application that is written using
some sort of code, and that application is running on the server computer.
This could just be an index.js file that is on this server computer.
In addition, usually the backend also has a database, but this is usually in the case where you have
a more complex backend, a more complex website where you have maybe user data or company data, etcetera.
But a very simple backend can just consist of an application running on a server computer.
All of these things together are what we would usually think of when we think of a website backend.
Now when a client, which in most cases will just be a particular user trying to access your website,
they'll go via the internet to reach your server computer and they're going to make the request for
the website they're interested in looking at.
Let's say they type in google.com,
then this request goes through the internet to Google's servers somewhere in the world
and on this server computer, there is an application that's running listening for this particular request.
And once it finds it, it's going to send back that home page,
maybe in this case it could be an index.html, or it could have the CSS, or the JavaScript,
but all of this goes back over to the client and that is what our server is trying to do.
Now, in most cases, you'll hear people refer to the Client-Side as the front-end facing side.
So this is the side which your user is going to access and interact with your website.
But in addition, you'll also hear this term called the Server-Side.
And the server-side refers to everything that's on our back-end.
And sometimes you'll hear people referring to all of this instead of the backend, as the server.
This is what we're going to try and build today.
We're going to try and build our server using Express.js.
Now what that means is that we're going to be creating an application in JavaScript using Express and
Node.
Now Express is the one that's going to use Node so we don't have to explicitly interact with the cumbersome
code that is inside Node, and we're going to use our local computer as the server.
So as I mentioned, servers are usually 24/7, but in this case, our computer is just on for
the time being when we want to test and when we want to make the request to the server side to retrieve
any website data. So it doesn't actually have to be 24/7, but it just has to be there listening
for any requests when it comes through.
There are six steps to creating an Express Server.
First, we have to create a directory, so a folder where we're going to have all our project files.
In that folder, we're going to create a JavaScript file, the index.js, and then we're going to initialize
NPM to be able to install the Express package into this directory that we created in step one
and then we'll be able to use the Express package to write an application using JavaScript inside our
index.js.
Finally, we can start our server and see what happens when we try to send a request to our server.
Let's go through these steps together step by step and create our first Express Server.
Step one is to create a new directory for our project.
I want you to open up VS Code and if you got your Web Development Project folder up, then that's great,
if not, go ahead and open it up by going to File, Open folder, and then find your Web Development Project
folder to open up.
Now, once you're there, you can create your new directory.
Now, in my case, I've got a Backend folder for everything that we've created so far in the Backend
Section.
So using Node, native modules in Node, NPM, etcetera.
And I want to create my Express Server project inside this folder.
So what I'm going to do is I'm going to go to the terminal,
remember, you can go to that by going to View, Terminal,
and then in the terminal, we're going to use the cd command in order to change directory.
Now, if you skipped, "The Command Line module," in this course and you don't know what I'm talking about
at all when I say cd or mkdir, then it's really important that you go back and actually take those
lessons, because in the coming lessons we're going to be leaning heavily on the terminal and we're
going to be using all these commands, and I'm not going to explain through them each time because I'll
assume that you have taken those lessons.
So we're going to cd into the Backend folder.
So we're going to drag this Backend folder over here, hit Enter,
and now our location is set as the Backend.
So inside this folder is where we're going to create our new project directory.
So we're going to use the mkdir command and we're going to write, "3.1 Express Server".
Now with the command line, it really doesn't like having gaps in between words because it sees each
of them as a separate command,
so in order to fix this, we're going to go and add some double quotes around the name of our new directory.
And now when I hit Enter, you'll see that brand new directory gets created right here.
Now, we have to cd into that particular directory.
So I'm going to write 3 and hit the Tab key and hopefully, it will enter everything else for me.
And just to check, make sure that on your final line you actually see the name of your directory to
know that you're inside the right location.
And here is where we're going to continue in our steps.
We've created our directory.
Now we need to create our index.js file.
We create new files using the touch keyword and we're going to write, "touch index.js", making sure that
we're creating that file in the right location and then hit Enter.
And now if we expand this folder, you should see our brand new Index.js file.
Step one, step two complete.
Now we need to initialize NPM and install the Express package.
Now remember that whenever we tackle a new technology, you can always find information about it by
searching for its documentation.
And the Express documentation is at expressjs.com,
and here under the Getting started, Installing Section, you'll see that they've already completed some
of the steps that we want to do, which is to create the directory and figure out the location where
you want to create your Express files,
and then we're going to continue by initializing NPM and installing Express.
We're going to use "npm init" and then we're going to use the "-y" flag so that we don't actually have
to go step by step and add each of these things like the name and the version, etcetera.
The thing that's quite important though, is that the main is set as index.js,
so if you name this file, something else like app.js or yourName.js or whatever, that's not going
to work because the NPM is set to look for a file called index.js.
So make sure you have that file created in your directory and that your package.json and your index.js
are all inside the correct folder, which is your Express Server project that you just created.
So now we're going to install the Express package.
So that's "npm
i" short for install and then it's "express" with two s's.
Make sure you don't make any typos and then hit Enter.
Now, once that's done, it should have installed some packages and created this node_modules folder.
Inside the node_modules, there are a whole bunch of dependencies which is required for us to be able
to use express and if we check inside our package.json, not the package-lock but the package.json,
you can see the express as a dependency.
Now don't worry if your number doesn't match mine, you're in the future and I'm recording in the past.
So this version might be 4.19, 5.1, etcetera.
It doesn't matter.
It's all going to work the same.
The other thing we have to do is we're going to upgrade our project to change the type of project to
use the ES6 latest syntax.
So we're going to add this line ("type": "module") as usual.
Now let's hit Save and let's go back to our index.js where we're going to write our server application.
Now the code looks something like this, and it's pretty simple.
It's just a few lines to create our first server and I want to talk you through each of them.
So this first line is very simple.
We're using module based JavaScript, the latest version JavaScript, so we can import express from
that express module that we installed just now.
And then the next line we're going to create an app using this express object.
And then once we've created the app, there's a method on that app called "listen", and we get to specify
two things.
The first part is the port, and the port is the location of our server where we're going to be listening
for requests from the client-side.
Now the second part here, is the callback.
This is the callback function that is going to be triggered when our server is set up.
So as soon as our app is listening on port 3000 and everything is done, then it's going to trigger
this callback function.
And in the callback function, all we want to do is to console.log()
our server is running, and tell ourselves or remind ourselves where it is running.
So port 3000.
Let's write our code in our index.js right now.
So let's import express with a lowercase e from the express module that we just created,
and then we're going to create a new const called app that is going to be created from express.
Now, once we've got hold of our app, we can use the listen method and specify firstly the port and
then secondly, the callback for what should happen when our server is ready to go.
We're going to put in an anonymous function in here as our callback and all we want to do is just
console.log("Server running on port 3000.");
Now, we can specify the port like this where we say the port should be 3000 and we hard code it into app.listen(),
but another format, which is the one that I prefer, is to actually create a const at the very top
level and specify that port as 3000 and then use this const in all the places where we need it.
So let me just change this to a backtick so that I can insert that port variable inside here.
There we go.
So the code is pretty simple and all we're doing right now is we're setting up a server using Express,
and that server is going to listen on our port, which is 3000.
And once the server is set up, we'll notify ourselves in the console that it is running.
Now, all we have left to do is to actually go ahead and start our server.
We've completed all five steps and in order to start our server, we're going to use the node command
in order to run our index.js.
You've seen us do this many, many times and we are in fact creating a node server even though we don't
see Node anywhere in our index.js,
that's because Express is dealing with all the heavy-lifting and simplifying things for us so that our
code is clean and easy to read.
In our terminal, let's go ahead and type the node command and then the name of our file.
As usual, I always use Tab just to check that I'm in the right location, and then once we hit Enter,
you'll see that our server is now running on port 3000.
Now that line of course comes from our own code.
So it means that this whole process was successful, but how do we actually reach our server? So we know
our server is running, and we know it's on port 3000, but how do we get to it?
Well, let's go ahead and open up our browser and we're going to go to the URL localhost colon (:) 3000
and then we're going to hit Enter.
And this is the location of our server.
And once we've reached this, you can see we've actually got some sort of response being sent back from
our server.
But first, let's try and understand what exactly is localhost.
Localhost is simply when we don't have a server on the internet and instead, we want to host our server
locally,
so making our own computer, the server of our website's backend. And that is the local part of our
hosting.
So when we type into the URL, the longer version, which is https://localhost,
then we're tapping into our own computer and then we add the colon symbol and afterwards
we can specify the port where we want to try and reach into our computer.
The port is kind of equivalent to a bunch of doors on our server computer, and each of these doors
have an address.
So you might imagine, you know, you have a door, one door to door three.
Well, there's loads and loads of doors and in fact thousands or hundreds of thousands of doors that
you could potentially create to access your computer.
And in our case, when we set up our server, we specified that the door or the port we want to be listening
on is port 3000.
Once we've set up our server to be listening on that particular door, then when we try and access localhost:
3000, then it's going to look onto our own computer and it's going to try and find the door that is
Number 3000,
and then through that door, it can reach inside to our computer and it can find the application that's
listening and ready to respond to any requests, such as sending over some HTML, CSS or JavaScript
files in order to serve up our website.
Now, the reason why there are many doors on our computer is because it has to be able to listen for
different incoming requests.
So, for example, your printer might have a particular door that it gets to use,
and in this case, I'm using Keynote to present this slide deck,
and with Keynote you have a remote function.
So I could use my phone as a remote in order to navigate through the slides,
and that remote is also accessing my computer through a specific port.
And because each port is identified by a unique number, then different services or different applications
or different hardware can tap into a particular port
and this way we can have multiple services running through the same computer without them interfering
with each other so that each one can be listening on a particular port.
Now, we can actually check which ports on our computer are currently
listening for interactions from the outside.
And we can do that by typing these commands into the terminal.
So if you're on Windows, it's using the netstat command and all of these additional options,
and if you're on Mac, then it's using the Lsof function and we need to use sudo in order to give it
admin access.
You can actually type these commands in your terminal to see which ports are open.
As a note here, this line (|) which you might not be familiar with, is called the pipe symbol and you
can find that on your computer.
It's not an i, it's not a capital I, it's not an l, it's actually a very separate symbol.
If you can't find the pipe symbol on your computer, you can also search for it in Chrome and you can
paste this into your command line as well.
But everyone has it on their keyboard,
it's just a matter of mashing through all the different keys in order to find it. On my computer.
It's actually the very top left key just below the Escape key.
If we go back to VS Code, you'll notice that my terminal that I set up previously does not have the
usual prompt which has my name and my computer, and then the location of where I am, and then either the
percentage sign or the dollar sign as the prompt where I can enter any commands,
and this is because our server is currently running and is occupying this terminal.
If we wanted to stop our server from running, we can use the control key on our keyboard and then C (Ctrl +C)
in order to exit that process, that's running.
But if you didn't want to exit, then you can also just simply create a new terminal by pressing the
add (+) button.
In this new terminal is where I'm going to type this command.
So in my case on Mac, it's
sudo lsof -i -P -n | grep LISTEN
and because I'm using superuser access I need to type
my password to my Mac, which is the one that you use to log in. On Windows,
the command is,
netstat -ano | findstr "LISTENING"
Now, once you've done that, you should be able to see all the ports that are actually currently actively
listening for outside interaction.
As I mentioned, Keynote has its own port on 54476,
that's the door it's going to use to access my computer to try and change these slides.
A nd then for port 3000, you can see it's Node that's currently running in the other terminal that's
hosting my server and it's listening for any requests coming to that particular port.
Coming back to our actual website though localhost 3000.
You can see we're getting an error here and it's saying we cannot get the forward-slash (Cannot GET /).
So what does this mean?
It means it can't get our index page, our home page.
And in the next lesson, we're going to be talking about what this means.
Why is it that we can't GET and what does getting even mean?
How to make requests, and how to make sure that our server does not respond with a 404.
So for all of that and more, stay tuned.
I'll see you in the next lesson.