1 00:00:01,150 --> 00:00:02,290 ‫In this video, 2 00:00:02,290 --> 00:00:04,880 ‫we're going to talk about and implement 3 00:00:04,880 --> 00:00:07,393 ‫a concept called routing. 4 00:00:09,040 --> 00:00:11,520 ‫So right now, the code that we wrote 5 00:00:11,520 --> 00:00:16,163 ‫does not at all react to the URL that we're requesting. 6 00:00:17,776 --> 00:00:21,110 ‫So let's say we have this URL and get this response, 7 00:00:21,110 --> 00:00:24,240 ‫but if we have for example product, 8 00:00:24,240 --> 00:00:28,550 ‫well, we get the exact same response, right? 9 00:00:28,550 --> 00:00:31,210 ‫If we take a look at the example, 10 00:00:31,210 --> 00:00:34,560 ‫the final project, well here, for example, 11 00:00:34,560 --> 00:00:36,720 ‫we see Overview. 12 00:00:36,720 --> 00:00:40,920 ‫So right now we have the host, then the port, 13 00:00:40,920 --> 00:00:45,083 ‫and /overview, and so the route here is /overview, 14 00:00:46,081 --> 00:00:46,914 ‫and then we see this page. 15 00:00:46,914 --> 00:00:49,483 ‫But now, take a look at what happens. 16 00:00:50,680 --> 00:00:52,963 ‫So now we have product. 17 00:00:52,963 --> 00:00:55,400 ‫And so that's why we get this product page. 18 00:00:55,400 --> 00:00:58,600 ‫And then we go back, we get back to overview, 19 00:00:58,600 --> 00:01:02,080 ‫and so we see again the page that we had in the beginning. 20 00:01:02,080 --> 00:01:04,690 ‫Also, if we don't have anything at all, 21 00:01:04,690 --> 00:01:08,120 ‫well, then we still see this same page. 22 00:01:08,120 --> 00:01:10,840 ‫And so that is basically routing. 23 00:01:10,840 --> 00:01:14,610 ‫So, routing basically means implementing different actions 24 00:01:14,610 --> 00:01:16,770 ‫for different URLs. 25 00:01:16,770 --> 00:01:20,260 ‫Okay, and so right now we don't have anything like that. 26 00:01:20,260 --> 00:01:23,520 ‫So as I said, no matter what URL we have, 27 00:01:23,520 --> 00:01:26,170 ‫we always get the same response. 28 00:01:26,170 --> 00:01:28,750 ‫And so we now have to implement some logic 29 00:01:28,750 --> 00:01:30,410 ‫that changes that. 30 00:01:30,410 --> 00:01:34,670 ‫Okay, and so again, that will be routing. 31 00:01:34,670 --> 00:01:38,490 ‫Now routing can actually become very very complicated 32 00:01:38,490 --> 00:01:42,290 ‫in a big, real world application, 33 00:01:42,290 --> 00:01:46,690 ‫and so in that case we use a tool for that like Express, 34 00:01:46,690 --> 00:01:50,300 ‫so we're going to do that in the next big project 35 00:01:50,300 --> 00:01:54,340 ‫in this course where we use Express to do all of this. 36 00:01:54,340 --> 00:01:57,500 ‫But for now, since we're just starting to learn Node, 37 00:01:57,500 --> 00:02:00,350 ‫we want to learn how to do everything from scratch 38 00:02:00,350 --> 00:02:04,050 ‫without any of these dependencies, right? 39 00:02:04,050 --> 00:02:06,560 ‫So let's implement very simple routing here 40 00:02:06,560 --> 00:02:08,890 ‫in this server. 41 00:02:08,890 --> 00:02:10,670 ‫Now the first step is to be 42 00:02:10,670 --> 00:02:12,863 ‫actually able to analyze the URL. 43 00:02:14,020 --> 00:02:17,510 ‫And for that, we use yet another built-in Node module, 44 00:02:17,510 --> 00:02:18,523 ‫which is called URL. 45 00:02:20,420 --> 00:02:22,363 ‫And I'm just duplicating this here, 46 00:02:24,410 --> 00:02:27,063 ‫and then URL. 47 00:02:28,700 --> 00:02:31,940 ‫And just as a sidenote, so I selected URL, 48 00:02:31,940 --> 00:02:33,550 ‫and then to select the next one, 49 00:02:33,550 --> 00:02:37,000 ‫I just hit Command + D on my keyboard. 50 00:02:37,000 --> 00:02:41,710 ‫Okay, I know that someone is probably gonna ask in the Q&A 51 00:02:41,710 --> 00:02:42,910 ‫how I did this trick, 52 00:02:42,910 --> 00:02:47,630 ‫and so that's why I'm replying to that basically right now, 53 00:02:47,630 --> 00:02:49,230 ‫and saying how it works. 54 00:02:49,230 --> 00:02:52,590 ‫Anyway, first of all, let's actually take a look 55 00:02:52,590 --> 00:02:55,763 ‫at the request.url. 56 00:02:56,660 --> 00:03:00,013 ‫And of course, I want a console.log of this. 57 00:03:04,890 --> 00:03:08,390 ‫So stop the server and run it again. 58 00:03:08,390 --> 00:03:11,930 ‫And there's a tool for us to automatically do this. 59 00:03:11,930 --> 00:03:14,680 ‫I'm sure some of you will know that. 60 00:03:14,680 --> 00:03:16,870 ‫And of course, we're gonna use that a bit later, 61 00:03:16,870 --> 00:03:19,950 ‫but for now I want to keep doing it like this. 62 00:03:19,950 --> 00:03:23,770 ‫Okay, so let's reload this. 63 00:03:23,770 --> 00:03:27,463 ‫Works the same, and here we get the URL. 64 00:03:28,600 --> 00:03:31,830 ‫Okay, and we actually get two of them. 65 00:03:31,830 --> 00:03:35,720 ‫And what this means is that actually we have two requests 66 00:03:35,720 --> 00:03:38,710 ‫and so actually, this callback function here 67 00:03:38,710 --> 00:03:40,570 ‫is executed twice. 68 00:03:40,570 --> 00:03:44,690 ‫So one console.log has just the slash, 69 00:03:44,690 --> 00:03:48,010 ‫and the second one has /favicon. 70 00:03:48,010 --> 00:03:50,220 ‫So when we're using a browser, 71 00:03:50,220 --> 00:03:53,180 ‫the browser automatically performs a request 72 00:03:53,180 --> 00:03:55,760 ‫for the website's favicon. 73 00:03:55,760 --> 00:03:59,000 ‫Alright, so in this case we don't have any favicon, 74 00:03:59,000 --> 00:04:01,950 ‫and we just ignore this, okay? 75 00:04:01,950 --> 00:04:04,340 ‫So this doesn't really matter. 76 00:04:04,340 --> 00:04:08,730 ‫Now let's say that we write /overview here. 77 00:04:11,010 --> 00:04:12,290 ‫So let's see what we get then. 78 00:04:12,290 --> 00:04:16,840 ‫So we get /overview, and /favicon, okay. 79 00:04:16,840 --> 00:04:20,980 ‫So again, the one that matters is the /overview. 80 00:04:20,980 --> 00:04:23,270 ‫So for simple URLs like this one, 81 00:04:23,270 --> 00:04:26,500 ‫we actually don't even need the URL module, 82 00:04:26,500 --> 00:04:29,950 ‫but we will need it for more complex stuff. 83 00:04:29,950 --> 00:04:33,020 ‫So let's say that we have, for example, 84 00:04:33,020 --> 00:04:36,830 ‫specifying the ID 23, 85 00:04:36,830 --> 00:04:40,140 ‫and some other parameter here. 86 00:04:40,140 --> 00:04:42,960 ‫Let's say this is something like this. 87 00:04:42,960 --> 00:04:47,050 ‫And I'm sure you have seen this kind of pattern in a URL 88 00:04:47,050 --> 00:04:49,720 ‫where we can specify parameters. 89 00:04:49,720 --> 00:04:51,453 ‫So if we have something like this, 90 00:04:52,920 --> 00:04:54,930 ‫then you see that the URL is this. 91 00:04:54,930 --> 00:04:58,640 ‫And what the URL module will help us doing 92 00:04:58,640 --> 00:05:03,030 ‫is to basically parse these parameters 93 00:05:03,030 --> 00:05:07,283 ‫and their values into a nicely-formatted object, okay? 94 00:05:08,230 --> 00:05:09,810 ‫So for now we're actually not gonna use 95 00:05:09,810 --> 00:05:12,500 ‫the URL module just yet. 96 00:05:12,500 --> 00:05:14,163 ‫We're gonna need it a bit later. 97 00:05:15,800 --> 00:05:19,110 ‫So, let's now actually implement the routing, 98 00:05:19,110 --> 00:05:20,630 ‫and it's very very simple. 99 00:05:20,630 --> 00:05:24,333 ‫So basically all we need is a big if else statement here. 100 00:05:25,550 --> 00:05:30,550 ‫Okay, so first of all I'm actually going to save req.url 101 00:05:33,300 --> 00:05:35,100 ‫into a variable, oh, sorry, 102 00:05:35,100 --> 00:05:37,863 ‫into a variable called pathName. 103 00:05:45,760 --> 00:05:48,750 ‫Okay, and so now, based on that path name, 104 00:05:48,750 --> 00:05:51,240 ‫we will take decisions. 105 00:05:51,240 --> 00:05:54,370 ‫So basically, send back different responses. 106 00:05:54,370 --> 00:05:59,370 ‫So, if the pathName is equal to overview, or /overview, 107 00:06:05,500 --> 00:06:09,653 ‫well, then let's send something to the client. 108 00:06:11,340 --> 00:06:15,293 ‫And let's just say, this is the OVERVIEW. 109 00:06:20,610 --> 00:06:25,610 ‫Else if the pathName is equal to product, 110 00:06:28,662 --> 00:06:32,200 ‫/product, well, then all we want to do 111 00:06:35,334 --> 00:06:37,790 ‫is to send this is the PRODUCT. 112 00:06:37,790 --> 00:06:42,790 ‫Okay, now in case we are at the root of the site. 113 00:06:44,530 --> 00:06:48,520 ‫So basically, like this, 114 00:06:48,520 --> 00:06:50,913 ‫well, then we also want to show the overview. 115 00:06:51,770 --> 00:06:54,900 ‫And so let's add that here as well. 116 00:06:54,900 --> 00:06:59,900 ‫So pathName equals, and slash. 117 00:07:01,360 --> 00:07:02,970 ‫And then the or. 118 00:07:02,970 --> 00:07:07,970 ‫So if the pathName is either the root or /overview, 119 00:07:08,410 --> 00:07:11,010 ‫then sent back that as an OVERVIEW, 120 00:07:11,010 --> 00:07:14,690 ‫or if it's product, well then send back PRODUCT. 121 00:07:14,690 --> 00:07:18,780 ‫So very simple stuff, and let's test it out now. 122 00:07:18,780 --> 00:07:22,540 ‫Actually, we can just reload, or instead, actually, 123 00:07:22,540 --> 00:07:27,103 ‫we need to first finish this again, and start it all again. 124 00:07:29,510 --> 00:07:33,220 ‫So it's working already, this is the OVERVIEW. 125 00:07:33,220 --> 00:07:34,643 ‫If I now say product, 126 00:07:37,240 --> 00:07:40,130 ‫then this is a PRODUCT, perfect. 127 00:07:40,130 --> 00:07:43,823 ‫Now just to check the last one, 128 00:07:45,520 --> 00:07:48,143 ‫overview gives us OVERVIEW again. 129 00:07:49,280 --> 00:07:54,280 ‫Okay, now let's say that we actually request something 130 00:07:54,520 --> 00:07:56,120 ‫that we didn't handle. 131 00:07:56,120 --> 00:07:58,820 ‫So something like this. 132 00:07:58,820 --> 00:08:00,240 ‫So, what happens? 133 00:08:00,240 --> 00:08:03,660 ‫Well, as you see, this wheel here 134 00:08:03,660 --> 00:08:06,300 ‫doesn't really stop spinning. 135 00:08:06,300 --> 00:08:10,020 ‫So it's trying to send back a response, but it really can't. 136 00:08:10,020 --> 00:08:13,520 ‫So the server doesn't know what to do in this situation, 137 00:08:13,520 --> 00:08:15,963 ‫because we didn't add any fallback. 138 00:08:16,800 --> 00:08:19,480 ‫So let's stop this poor guy here, 139 00:08:19,480 --> 00:08:24,480 ‫and basically simply add an else statement here. 140 00:08:25,870 --> 00:08:29,740 ‫So if it's not the root, not overview, not product, 141 00:08:29,740 --> 00:08:33,243 ‫well, then we want to say that this page could not be found. 142 00:08:38,930 --> 00:08:40,113 ‫Page not found. 143 00:08:41,360 --> 00:08:44,610 ‫Now, many times when on the website 144 00:08:44,610 --> 00:08:47,540 ‫you try to open a page that's not found, 145 00:08:47,540 --> 00:08:51,480 ‫you see this 404 error, right? 146 00:08:51,480 --> 00:08:55,950 ‫And that is actually something called an HTTP status code. 147 00:08:55,950 --> 00:08:59,870 ‫And so since we're sending back a response, 148 00:08:59,870 --> 00:09:04,030 ‫we can also add the status code to the response. 149 00:09:04,030 --> 00:09:08,030 ‫And so for that, we can use multiple ways of doing that, 150 00:09:08,030 --> 00:09:10,147 ‫but I'm going to use one that can do more 151 00:09:10,147 --> 00:09:12,000 ‫than just status code, 152 00:09:12,000 --> 00:09:14,420 ‫and I'm going to show you why in a second. 153 00:09:14,420 --> 00:09:17,163 ‫But for now, I'm just saying here, 154 00:09:18,120 --> 00:09:23,057 ‫res.write the head, and then 404, okay? 155 00:09:24,770 --> 00:09:26,123 ‫Let's test that now. 156 00:09:29,020 --> 00:09:30,433 ‫And so what happens here? 157 00:09:31,990 --> 00:09:34,120 ‫Ah, in this nothing's happening, 158 00:09:34,120 --> 00:09:37,423 ‫because I didn't restart the server. 159 00:09:42,940 --> 00:09:47,300 ‫So, page not found. 160 00:09:47,300 --> 00:09:51,840 ‫So great, now what about the 404 status code? 161 00:09:51,840 --> 00:09:56,480 ‫Well, we can hit Inspect here to open the Dev Tools, 162 00:09:56,480 --> 00:10:00,363 ‫or instead what I like to do is to hit Command + J, 163 00:10:01,270 --> 00:10:04,250 ‫and that will then open up the Dev Tools as well. 164 00:10:04,250 --> 00:10:07,680 ‫On Windows it's probably Alt + Control + J, 165 00:10:07,680 --> 00:10:11,980 ‫or you can just come to View, and then Developer, 166 00:10:11,980 --> 00:10:15,950 ‫and Developer Tools like this, okay? 167 00:10:15,950 --> 00:10:18,120 ‫Then head over to the Network tab, 168 00:10:18,120 --> 00:10:20,600 ‫but actually you can already see it like here. 169 00:10:20,600 --> 00:10:24,373 ‫So the server responded with a status code of 404 not found. 170 00:10:25,360 --> 00:10:29,833 ‫But also you can see it in the network, and just reload it, 171 00:10:30,880 --> 00:10:33,360 ‫and then you see 404 here, 172 00:10:33,360 --> 00:10:37,680 ‫and the red text to show that there was some error. 173 00:10:37,680 --> 00:10:41,870 ‫Okay, now something more that this writeHead here can do 174 00:10:41,870 --> 00:10:44,140 ‫is to also send headers. 175 00:10:44,140 --> 00:10:47,573 ‫And to send headers, we need to specify an object here, 176 00:10:48,452 --> 00:10:51,600 ‫and then in there we put the headers that we want to send. 177 00:10:51,600 --> 00:10:54,690 ‫Now what actually is a header? 178 00:10:54,690 --> 00:10:59,480 ‫Well, an HTTP header is basically a piece of information 179 00:10:59,480 --> 00:11:02,860 ‫about the response that we are sending back. 180 00:11:02,860 --> 00:11:05,390 ‫And again, you will learn a lot more about this 181 00:11:05,390 --> 00:11:08,120 ‫in a later section of the course, okay? 182 00:11:08,120 --> 00:11:10,530 ‫For now just know that there are many different 183 00:11:10,530 --> 00:11:13,290 ‫standard headers that we can specify 184 00:11:13,290 --> 00:11:16,120 ‫to inform the browser or whatever client 185 00:11:16,120 --> 00:11:20,230 ‫is receiving a response about the response itself. 186 00:11:20,230 --> 00:11:22,210 ‫For example, one of the standard headers 187 00:11:22,210 --> 00:11:24,763 ‫is to inform the browser of the content type. 188 00:11:25,990 --> 00:11:27,843 ‫So we can say Content-Type, 189 00:11:29,820 --> 00:11:33,683 ‫and set it to text/html. 190 00:11:35,593 --> 00:11:36,480 ‫And so just like this, 191 00:11:36,480 --> 00:11:39,930 ‫the browser is now expecting some HTML. 192 00:11:39,930 --> 00:11:42,890 ‫And so what we can do now, for example here, 193 00:11:42,890 --> 00:11:46,020 ‫is to do an h1 element 194 00:11:46,020 --> 00:11:50,400 ‫in order to basically send back HTML. 195 00:11:50,400 --> 00:11:53,153 ‫So, just like this. 196 00:11:53,990 --> 00:11:55,770 ‫And because of this header here, 197 00:11:55,770 --> 00:12:00,150 ‫the browser is now actually expecting HTML to come in. 198 00:12:00,150 --> 00:12:03,490 ‫We can also specify our own made up headers. 199 00:12:03,490 --> 00:12:08,203 ‫So let's say my-own-header, 200 00:12:11,560 --> 00:12:15,640 ‫hello-world, so something like this, okay? 201 00:12:15,640 --> 00:12:18,670 ‫Now what matters here is that these headers 202 00:12:18,670 --> 00:12:21,960 ‫and also the status code always need to be set 203 00:12:21,960 --> 00:12:25,550 ‫before we send out the response. 204 00:12:25,550 --> 00:12:28,350 ‫Okay, so we never can send headers 205 00:12:28,350 --> 00:12:30,573 ‫after the response content itself. 206 00:12:32,490 --> 00:12:35,090 ‫So let's try that again, or actually, 207 00:12:35,090 --> 00:12:38,800 ‫I should restart the server. 208 00:12:38,800 --> 00:12:40,733 ‫And so let's try again now. 209 00:12:42,210 --> 00:12:44,340 ‫And indeed, we still get our error, 210 00:12:44,340 --> 00:12:45,810 ‫but now it looks different. 211 00:12:45,810 --> 00:12:49,470 ‫So now we actually have an h1 element here. 212 00:12:49,470 --> 00:12:54,470 ‫And if we also on the Network tab click on this request, 213 00:12:55,560 --> 00:12:58,350 ‫let's actually increase it a little bit here. 214 00:12:58,350 --> 00:13:00,290 ‫So I'm not sure if you can really see this, 215 00:13:00,290 --> 00:13:04,430 ‫but when we click on this request here, 216 00:13:04,430 --> 00:13:08,040 ‫we can actually also see the response headers. 217 00:13:08,040 --> 00:13:10,490 ‫And so here we have the content type 218 00:13:10,490 --> 00:13:14,120 ‫that we specified as text/html, 219 00:13:14,120 --> 00:13:15,340 ‫and then the other header, 220 00:13:15,340 --> 00:13:19,100 ‫so my own header is set to hello-world. 221 00:13:19,100 --> 00:13:22,930 ‫And so again, we can use this to send some metadata 222 00:13:22,930 --> 00:13:26,140 ‫about the response itself, alright? 223 00:13:26,140 --> 00:13:29,560 ‫Now there are also some request headers, 224 00:13:29,560 --> 00:13:32,870 ‫and these were set by the browser automatically, 225 00:13:32,870 --> 00:13:35,400 ‫but for now don't worry about these. 226 00:13:35,400 --> 00:13:39,300 ‫What matters is that we specified 227 00:13:39,300 --> 00:13:42,520 ‫that the content that we're sending is HTML, 228 00:13:42,520 --> 00:13:44,960 ‫and also for example the status code 229 00:13:44,960 --> 00:13:49,100 ‫that we sent back is 404 not found, okay? 230 00:13:49,100 --> 00:13:52,580 ‫Now, let's just get rid of this. 231 00:13:52,580 --> 00:13:55,660 ‫Open it up, and so now you see, 232 00:13:55,660 --> 00:13:59,390 ‫we have a status of 200, which means OK, 233 00:13:59,390 --> 00:14:02,680 ‫and these other headers, they are actually gone. 234 00:14:02,680 --> 00:14:04,380 ‫Okay, so now this response 235 00:14:04,380 --> 00:14:07,800 ‫does not have these other two headers, right? 236 00:14:07,800 --> 00:14:10,400 ‫And we see the 200 OK now, 237 00:14:10,400 --> 00:14:15,400 ‫and so yeah, everything's working fine right now. 238 00:14:16,200 --> 00:14:18,980 ‫We implemented the basic routing, 239 00:14:18,980 --> 00:14:21,620 ‫so for different path names, 240 00:14:21,620 --> 00:14:24,700 ‫we have now different actions. 241 00:14:24,700 --> 00:14:28,330 ‫Just one final thing that I wanted to say about routing 242 00:14:28,330 --> 00:14:31,710 ‫is that these routes that we defined here in our code 243 00:14:31,710 --> 00:14:35,360 ‫and the routes that we put in the URLs in the browser 244 00:14:35,360 --> 00:14:38,530 ‫have nothing to do with the files and folders 245 00:14:38,530 --> 00:14:41,710 ‫in our project's file system, okay? 246 00:14:41,710 --> 00:14:43,910 ‫So as a beginner you might think 247 00:14:43,910 --> 00:14:47,390 ‫that if we open /templates for example, 248 00:14:47,390 --> 00:14:50,070 ‫that that would then open the Templates folder 249 00:14:50,070 --> 00:14:52,260 ‫that we have in our file system. 250 00:14:52,260 --> 00:14:54,890 ‫But of course, that is not the case. 251 00:14:54,890 --> 00:14:57,690 ‫So if we wanted to have a templates route, 252 00:14:57,690 --> 00:14:59,460 ‫well, then we would have to define 253 00:14:59,460 --> 00:15:01,970 ‫that in our router, basically, 254 00:15:01,970 --> 00:15:05,633 ‫and then send a special response for only that route. 255 00:15:06,560 --> 00:15:10,340 ‫Anyway, I think that this enough for one video. 256 00:15:10,340 --> 00:15:12,143 ‫See you in the next one.