Hey, guys, in this lesson, we're going to be building our very own express server using Express and 1
Node.js. 2
If you need a little bit of reminding what the backend is, again, remember that we said the server 3
is just simply any computer and in most cases a server is a big and powerful computer that's on 24/7 4
and it's always listening for any requests, looking for a particular resource, like an HTML 5
file of a website, or the CSS or the JavaScript, etcetera. 6
Now, in addition to the server, the back end also consists of an application that is written using 7
some sort of code, and that application is running on the server computer. 8
This could just be an index.js file that is on this server computer. 9
In addition, usually the backend also has a database, but this is usually in the case where you have 10
a more complex backend, a more complex website where you have maybe user data or company data, etcetera. 11
But a very simple backend can just consist of an application running on a server computer. 12
All of these things together are what we would usually think of when we think of a website back end. 13
Now when a client, which in most cases will just be a particular user trying to access your website, 14
they'll go via the internet to reach your server computer and they're going to make the request for 15
the website they're interested in looking at. 16
Let's say they type in google.com, 17
then this request goes through the internet to Google's servers somewhere in the world 18
and on this server computer, there is an application that's running listening for this particular request. 19
And once it finds it, it's going to send back that home page, 20
maybe in this case it could be an index.html, or it could have the CSS, or the JavaScript, 21
but all of this goes back over to the client and that is what our server is trying to do. 22
Now, in most cases, you'll hear people refer to the Client-Side as the front-end facing side. 23
So this is the side which your user is going to access and interact with your website. 24
But in addition, you'll also hear this term called the Server-Side. 25
And the server-side refers to everything that's on our back-end. 26
And sometimes you'll hear people referring to all of this instead of the backend, as the server. 27
This is what we're going to try and build today. 28
We're going to try and build our server using Express.js. 29
Now what that means is that we're going to be creating an application in JavaScript using Express and 30
Node. 31
Now Express is the one that's going to use Node so we don't have to explicitly interact with the cumbersome 32
code that is inside Node, and we're going to use our local computer as the server. 33
So as I mentioned, servers are usually 24/7, but in this case, our computer is just on for 34
the time being when we want to test and when we want to make the request to the server side to retrieve 35
any website data. So it doesn't actually have to be 24/7, but it just has to be there listening 36
for any requests when it comes through. 37
There are six steps to creating an Express Server. 38
First, we have to create a directory, so a folder where we're going to have all our project files. 39
In that folder, we're going to create a JavaScript file, the Index.js, and then we're going to initialize 40
NPM to be able to install the Express package into this directory that we created in step one 41
and then we'll be able to use the Express package to write an application using JavaScript inside our 42
index.js. 43
Finally, we can start our server and see what happens when we try to send a request to our server. 44
Let's go through these steps together step by step and create our first Express Server. 45
Step one is to create a new directory for our project. 46
I want you to open up VS Code and if you got your Web Development Project folder up, then that's great, 47
if not, go ahead and open it up by going to File, Open folder, and then find your Web Development Project 48
folder to open up. 49
Now, once you're there, you can create your new directory. 50
Now, in my case, I've got a Backend folder for everything that we've created so far in the Backend 51
Section. 52
So using Node, native modules in Node, NPM, etcetera. 53
And I want to create my Express Server project inside this folder. 54
So what I'm going to do is I'm going to go to the terminal, 55
remember, you can go to that by going to View, Terminal, 56
and then in the terminal, we're going to use the cd command in order to change directory. 57
Now, if you skipped the command line module in this course and you don't know what I'm talking about 58
at all when I say cd or mkdir, then it's really important that you go back and actually take those 59
lessons, because in the coming lessons we're going to be leaning heavily on the terminal and we're 60
going to be using all these commands, and I'm not going to explain through them each time because I'll 61
assume that you have taken those lessons. 62
So we're going to cd into the Backend folder. 63
So we're going to drag this Backend folder over here, hit Enter, 64
and now our location is set as the Backend. 65
So inside this folder is where we're going to create our new project directory. 66
So we're going to use the mkdir command and we're going to write, "3.1 Express Server". 67
Now with the command line, it really doesn't like having gaps in between words because it sees each 68
of them as a separate command, 69
so in order to fix this, we're going to go and add some double quotes around the name of our new directory. 70
And now when I hit Enter, you'll see that brand new directory gets created right here. 71
Now, we have to cd into that particular directory. 72
So I'm going to write 3 and hit the Tab key and hopefully, it will enter everything else for me. 73
And just to check, make sure that on your final line you actually see the name of your directory to 74
know that you're inside the right location. 75
And here is where we're going to continue in our steps. 76
We've created our directory. 77
Now we need to create our index.js file. 78
We create new files using the touch keyword and we're going to write, "touch index.js", making sure that 79
we're creating that file in the right location and then hit Enter. 80
And now if we expand this folder, you should see our brand new Index.js file. 81
Step one, step two complete. 82
Now we need to initialize NPM and install the Express package. 83
Now remember that whenever we tackle a new technology, you can always find information about it by 84
searching for its documentation. 85
And the Express documentation is that expressjs.com, 86
and here under the Getting started, Installing Section, you'll see that they've already completed some 87
of the steps that we want to do, which is to create the directory and figure out the location where 88
you want to create your Express files, 89
and then we're going to continue by initializing NPM and installing Express. 90
We're going to use "npm init" and then we're going to use the "-y" flag so that we don't actually have 91
to go step by step and add each of these things like the name and the version, etcetera. 92
The thing that's quite important though is that the main is set as index.js. 93
So if you name this file, something else like app.js or your name.js or whatever, that's not going 94
to work because the NPM is set to look for a file called index.js. 95
So make sure you have that file created in your directory and that your package.json and your index.js 96
are all inside the correct folder, which is your Express Server project that you just created. 97
So now we're going to install the Express package. 98
So that's "npm 99
i" short for install and then it's "express" with two s's. 100
Make sure you don't make any typos and then hit Enter. 101
Now, once that's done, it should have installed some packages and created this node_modules folder. 102
Inside the node_modules, there are a whole bunch of dependencies which is required for us to be able 103
to use express and if we check inside our package.json, not the package-lock but the package.json, 104
you can see the express as a dependency. 105
Now don't worry if your number doesn't match mine, you're in the future and I'm recording in the past. 106
So this version might be 4.19, 5.1, etcetera. 107
It doesn't matter. 108
It's all going to work the same. 109
The other thing we have to do is we're going to upgrade our project to change the type of project to 110
use the ES6 latest syntax. 111
So we're going to add this line ("type": "module") as usual. 112
Now let's hit Save and let's go back to our Index.js where we're going to write our server application. 113
Now the code looks something like this, and it's pretty simple. 114
It's just a few lines to create our first server and I want to talk you through each of them. 115
So this first line is very simple. 116
We're using module based JavaScript, the latest version JavaScript, so we can import express from 117
that express module that we installed just now. 118
And then the next line we're going to create an app using this express object. 119
And then once we've created the app, there's a method on that app called "listen", and we get to specify 120
two things. 121
The first part is the port, and the port is the location of our server where we're going to be listening 122
for requests from the client-side. 123
Now the second part here is the callback. 124
This is the callback function that is going to be triggered when our server is set up. 125
So as soon as our app is listening on Port 3000 and everything is done, then it's going to trigger 126
this callback function. 127
And in the callback function all we want to do is to console log, 128
our server is running, and tell ourselves or remind ourselves where it is running. 129
So Port 3000. 130
Let's write our code in our index.js right now. 131
So let's import express with a lowercase E from the express module that we just created, 132
and then we're going to create a new constant called app that is going to be created from express. 133
Now, once we've got hold of our app, we can use the listen method and specify firstly the port and 134
then secondly, the callback for what should happen when our server is ready to go. 135
We're going to put in an anonymous function in here as our callback and all we want to do is just 136
console.log("Server running on port 3000.") 137
Now, we can specify the port like this where we say the port should be 3000 and we hard code it into app.listen(), 138
but another format, which is the one that I prefer, is to actually create a constant at the very top 139
level and specify that port as 3000 and then use this constant in all the places where we need it. 140
So let me just change this to a backtick so that I can insert that port variable inside here. 141
There we go. 142
So the code is pretty simple and all we're doing right now is we're setting up a server using Express, 143
and that server is going to listen on our port, which is 3000. 144
And once the server is set up, we'll notify ourselves in the console that it is running. 145
Now all we have left to do is to actually go ahead and start our server. 146
We've completed all five steps and in order to start our server, we're going to use the node command 147
in order to run our index.js. 148
You've seen us do this many, many times and we are in fact creating a node server even though we don't 149
see Node anywhere in our index.js, 150
that's because Express is dealing with all the heavy-lifting and simplifying things for us so that our 151
code is clean and easy to read. 152
In our terminal, let's go ahead and type the node command and then the name of our file. 153
As usual, I always use Tab just to check that I'm in the right location and then once we hit Enter, 154
you'll see that our server is now running on Port 3000. 155
Now that line of course comes from our own code. 156
So it means that this whole process was successful, but how do we actually reach our server? So we know 157
our server is running, and we know it's on Port 3000, but how do we get to it? 158
Well, let's go ahead and open up our browser and we're going to go to the URL localhost colon (:) 3000 159
and then we're going to hit Enter. 160
And this is the location of our server. 161
And once we've reached this, you can see we've actually got some sort of response being sent back from 162
our server. 163
But first, let's try and understand what exactly is localhost. 164
Localhost is simply when we don't have a server on the internet and instead, we want to host our server 165
locally, 166
so making our own computer, the server of our website's backend. And that is the local part of our 167
hosting. 168
So when we type into the URL, the longer version, which is https://localhost, 169
then we're tapping into our own computer and then we add the colon symbol and afterwards 170
we can specify the port where we want to try and reach into our computer. 171
The port is kind of equivalent to a bunch of doors on our server computer, and each of these doors 172
have an address. 173
So you might imagine, you know, you have a door, one door to door three. 174
Well, there's loads and loads of doors and in fact thousands or hundreds of thousands of doors that 175
you could potentially create to access your computer. 176
And in our case, when we set up our server, we specified that the door or the port we want to be listening 177
on is port 3000. 178
Once we've set up our server to be listening on that particular door, then when we try and access localhost: 179
3000, then it's going to look onto our own computer and it's going to try and find the door that is 180
Number 3000, 181
and then through that door, it can reach inside to our computer and it can find the application that's 182
listening and ready to respond to any requests, such as sending over some HTML, CSS or JavaScript 183
files in order to serve up our website. 184
Now, the reason why there are many doors on our computer is because it has to be able to listen for 185
different incoming requests. 186
So, for example, your printer might have a particular door that it gets to use, 187
and in this case, I'm using Keynote to present this slide deck, 188
and with Keynote you have a remote function. 189
So I could use my phone as a remote in order to navigate through the slides, 190
and that remote is also accessing my computer through a specific port. 191
And because each port is identified by a unique number, then different services or different applications 192
or different hardware can tap into a particular port 193
and this way we can have multiple services running through the same computer without them interfering 194
with each other so that each one can be listening on a particular port. 195
Now we can actually check which ports on our computer are currently 196
listening for interactions from the outside. 197
And we can do that by typing these commands into the terminal. 198
So if you're on Windows, it's using the netstat command and all of these additional options, 199
and if you're on Mac, then it's using the Lsof function and we need to use sudo in order to give it 200
admin access. 201
You can actually type these commands in your terminal to see which ports are open. 202
As a note here, this line (|) which you might not be familiar with, is called the pipe symbol and you 203
can find that on your computer. 204
It's not an i, it's not a capital I, it's not an l, It's actually a very separate symbol. 205
If you can't find the pipe symbol on your computer, you can also search for it in Chrome and you can 206
paste this into your command line as well. 207
But everyone has it on their keyboard, 208
it's just a matter of mashing through all the different keys in order to find it. On my computer. 209
It's actually the very top left key just below the Escape key. 210
If we go back to VS Code, you'll notice that my terminal that I set up previously does not have the 211
usual prompt which has my name and my computer and then the location of where I am and then either the 212
percentage sign or the dollar sign as the prompt where I can enter any commands 213
and this is because our server is currently running and is occupying this terminal. 214
If we wanted to stop our server from running, we can use the control key on our keyboard and then C (Ctrl +C) 215
in order to exit that process, that's running. 216
But if you didn't want to exit, then you can also just simply create a new terminal by pressing the 217
add (+) button. 218
In this new terminal is where I'm going to type this command. 219
So in my case on Mac, it's 220
sudo lsof -i -P -n | grep LISTEN 221
and because I'm using superuser access I need to type 222
my password to my Mac, which is the one that you use to log in. On Windows, 223
the command is, 224
netstat -ano | findstr "LISTENING" 225
Now, once you've done that, you should be able to see all the ports that are actually currently actively 226
listening for outside interaction. 227
As I mentioned, Keynote has its own port on 54476. 228
That's the door it's going to use to access my computer to try and change the slides. 229
And then for Port 3000, you can see it's Node that's currently running in the other terminal that's 230
hosting my server and it's listening for any requests coming to that particular port. 231
Coming back to our actual website though localhost 3000. 232
You can see we're getting an error here and it's saying we cannot get the forward-slash (Cannot GET /). 233
So what does this mean? 234
It means it can't get our index page, our home page. 235
And in the next lesson we're going to be talking about what this means. 236
Why is it that we can't get and what does getting even mean? 237
How to make requests and how to make sure that our server does not respond with a 404? 238
So for all of that and more, stay tuned. 239
I'll see you in the next lesson.