Original subtitles

In this video,

we're going to talk about and implement

a concept called routing.

So right now, the code that we wrote

does not at all react to the URL that we're requesting.

So let's say we have this URL and get this response,

but if we have for example product,

well, we get the exact same response, right?

If we take a look at the example,

the final project, well here, for example,

we see Overview.

So right now we have the host, then the port,

and /overview, and so the route here is /overview,

and then we see this page.

But now, take a look at what happens.

So now we have product.

And so that's why we get this product page.

And then we go back, we get back to overview,

and so we see again the page that we had in the beginning.

Also, if we don't have anything at all,

well, then we still see this same page.

And so that is basically routing.

So, routing basically means implementing different actions

for different URLs.

Okay, and so right now we don't have anything like that.

So as I said, no matter what URL we have,

we always get the same response.

And so we now have to implement some logic

that changes that.

Okay, and so again, that will be routing.

Now routing can actually become very very complicated

in a big, real world application,

and so in that case we use a tool for that like Express,

so we're going to do that in the next big project

in this course where we use Express to do all of this.

But for now, since we're just starting to learn Node,

we want to learn how to do everything from scratch

without any of these dependencies, right?

So let's implement very simple routing here

in this server.

Now the first step is to be

actually able to analyze the URL.

And for that, we use yet another built-in Node module,

which is called URL.

And I'm just duplicating this here,

and then URL.

And just as a sidenote, so I selected URL,

and then to select the next one,

I just hit Command + D on my keyboard.

Okay, I know that someone is probably gonna ask in the Q&A

how I did this trick,

and so that's why I'm replying to that basically right now,

and saying how it works.

Anyway, first of all, let's actually take a look

at the request.url.

And of course, I want a console.log of this.

So stop the server and run it again.

And there's a tool for us to automatically do this.

I'm sure some of you will know that.

And of course, we're gonna use that a bit later,

but for now I want to keep doing it like this.

Okay, so let's reload this.

Works the same, and here we get the URL.

Okay, and we actually get two of them.

And what this means is that actually we have two requests

and so actually, this callback function here

is executed twice.

So one console.log has just the slash,

and the second one has /favicon.

So when we're using a browser,

the browser automatically performs a request

for the website's favicon.

Alright, so in this case we don't have any favicon,

and we just ignore this, okay?

So this doesn't really matter.

Now let's say that we write /overview here.

So let's see what we get then.

So we get /overview, and /favicon, okay.

So again, the one that matters is the /overview.

So for simple URLs like this one,

we actually don't even need the URL module,

but we will need it for more complex stuff.

So let's say that we have, for example,

specifying the ID 23,

and some other parameter here.

Let's say this is something like this.

And I'm sure you have seen this kind of pattern in a URL

where we can specify parameters.

So if we have something like this,

then you see that the URL is this.

And what the URL module will help us doing

is to basically parse these parameters

and their values into a nicely-formatted object, okay?

So for now we're actually not gonna use

the URL module just yet.

We're gonna need it a bit later.

So, let's now actually implement the routing,

and it's very very simple.

So basically all we need is a big if else statement here.

Okay, so first of all I'm actually going to save req.url

into a variable, oh, sorry,

into a variable called pathName.

Okay, and so now, based on that path name,

we will take decisions.

So basically, send back different responses.

So, if the pathName is equal to overview, or /overview,

well, then let's send something to the client.

And let's just say, this is the OVERVIEW.

Else if the pathName is equal to product,

/product, well, then all we want to do

is to send this is the PRODUCT.

Okay, now in case we are at the root of the site.

So basically, like this,

well, then we also want to show the overview.

And so let's add that here as well.

So pathName equals, and slash.

And then the or.

So if the pathName is either the root or /overview,

then sent back that as an OVERVIEW,

or if it's product, well then send back PRODUCT.

So very simple stuff, and let's test it out now.

Actually, we can just reload, or instead, actually,

we need to first finish this again, and start it all again.

So it's working already, this is the OVERVIEW.

If I now say product,

then this is a PRODUCT, perfect.

Now just to check the last one,

overview gives us OVERVIEW again.

Okay, now let's say that we actually request something

that we didn't handle.

So something like this.

So, what happens?

Well, as you see, this wheel here

doesn't really stop spinning.

So it's trying to send back a response, but it really can't.

So the server doesn't know what to do in this situation,

because we didn't add any fallback.

So let's stop this poor guy here,

and basically simply add an else statement here.

So if it's not the root, not overview, not product,

well, then we want to say that this page could not be found.

Page not found.

Now, many times when on the website

you try to open a page that's not found,

you see this 404 error, right?

And that is actually something called an HTTP status code.

And so since we're sending back a response,

we can also add the status code to the response.

And so for that, we can use multiple ways of doing that,

but I'm going to use one that can do more

than just status code,

and I'm going to show you why in a second.

But for now, I'm just saying here,

res.write the head, and then 404, okay?

Let's test that now.

And so what happens here?

Ah, in this nothing's happening,

because I didn't restart the server.

So, page not found.

So great, now what about the 404 status code?

Well, we can hit Inspect here to open the Dev Tools,

or instead what I like to do is to hit Command + J,

and that will then open up the Dev Tools as well.

On Windows it's probably Alt + Control + J,

or you can just come to View, and then Developer,

and Developer Tools like this, okay?

Then head over to the Network tab,

but actually you can already see it like here.

So the server responded with a status code of 404 not found.

But also you can see it in the network, and just reload it,

and then you see 404 here,

and the red text to show that there was some error.

Okay, now something more that this writeHead here can do

is to also send headers.

And to send headers, we need to specify an object here,

and then in there we put the headers that we want to send.

Now what actually is a header?

Well, an HTTP header is basically a piece of information

about the response that we are sending back.

And again, you will learn a lot more about this

in a later section of the course, okay?

For now just know that there are many different

standard headers that we can specify

to inform the browser or whatever client

is receiving a response about the response itself.

For example, one of the standard headers

is to inform the browser of the content type.

So we can say Content-Type,

and set it to text/html.

And so just like this,

the browser is now expecting some HTML.

And so what we can do now, for example here,

is to do an h1 element

in order to basically send back HTML.

So, just like this.

And because of this header here,

the browser is now actually expecting HTML to come in.

We can also specify our own made up headers.

So let's say my-own-header,

hello-world, so something like this, okay?

Now what matters here is that these headers

and also the status code always need to be set

before we send out the response.

Okay, so we never can send headers

after the response content itself.

So let's try that again, or actually,

I should restart the server.

And so let's try again now.

And indeed, we still get our error,

but now it looks different.

So now we actually have an h1 element here.

And if we also on the Network tab click on this request,

let's actually increase it a little bit here.

So I'm not sure if you can really see this,

but when we click on this request here,

we can actually also see the response headers.

And so here we have the content type

that we specified as text/html,

and then the other header,

so my own header is set to hello-world.

And so again, we can use this to send some metadata

about the response itself, alright?

Now there are also some request headers,

and these were set by the browser automatically,

but for now don't worry about these.

What matters is that we specified

that the content that we're sending is HTML,

and also for example the status code

that we sent back is 404 not found, okay?

Now, let's just get rid of this.

Open it up, and so now you see,

we have a status of 200, which means OK,

and these other headers, they are actually gone.

Okay, so now this response

does not have these other two headers, right?

And we see the 200 OK now,

and so yeah, everything's working fine right now.

We implemented the basic routing,

so for different path names,

we have now different actions.

Just one final thing that I wanted to say about routing

is that these routes that we defined here in our code

and the routes that we put in the URLs in the browser

have nothing to do with the files and folders

in our project's file system, okay?

So as a beginner you might think

that if we open /templates for example,

that that would then open the Templates folder

that we have in our file system.

But of course, that is not the case.

So if we wanted to have a templates route,

well, then we would have to define

that in our router, basically,

and then send a special response for only that route.

Anyway, I think that this enough for one video.

See you in the next one.