- [Instructor] Let's determine how an application responds
to a client request to a particular endpoint
which consists of a path, an HTTP request method.
As a user of the web,
you are constantly interacting with routes.
Whenever you visit a URL,
this is a route that has been coded
to serve up specific information
based on the page and associated HTTP methods.
So then what are HTTP methods?
HTTP methods are actions
that are taken on a specific resource.
For the purposes of this course,
we are only going to focus on four of these methods
which correspond to CRUD operations.
If you've never heard this acronym before,
CRUD stands for create, read, update and delete.
The four HTTP methods that we are going to focus on
are GET, POST, PUT and DELETE.
Often times, you will see these references in print
in all caps, as they are here,
but when we use them in our code,
they will be in lowercase.
Think about each of these methods
using an example of an app
where you can create a grocery list.
We will illustrate each method
with the help of our grocery list example.
We use the GET method
to retrieve or get data from the server.
You will use this method quite often
as you retrieve data to display or render a page
or within an application.
Using our grocery list example,
we would use the GET method
to retrieve all of the items
that are currently on our grocery list
to render on the page.
Next, we have the POST method.
POST sends data to the server
and generates a new resource.
You would use the POST method
if you wanted to add a new item to your grocery list.
Once you submit the new item,
it would post to the server
and the new item or resource would be created.
The PUT method is used to update an existing resource.
Let's say you had three bananas on your grocery list
but now you need five.
Since you need to update an existing grocery list entry,
you would use PUT to update the resource.
And then we have DELETE
which does what its name implies.
It deletes an existing resource.
If we decided we no longer needed to get cereal,
we would use the DELETE method
to remove that item from our grocery list.
Now that we have a foundation for HTTP methods,
let's discuss HTTP messages.
There are two HTTP messages.
Requests and responses.
When you start constructing your routes,
you will use these to communicate back and forth
with the client and the server.
Requests are sent by the client
to trigger an action on the server.
In contrast, responses are the answers sent from the server.
Now that we have a foundation for routes and HTTP methods,
let's try to construct our first route.
We're going to start in the browser,
but make sure you have your code editor handy.
At localhost:3000, you can see
that we still have the message Cannot GET
that we saw in our last video.
Hopefully this message makes a little bit more sense to you
now that you know more about routes and HTTP methods.
We're seeing this message
because we don't have any routes set up at this point.
So let's go ahead and create one together.
Let's transition over to our VS code
and right below our PORT variable,
we're going to start with a reference to our Express app,
so app,
and then since we're starting with the GET method,
we'll go ahead and apply the GET method to app.
Each HTTP method takes two arguments,
the path and the handler.
The handler is basically the function
that is going to execute once the path is found.
For our path, we're going to use forward slash
and then for the handler,
we're going to pass the request and response
along with some additional code to be executed.
So first, I'll put in slash, so this is the route.
So that is our first argument,
and then our next two arguments, request and response,
I'm going to spell them out fully,
but please note that often times,
you will see request represented as req
and response represented as res.
You can use either one.
It is totally up to you,
but just to be more explicit,
I'm going to fully spell out request and response
throughout the course.
So now, I have my request and response
and now I'm going to add the function here,
our arrow function, for the handler.
So now that we have this set up,
we're going to use the send method on the response
to send a message to the route that we've established.
So we'll do response.send
and in this send method,
we're just going to pass a messasge,
a string that says, "This is a GET request at slash,"
with slash meaning the route.
So let's save that.
And then let's head back to the browser and refresh
and let's see if our message is being displayed.
All right, so back here at localhost:3000, let's refresh,
and congratulations.
You've just created your first route with Express.
Awesome.
So let's head back, though, to our editor,
and let's go ahead and create some routes
for the other three HTTP methods.
For the sake of example,
we can easily copy and paste our first block of code
and make a few little tweaks.
So I'm going to copy this GET
and then right below, paste it in,
and we're going to change the GET to POST.
All right.
And this path, instead of being at the route,
let's name the following three
by their CRUD operation spelled out.
So with POST, it's create, so let's call this route create,
request and response in our handler function,
that setup stays the same,
but we're going to change the message here
to say, "This is a POST request at /create."
All right, so we'll save that.
So we have our GET, we have our POST.
Our next route is going to be a PUT.
So we'll change post to put
and we're going to call this route edit.
All right, so then, request and response.
This stays the same, our handler stays the same,
and we're just simply going to update the message here.
So, "This is a PUT request at /edit."
All right, make sure you save,
and then last but not least
we will create a delete.
So delete and we're going to call this route delete
and just simply change the message.
So, delete, spell it right, at delete.
All right and I'm going to save this
and then just to keep things organized,
I like to add comments in my code
and especially, too,
if you're referencing this in the future
so I'll have GET here
and then POST,
and those double slashes
will keep it as a comment
and it's not going to disrupt anything with your code.
All right.
So very good.
You have four new routes.
Our GET, POST, PUT and DELETE.
In our next video, we're going to talk
about an easy-to-use free resource
that we can use to test any endpoints that we create.