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.