Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
20089
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.