Welcome back.
In this video, what we are going to do is that we are going to respond to a request.
For example, if a user tried to visit, let's say, slash login or register, we want to display a
specific HTML template for that.
Before we get into that, let's make revision about Node.js.
What is Node.js?
Remember, Node.js uses what is called an event driven non blocking IO model.
The key word here is is what is an event driven meaning that upon every action that we take inside our
application, we can respond to that action.
To that event.
The first event that we have taken is any time we visit the URL that is localhost semicolon, 9000,
this is the first event and we can respond to that event because Node.js is what is an event driven.
So how can we listen to that?
Let's remove the code you wrote to create the file from the previous video, or if you want it, you
can maintain it.
So the first step is let's have a beautiful comment.
Say listen to events.
So how can we listen to event is pretty easy in Node.js.
So what we are going to do is that on the instance of the server to be able to listen to event in Node.js,
we are going to use what is called on so server dot on meaning we are already listening to an event
and we have a couple of built in events, for example, requests.
So this is a type of event from Node.js.
It is not created by us.
If you name it anything.
This event will never find it, so name it as requests.
Great.
The next one is a callback function, so I'm going to pass an arrow function this time around.
And here we go.
And inside the callback function, we have access to the requests and their response.
So let's try to console.log a text.
And since that event has been fired.
Perfect.
So let's save it.
Now, let's remove this console log from the previous video and now we are listening to an event inside
this.
It means that whenever a user tried to visit the you are, this event is going to be fired.
So moment of truth.
So let's shut down the server, clear the console, and then let's run again.
So let's try to visit the URL.
So let's refresh it and now check it out.
And you can see that event has been fired.
So inside here we can implement any logic.
So the question is we need to know the you are arrow, the user is trying to request so how can we get
the you are arrow?
So lucky for us on the request object here if you console.log the requests.
Now let's remove the console log because we know that indeed it has been fired.
So let's start on the server, click the console and then let's restart again.
Yeah, server is running so let's refresh it and let's have a look at the request object.
We have a bunch of them but the one that we want is called dot.
You are error meaning the you are the user is trying to make a request to so we can have a beautiful
comment says gets the new URL so here const you are error is equal to request dot you are URL.
Now if you try to console log the you are error.
Let's have a look.
Let's restart a server, click the console like this and now let's see, let's visit the end point.
Now have a look.
You can see that we have something incredible that is forward.
Slash this force slash simply means the home page.
The force slash it's same as this.
That is the h t t p semicolon semicolon localhost.
Semicolon, 9000.
This is the home is equal to the fourth slash.
So now we know that we are the home page.
But if I try to make use of a slash log in like that.
Now hit enter.
Let's check the console.
You can see we have the URL that is slash logging.
So this is same as the one we see on the page.
Ask look host semicolon 9000 for a slash log in.
So now we know that you are the user is trying to make a request.
So we can make some conditions here and render specific a HTML template.
Now that we know that you are inside this event handler here, we can now make some conditions and check
the kind of you are or the user is trying to visit or to get the resource from.
So here you're going to make use of Eve and then the you are error.
If it is equal to voice slash login, then we can go ahead and then render the login template.
But let's see how you're going to do it.
So the first step is we need to read the file.
For example, looking at this one, we want to render this one.
First of all, we need to read the content on this HTML template.
For this one, we can use the normal HTML semantic like this one and then paste it as that is the same.
So let's take to this.
All right.
So right in this one, using the function is going to be hectic.
That is why I just added that div as that so is same as before.
So now we are going to read the contents, as I said, and how are you going to do it?
So let's comment here and say that read content on.
On the login page, a two page or eight minute file.
Okay.
So here we go.
We are going to use the FS module.
Let's have some space here.
F s dot read file and we pass in the kind of file that we want to read.
That is the log in dot html.
The next element is going to be the function.
In that function, we have access to the data.
So here let's use a function.
This time around we have access to the error and the actual content.
And here you go.
So at this point, let's check for error.
Check for error.
So here, if error, why not?
You go ahead and then console.log the error.
Otherwise we are going to send this data as a response using the response dot.
Right.
So going to send the status code as we did inside here.
Good.
So now first step is we need to write to the head to tell the user that the response was okay and the
kind of data you want to send to the user.
So here we go.
So errors down here and now inside here, we're going to use red dot right head.
Right.
Hey, as time passed in the status quo two hundredths, which means, okay, we pass in the first agreement.
That is a status code for this case.
Let's use 200, which simply means.
Okay, the next man, we're going to be object to specify the kind of data you want to send and that
is under content type.
And then semicolon we pass in as text some around we want to send a HTML.
Then the next step is we need to send the data that is rest that right and then pass in the data we
got from the callback here as that and that is it.
The last step is we need to end the response.
Rest, rest and not rest.
Rest that end.
Okay, now moment of truth.
So here because when we run the function, this one is going to be called, but we are implementing
the logic inside this handler.
So in that case, you're going to remove the logic here inside this.
So now let's remove everything from here.
So what we go from here is just the instance of server and that is all.
So now because we've made changes to the server, let's shut down the server, control C and click the
console and let's run the server again.
Now the server is running.
Now let's visit the you are error lookup host semicolon 9000 and then first slash log in when I hit
enter a this is a game page.
So what about if I visit home page?
If we see that nothing seems to happen happening we see is pending because we are not handling forward
slash.
So here we can create different HTML templates and recall call it as home or index.
So let's make it home as that.
And now let's give some snippet here and h one, let's say welcome.
Home.
And let's give it P tag here and let's ask some dummy text here.
Now, let's go ahead and render this.
We can post this video and give you a set, a challenge.
The process is the same.
The difference here is a URL.
So here I'm going to be the home page.
That's going to be the log in so we can copy this one for the home page.
So let's pull up this one and see where it ends.
So here you go.
Let me copy the comment also.
And now down here, change this one to home page, home page.
And now let's change this 1 to 4 slash.
Remember for a slot is homepage.
So instead of this one, I'm going to render the home and that is it.
So now let's try to clear the console and run the server again.
So let's go to homepage and indeed we have the page being rendered as that.
The last step is let's also render the register page.
So only one m so the same process, select that collapse eight and then let me select all here are going
to be the register page register and now instead of this one, I'm going to be as register dot HTML
and the endpoint or the URL is going to be as register and now have a look.
When I make use of for slash register, I could see that is pending because we need to restart the server
because we have made changes to the code and that is it.
So now let's check it out, refresh it and this is Register Page.