Hey, guys. 1
In today's lesson, we're going to be learning all about HTTP requests and we're going to learn the 2
language that allows you to make requests to your Node server. 3
What exactly is HTTP and what does it stand for? 4
Well, the first part you already know because it stands for HyperText, just like HTML stands for hypertext. 5
The second part, the Transfer Protocol basically describes this as a language, a language that allows 6
computers to talk to each other across the Internet. 7
We as humans, when we want to transfer our thoughts between each other, we have this thing called 8
language. 9
Or you could call it thought transfer protocol. 10
It could be English, it could be French, it could be Spanish, 11
but either way, we make these sounds across the air and we allow each other to understand our own thoughts. 12
Now, when computers want to talk to each other across the Internet, they need the Hyper Text Transfer 13
Protocol, a different language that allows them to understand each other. 14
Now I want to teach you some basic vocabulary to get you started with the computer language of HTTP. 15
Just as always, when I go to a new country, I always learn a few words just to ensure that I don't 16
go hungry. 17
So in China, maybe you can say, Wǒ èle, Maybe in Japan, you'll say Onaka ga suita. 18
And if you go to Mexico and you want some empanadas, you'll say Tengo hambre, and so on and so forth. 19
Basically, we want to know enough vocabulary in HTTP so that we know what's going on in the secret 20
lives of computers. 21
When we make these HTTP requests, there are five main words that you'll come across and it's GET,POST, 22
PUT, PATCH and DELETE. 23
So let's go through each of them. 24
Now remember previously when we tried to run our server and request our website from the server, we 25
got an error saying Cannot GET. GET is one of the first words you're going to need to learn, 26
and this is when you want to request a resource from the server. 27
This could be an HTML website, it could be some piece of text, it could be a piece of data from the database 28
or the server, 29
but you are "getting" something from the server when you make your HTTP request using the GET keyword. 30
Now, POST is similarly easy to understand. 31
Essentially, in this case, what you're doing is you are sending a resource to the server. 32
This could be a piece of information like if you have a Form to sign up to your website. Well, their 33
email and their password is going to be sent to your server when they click that Sign-up button 34
and that is going to be done using a POST request. 35
And then on the server side, you can take that information and then do whatever you will with it, 36
save it into a database, or process it or work with it somehow. PUT and PATCH are somewhat related because 37
essentially what they are is they are update methods. 38
However, they are a little bit different. Now, a put request is when you want to replace a resource 39
with whatever it is you're sending over. 40
So you want to update something by replacing it completely. 41
PATCH is a little bit different and similar to the word in English, 42
essentially you want to patch-up a resource even though both of these are updates, they work a little 43
bit differently. 44
And a good analogy for the difference between these two types of update, which I often like to think 45
about, is an Amazon return. 46
I order a lot of parcels from Amazon and very often I get things which are broken or something that's 47
not working. 48
So let's say you get a bicycle from Amazon and when you receive it, unfortunately one of the tires 49
is just broken. 50
Now this is real story. 51
I actually ordered a bicycle from Amazon. 52
Don't ask me why. 53
Now, when you tell Amazon that you have shipped me a broken bicycle, they have two options. 54
Option Number 1 is they use a PUT request to give you an entirely new bicycle. 55
They just replace your bicycle with a new bicycle 56
and this way you update the bicycle. 57
Now, the other option they have is a PATCH request, where in this case they only send you the functioning 58
wheel so that you yourself can replace the broken wheel with this new functioning wheel and you patch 59
up the broken bicycle. 60
Finally, we have the DELETE word, which is pretty easy to understand. 61
It just deletes resources. 62
Either from the server or from the database. 63
But essentially this is a request from the client-side computer to the server-side computer saying that 64
there is something that needs to be deleted. 65
With these five words under your belt, you should be able to navigate the world of HTTP requests. 66
Let's take a look at this with a real example. 67
Here I've got a server created using Node and Express, and as you've seen before, we are running this 68
server on Port 3000 and it's up and running. 69
As you saw before, when we run this code and we tried to load up the website at that location, localhost 70
port 3000, we get this error saying Cannot GET. 71
So now that we know what GET means, it means you, the client using the browser are trying to get a 72
resource, namely the homepage to load up, 73
but you Cannot GET because our server does not yet have any code that allows us to do that. 74
So what do we have to do instead? 75
Well, we need to add a little bit of code to say, well, what should happen when a user is trying 76
to get at our home page? 77
The forward slash (/) goes at the end of the home page. 78
So for example, if you have localhost:3000 and then at the end you can have a forward slash or 79
you can have no forward slash, 80
but either way, when you load this address up, it's trying to make a GET request to the route, which 81
is the home page. 82
In this case, we've added the Express method called GET 83
so now our server knows what to do when that GET request comes through, 84
and then in between the curly braces of the anonymous function right here, we can define how our server 85
wants to respond to that GET request. 86
And in this case, I'm just sending over the words, "Hello World." 87
And so now when we try to load up our home page at localhost:3000 with this updated code, you will 88
actually see the words, "Hello World" come up in the browser. 89
Let's have a little bit of practice doing this and also setting up our server. 90
First, I want you to just simply repeat the process that we did in the previous lesson, which is to 91
set up a brand new server using Node and Express, and because it involves quite a few steps, I've 92
listed them all out here for you 1 to 6 so you can keep the screen up somewhere and pause the video 93
and then try to complete the exercise by creating your own Node server using Express and following these 94
steps. 95
Now, you don't have to write the GET request yet, just the parts where you can get your server up and 96
running. 97
Pause the video and give this challenge a go. 98
All right. 99
So the first thing we want to do is to create a new folder in our Backend module called 3.2 HTTP Requests. 100
Now you can either do this using VS Code buttons or you can do this using the mkdir command, 101
but either way, we want to create our new directory and then inside we're going to create an index.js 102
file. 103
The next thing we're going to do is to go ahead and initialize NPM in this project folder. 104
So first we need to cd over into the right directory. 105
So I'm just going to do that by dragging over this folder here 3.2 HTTP Requests. 106
Once we've made sure we're in the right location, then we can go ahead and use, "npm init -y" to set up NPM 107
on that directory. 108
And next we can go ahead and install Express by using, 109
"npm i express". 110
Now once those modules are installed, we're ready to start writing some code. 111
So the first thing we're going to do is we're going to import express from express and remember that 112
in order to use import, we have to go into the package.json and change the type of our project to use 113
modules from ES6. 114
So let's hit Save, close that down. 115
And now we've imported Express, we can create a constant, which is our app and we can do that using 116
Express. 117
Now we're able to start listening with our app using app.listen and then we provide the port that we 118
want to listen on, which I'm going to set to 3000 as always. 119
And then we can add an anonymous function to specify what should happen when our port is up and running. 120
And all I want to do is just simply console log that the, "Server has started on port..." and then I'm just 121
going to insert my port number right here. 122
All right, that's it. 123
And now we're ready to go ahead and run our server so we can use Node and then index.js and our server 124
has started. 125
And that concludes the challenge. 126
This is how far we got in the previous lessons similar to previously, though we get that error where 127
it says Cannot GET / the forward slash location. 128
Now if we go back and we add the code that allows our server to handle GET requests, then we can fix 129
that. 130
So we're going to use the app.get method, which comes from Express, and then the path or the endpoint 131
that we want to be able to handle right now is just the root, the home page, which is just a forward 132
slash (/). 133
Now next comes an anonymous function and, and we can tap into the request and response. 134
So it's written usually like this req and res and inside the curly braces, we can define what we should 135
do once we receive this get request at this endpoint. 136
Firstly, the thing I want to show you is what the request from the browser looks like. 137
We can go ahead and log the request parameter right here. 138
And if I go ahead and hit save, stop my server and restart my server, remember that when we're using 139
Node to run our Index.js file and get our server started every single time we make a change, we have 140
to stop the server using control C (Ctrl + C) and then restart the server using node Index.js. 141
This brings me to a point where a lot of people fall down on if you have a server that has started and 142
it's running somewhere, but then you decide that you open up another terminal somewhere else, 143
and then you try and run another project. 144
So in here, if I try to run Node Index.js again, I get this error where it says, "address is already 145
in use..." and it tells me that I'm trying to run my server on a port, port 3000, which is already running 146
something. 147
It's already occupied. 148
This is one thing that's really important to note and when you see this error which you might encounter 149
from time to time, just know that you can solve this in two ways. 150
One is you can go to the place where you have the server running and you can stop it and then go back 151
and you can run your other project without any problems, as you can see right here. 152
Another way you can do this is by actually killing that particular port using a terminal command. 153
Now I'm going to link to this blog post, which shows you which commands you need to use in order to 154
close a port on Mac, on Windows and on Linux. 155
So basically you can follow the process here 156
if you get really stuck and you end up in that situation where you can't find the place where you've 157
started your port in order to stop it. 158
Now let's make sure that our server is started and go over to localhost:3000 and then over here we can 159
see the printed output of what that entire request from my browser actually looks like. 160
Now there's actually way too much information to process here, so I'm going to narrow it down by going 161
to request.rawHeaders. 162
And the raw headers are basically a list of key value pairs that come from where the request originated. 163
Let's hit Save. 164
Let's stop our server using Ctrl C. 165
Let's restart our server using, "node index.js". 166
And now if we request this again, then you can see these are the raw headers that we're getting. 167
So it tells me where is the domain, where this website is being accessed. 168
It tells me other things, such as where that request originated from, which in my case was Google 169
Chrome, what system I'm running, and a whole bunch of other things about my request. 170
That's essentially what a request is. 171
It comes in from the browser, it hits up a particular path, and then we can either get hold of it 172
inside this anonymous function or more importantly, we want to be able to send back a response. 173
To do that, we use res.send, 174
and in the body of this method we can send back a piece of text. 175
So for example, I am just going to write, "Hello World," that's it. 176
And then I'm going to hit Save. 177
I'm going to go ahead and stop my browser, rerun my browser, go back and reload, and you can see 178
now instead of having that error, Cannot GET root path, I've now got, "Hello world" being sent back from 179
my server. 180
So when I request my home page at this particular path and I hit Enter to go to that location, my browser 181
sends the request to my server and because my server is running and listening and it knows how to handle 182
that GET request, it sends this piece of text back, 183
and that's what I see on this web page. 184
That's the entire simple process of what's going on behind the scenes. 185
So one thing you've noticed is every time I've changed any sort of code on my server side, I've had 186
to stop my server and then restart my server, which frankly is a bit of a pain. 187
What can we do instead? 188
Well, professional Node Developers use a tool called Nodemon, and what Nodemon does is pretty simple. 189
It automatically restarts the node application when it detects files changes. 190
That means that you don't have to manually stop and start your server every time there's a change, 191
Nodemon does that for you and to use it. 192
It's as simple as replacing the node keyword with nodemon and then the file that you want to run and 193
it's going to automatically do all of the monitoring magic behind the scenes. 194
In order to test this out, I want to show you one other thing that you can send. 195
Instead of just plain text, you can also send fully formatted HTML. 196
So, for example, in this case, I'm not sending back text. 197
I'm actually sending back in the form of an h1. 198
Going back to our project, let's go ahead and stop our server and let's use NPM to install using the 199
-g flag so you can use npm i or NPM install. 200
I is probably better to prevent making typos and then the -g flag stands for global. 201
So this means that we are installing this package called nodemon globally on our computer because we 202
don't just want it to work for this one project, we'll want to use it for other projects that we develop 203
in the future as well. 204
So we're installing it for use on any project using that -g flag. 205
So now let's go ahead and hit Enter and install it. 206
Now if you get some errors or your install didn't really work, go ahead to the Nodemon documentation 207
and simply copy and paste the installation command. 208
Now, once the installation has completed, then we can now use it by typing "nodemon" and then "index.js" 209
to use Nodemon to run our Index.js path to monitor our files for any changes. 210
And I'm going to make that change right now. 211
Instead of sending "Hello world", I'm going to send an h1 that just says, "Hello". 212
Now when I hit Save or even if I don't hit save, Nodemon is actually already monitoring those changes 213
on a timely basis and it has restarted my server because it saw those changes. 214
So now let's go back to our localhost. 215
Let's refresh our page. 216
You can see that has now been updated and my server is now sending back fully formatted HTML. 217
You saw that previously we were only handling the endpoint. 218
That is just the forward slash (/), 219
and I want to talk a little bit more about what endpoints are. 220
If you imagine that you want to send a letter to your friend somewhere across the world, let's say 221
you have a Pen pal in Europe or you have a Pen pal in Africa, 222
then the endpoint of your letter in HTTP would be forward slash that destination. 223
So it could be forward slash Europe or forward slash Africa. 224
And these would be the endpoints for your letters. 225
Now, when you send your letter, that's equivalent to your HTTP request. 226
We saw that we can get hold of the root or the home page by targeting the forward-slash (/) endpoint, 227
and this is equivalent to going to localhost 228
:3000 and then hitting a forward slash or not having the forward slash. 229
Either way, it's going to hit up this particular root. If we want to add other endpoints into our server 230
code so we can handle more situations then we simply just need to add another GET method. 231
So in this case, I'm adding the endpoint "/About", and when the user tries to hit up that 232
endpoint, they're going to get this h1 instead. When they go to Localhost 233
:3000, 234
and this is kind of equivalent to when you go to say, www.google.com, which is the main domain, 235
and then you hit up the, "/About" endpoint and this then gets picked up in our server right 236
here and these lines of code get triggered, which is why this h1 gets displayed on the screen. 237
We're going to try this out in our exercise so that instead of just writing a server that runs, we're 238
going to add to this exercise so that our server can handle the, "/", "/contact" 239
and "/about" endpoints. It's totally up to you what you want your server to send back on 240
the home endpoint. 241
So this could be maybe just say, Home Page as a h1 and then maybe on the /contact route, 242
maybe you could have your phone number being listed, 243
etcetera. 244
And on the /about endpoint, you could maybe have some info about yourself, maybe a paragraph element 245
or an h1 or something like that. 246
It's totally up to you how you want to do it. 247
It doesn't really matter as long as you're able to understand how to hit up the different endpoints 248
and how to target them in your server. 249
Pause the video and complete this challenge. 250
All right. 251
So this is pretty simple all I'm going to do is copy this part of my code. 252
The get method and paste it twice so that I get two more endpoints that I can add. 253
So the first one is the about endpoint, and in my case, I'm just going to write an h1 called, "About 254
me." 255
And then maybe I can also have a paragraph tag saying, "My name is Angela," close my paragraph tag. 256
That's all the HTML that I'm going to send over. 257
And then the third endpoint is the contact endpoint. 258
And in this case, I'm going to have a h1 that says, "Contact me," and I'm going to have a paragraph that 259
says maybe my phone number is +4412345678 260
9 261
And then let's close off our paragraph tag and notice how Nodemon is working hard in the background, 262
noticing these changes and updating and restarting our server so we can simply go back over to our localhost 263
3000, 264
refresh the page, 265
this is what our home page looks like, this is what our about page looks like, and this is what our 266
contact page look like. 267
So you can see how we can use these different endpoints to plan for when a user or when a client tries 268
to hit up that endpoint. 269
And in reality, what this means is we can easily build multi-page websites, navigation into our web 270
apps built using Node and Express on the backend. 271
So in the next lesson, we're going to be learning more about different types of HTTP requests, and 272
we're also going to be learning how we can use Middleware with Express. 273
So for all of that and more, I'll see you on the next lesson.