‫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.