1
00:00:00,510 --> 00:00:05,280
OK welcome back in this lesson we're going to pick right up where we left off and continue to talk about

2
00:00:05,280 --> 00:00:08,110
routing and express a three main objectives.

3
00:00:08,160 --> 00:00:13,560
The first one is to show what is called the splatt or Star Route matcher.

4
00:00:13,860 --> 00:00:17,250
And then I want you to write routes containing route parameters.

5
00:00:17,250 --> 00:00:20,650
So we'll talk about how we do that what route parameters are.

6
00:00:20,700 --> 00:00:24,220
And then lastly I want to have a quick discussion about Raut order.

7
00:00:24,630 --> 00:00:25,650
Let's get started.

8
00:00:25,650 --> 00:00:29,790
I'm using the exact same first express app that we used before.

9
00:00:29,820 --> 00:00:31,150
It's just a single act.

10
00:00:31,230 --> 00:00:31,700
Yes.

11
00:00:31,740 --> 00:00:39,570
And a node mandrels directory with the Express installed APTA yes has our Hi There are by and are slash

12
00:00:39,570 --> 00:00:43,990
dog routes and we're just going to continue to add to this in this lesson.

13
00:00:44,190 --> 00:00:50,010
The first of those objectives that I'll hit is introducing the splatt or Star Route matcher before us

14
00:00:50,010 --> 00:00:51,040
or you any new code.

15
00:00:51,090 --> 00:00:55,510
I'm just going to start up the server so node I've done yes.

16
00:00:55,740 --> 00:01:00,960
Make sure it starts ok then I'm going to open up the tab where I'm actually visiting the app and I want

17
00:01:00,960 --> 00:01:02,390
to show you this message first.

18
00:01:02,460 --> 00:01:07,290
So this happens when you try to access one of your applications when the server isn't running at all

19
00:01:07,620 --> 00:01:09,110
but the server is running now.

20
00:01:09,120 --> 00:01:15,700
So if I refresh now I get my hi there or if I go to slash Doug I get me now.

21
00:01:15,930 --> 00:01:23,680
But when I want to show is if I go to a route that doesn't exist like Slash dogs and I hit enter and

22
00:01:23,700 --> 00:01:29,670
I showed this earlier I get a cannot get slash dogs and that will happen for whatever route that I go

23
00:01:29,670 --> 00:01:33,920
to unless it's one of the three that we've defined.

24
00:01:34,740 --> 00:01:38,700
Slash dog and slash by.

25
00:01:39,270 --> 00:01:44,450
So if we want to have some sort of catchall some sort of message that we respond to every other route

26
00:01:44,700 --> 00:01:49,200
except for by dog and the route we can use the star.

27
00:01:49,210 --> 00:01:58,440
So that looks like this will do an apt get and we just get star and we proceed with everything else

28
00:01:58,500 --> 00:02:01,300
exactly the same.

29
00:02:01,740 --> 00:02:10,570
And instead of here we'll just do a red dot and you are a star just like that and save.

30
00:02:10,980 --> 00:02:13,680
So this code will be triggered this line here will run.

31
00:02:13,680 --> 00:02:21,180
Whenever our app gets any get request to any you know aside from these three that we've already defined

32
00:02:21,630 --> 00:02:24,800
so I'll show you that now you have to restart the server.

33
00:02:25,710 --> 00:02:27,380
Ok restarted it.

34
00:02:27,690 --> 00:02:29,850
Refresh the page nothing should change.

35
00:02:29,850 --> 00:02:35,500
But now if I go to some random chipper ish route and I hit enter I get you are a star.

36
00:02:35,940 --> 00:02:37,500
But my other routes are unchanged.

37
00:02:37,530 --> 00:02:47,550
If I go to slash that still works if I go to slash dog that still works but if I go to jibberish I get

38
00:02:47,550 --> 00:02:49,260
you are a star.

39
00:02:49,260 --> 00:02:54,810
This is especially useful if you want to have some sort of error message or area of web page that you

40
00:02:54,810 --> 00:03:00,120
show a user anytime they try and access a route that isn't defined or one that you're not expecting

41
00:03:00,210 --> 00:03:04,960
you can show some sort of message or some HDMI template that says Page Not Found.

42
00:03:05,100 --> 00:03:11,430
Let's go back now to our editor and I'm going to try something where I'm going to copy this or cut it

43
00:03:11,760 --> 00:03:16,410
and move it above the other routes and just save it so don't change anything.

44
00:03:16,410 --> 00:03:23,100
Aside from the order where now my star route the catchall comes first and then I'm going to restart

45
00:03:23,100 --> 00:03:26,610
my server Control-C and then up arrow.

46
00:03:26,610 --> 00:03:32,490
Now I'm going to go back and refresh the page and this shouldn't change because this is still jibberish

47
00:03:32,500 --> 00:03:32,570
.

48
00:03:32,640 --> 00:03:36,290
So it's still hitting that catch all route and not hitting any of the other routes.

49
00:03:36,480 --> 00:03:43,360
But if I try and go to the root page I still get you are a star if I try and go to slash dog I get your

50
00:03:43,360 --> 00:03:48,090
a star and if I try to go to slash buy I also get your star.

51
00:03:48,150 --> 00:03:53,460
So this gets at that third objective which is I wanted to have a discussion about the order of routes

52
00:03:53,850 --> 00:03:57,860
and that discussion boils down to this order of route's matters.

53
00:03:58,140 --> 00:04:04,380
So in this case if I put this catch all out the star that matches everything if I put that first then

54
00:04:04,470 --> 00:04:06,620
nothing else will be matched ever.

55
00:04:06,630 --> 00:04:12,780
The key concept is that the first route that matches a given request is the only route that will be

56
00:04:12,780 --> 00:04:13,240
run.

57
00:04:13,380 --> 00:04:16,240
So for one request we'll never have this code run.

58
00:04:16,260 --> 00:04:22,000
And then this code if one of these callbacks is running if it's being triggered then we're done.

59
00:04:22,110 --> 00:04:26,930
So that request has then been handled and it never moves on to these other routes.

60
00:04:27,390 --> 00:04:35,070
But let's say and we going to move this back down to where it was let's say that this is my code and

61
00:04:35,070 --> 00:04:38,860
someone makes a request to slash dog.

62
00:04:38,880 --> 00:04:43,540
First thing that will happen is expressed is going to check if it matches this route.

63
00:04:43,680 --> 00:04:45,440
Was it a get request to slash.

64
00:04:45,450 --> 00:04:46,420
The answer is No.

65
00:04:46,620 --> 00:04:47,890
So then it checks this one.

66
00:04:47,940 --> 00:04:49,540
Was it a get request to buy.

67
00:04:49,740 --> 00:04:50,250
Nope.

68
00:04:50,370 --> 00:04:51,630
So then it checks this one.

69
00:04:51,630 --> 00:04:53,670
Was it a get request to slash dog.

70
00:04:53,670 --> 00:04:54,680
The answer is yes.

71
00:04:54,690 --> 00:04:57,030
So it runs this code and then it's done.

72
00:04:57,030 --> 00:04:59,180
It doesn't move on and check this one at the end.

73
00:04:59,430 --> 00:05:03,750
So of course I put this first it's problematic because it overrides any of the other routes that we've

74
00:05:03,750 --> 00:05:04,530
defined.

75
00:05:04,530 --> 00:05:10,400
And I'll just always respond with a star which although it makes for a great motivational Web site it's

76
00:05:10,410 --> 00:05:13,710
not the behavior that we're looking for in a real web app.

77
00:05:13,710 --> 00:05:18,870
And the last objective that I want to talk about which is definitely the most important one is something

78
00:05:18,870 --> 00:05:23,400
called route parameters to help introduce route parameters.

79
00:05:23,400 --> 00:05:29,200
I'm going to use Reddit dot com and show you some of its routes for those you who aren't familiar with

80
00:05:29,260 --> 00:05:33,000
readed I highly recommend that you avoided at all costs.

81
00:05:33,010 --> 00:05:34,460
Don't listen to what I'm about to say.

82
00:05:34,610 --> 00:05:39,860
You will lose all productivity in your life the way that it works is that people can post different

83
00:05:39,860 --> 00:05:43,230
posts whether it's a link or an image or a video or just some text.

84
00:05:43,370 --> 00:05:47,830
Two different subeditors and there are thousands and thousands of different subsets each one with a

85
00:05:47,830 --> 00:05:48,560
category.

86
00:05:48,700 --> 00:05:55,230
So right now I'm looking at the soccer subtended I could also go to the gaming one or to music or to

87
00:05:55,250 --> 00:05:56,970
funny or to news or movies.

88
00:05:57,110 --> 00:06:01,680
And each one of those has content that is related to that topic.

89
00:06:01,690 --> 00:06:08,760
So in this case I'm on soccer sub read it and noticed the route Reddit dot com slash are slash soccer

90
00:06:08,760 --> 00:06:09,170
.

91
00:06:09,340 --> 00:06:14,800
So when I asked the server for Reddit dot com slash slash Socker it parses the route and it realizes

92
00:06:14,810 --> 00:06:19,760
we're looking for soccer posts goes to the database gets all the soccer posts and sends them to me in

93
00:06:19,780 --> 00:06:20,760
the response.

94
00:06:20,770 --> 00:06:25,760
But as I mentioned earlier there are thousands and thousands of different subjects and I can assure

95
00:06:25,750 --> 00:06:31,290
you that Reddit is not set up like this where there's a route for every single read it.

96
00:06:31,430 --> 00:06:43,700
It's not apt get slash our slash soccer and I'll just shorten that and then another one for music and

97
00:06:43,690 --> 00:06:47,500
another one for movies and so on.

98
00:06:47,500 --> 00:06:48,900
Ten thousand plus times.

99
00:06:49,030 --> 00:06:50,710
That is not how red it works.

100
00:06:50,890 --> 00:06:52,750
This code is not dry at all.

101
00:06:52,750 --> 00:06:55,540
Remember dry stands for don't repeat yourself.

102
00:06:55,540 --> 00:06:58,060
In fact it's very wet write everything twice.

103
00:06:58,150 --> 00:07:00,910
Although it's more like write everything 10000 times.

104
00:07:01,120 --> 00:07:06,320
So rather than define a separate route for every single subset it we could define a pattern.

105
00:07:06,380 --> 00:07:07,870
And this is what red it does.

106
00:07:07,880 --> 00:07:13,430
They have a pattern that something like Slash or slash a sub it name.

107
00:07:14,180 --> 00:07:19,980
But if we just leave it like this as slash our slice of bread at name it will only match when I go to

108
00:07:20,240 --> 00:07:24,710
slash our slash Sublette it name and they match it exactly the same.

109
00:07:24,700 --> 00:07:29,610
Before I show you how we get around that when you go back to read it and click on one of the posts.

110
00:07:29,870 --> 00:07:33,970
So this post here I'm going to click on it and look at the route.

111
00:07:33,980 --> 00:07:35,310
So it's ready to come.

112
00:07:35,380 --> 00:07:44,150
Slash our slash soccor slash comments slash this crazy string it's an IED slash the title of the post

113
00:07:44,320 --> 00:07:45,550
or part of the title.

114
00:07:45,880 --> 00:07:52,150
And when you go to this route you get all of the comments that correspond to this post to the post that

115
00:07:52,150 --> 00:07:53,270
has that title.

116
00:07:53,320 --> 00:07:57,400
And of course there are millions and millions of different posts on Reddit and they don't each have

117
00:07:57,400 --> 00:07:58,790
their own route defined.

118
00:07:58,850 --> 00:08:07,810
So there's not a route that looks like this inside of the server code something like this would be insane

119
00:08:07,810 --> 00:08:09,780
to have for every single post.

120
00:08:10,030 --> 00:08:14,890
Especially because the posts are all created by users and nobody who's writing the code can anticipate

121
00:08:15,130 --> 00:08:17,920
all of those different posts.

122
00:08:17,920 --> 00:08:25,960
So instead we would want some sort of pattern where we have our slash sub read it name.

123
00:08:25,970 --> 00:08:36,800
In this case soccer slash comments slash and Id slash title and just like the one above where it had

124
00:08:36,790 --> 00:08:37,880
Sublette it name.

125
00:08:37,930 --> 00:08:43,220
This will only match if we literally type word for word character for character are such a subset it

126
00:08:43,220 --> 00:08:45,600
name slash comments slash ID slash title.

127
00:08:45,790 --> 00:08:51,670
So to make it into a pattern we make use of what are called route parameters or route variables and

128
00:08:51,670 --> 00:08:54,830
in other frameworks people call them path variables as well.

129
00:08:54,880 --> 00:08:56,670
They're very very simple to implement.

130
00:08:56,790 --> 00:09:02,900
If I want to define a pattern where we listen for a get request to slash our slash anything else afterwards

131
00:09:03,190 --> 00:09:05,200
any single Sabet it name.

132
00:09:05,400 --> 00:09:12,370
All you have to do is put a colon right there and that tells express to not actually match character

133
00:09:12,380 --> 00:09:18,340
for character subset of name but to make it a pattern where relistening for Slash are slash any word

134
00:09:18,430 --> 00:09:19,290
afterwards.

135
00:09:19,490 --> 00:09:26,470
So let me comment this one out for now and let's finish this up with our request and response and open

136
00:09:26,480 --> 00:09:32,350
it just like that and all it'll do is read is does send.

137
00:09:32,360 --> 00:09:40,470
Welcome to a subject and we'll just save that and restart our server.

138
00:09:41,440 --> 00:09:45,820
Now if I want to see this message I need to go to a route that matches this pattern.

139
00:09:45,940 --> 00:09:51,230
So let's go back and refresh and if we go to slide by we still get the same thing.

140
00:09:51,350 --> 00:09:53,670
If we go to that page we so get the same thing.

141
00:09:53,840 --> 00:10:01,340
But now if we go to slash our slash puppies I now get a message that says Welcome to a sub Reddit.

142
00:10:01,450 --> 00:10:09,310
So slash our slash puppies follows this pattern and so slash our slash soccer or any other subset that

143
00:10:09,320 --> 00:10:10,290
I could come up with.

144
00:10:10,630 --> 00:10:13,540
But it is important to note something like this wouldn't work.

145
00:10:13,630 --> 00:10:21,590
Slash our slash soccor slash hello that no longer works because this is a different pattern.

146
00:10:21,590 --> 00:10:26,480
So it's not like a wild card where it says slash or slash anything else afterwards.

147
00:10:26,500 --> 00:10:32,810
What it really means is match anything that comes in with Slash or slash any single thing following

148
00:10:32,810 --> 00:10:33,080
it.

149
00:10:33,110 --> 00:10:40,760
So not slash are slash at name slash something else but slash slash soccor slash slash puppies.

150
00:10:40,940 --> 00:10:43,920
And I'm saying slash are a lot and it's getting really annoying.

151
00:10:43,940 --> 00:10:47,650
So let's move on down here and I'll show you how we can convert this one.

152
00:10:47,650 --> 00:10:49,240
It looks exactly the same.

153
00:10:49,260 --> 00:10:54,400
We just put a colon in front of anything that we want to be a variable and anything that we want the

154
00:10:54,400 --> 00:10:57,340
user or the application to be able to change.

155
00:10:57,350 --> 00:11:00,950
So comments should always just be comments on every reddit post.

156
00:11:01,030 --> 00:11:07,330
It always is the name of the sub Reddit like soccer slash comments slash the ID slash the title of a

157
00:11:07,340 --> 00:11:13,020
post so comments its always there and this will now be matched if I go to a rout.

158
00:11:13,190 --> 00:11:20,740
Let's finish this out function request response must come up with a route to match this one.

159
00:11:20,740 --> 00:11:25,300
I got a little message here which is really nice from Cloud 9 telling me that it wasn't expecting this

160
00:11:25,310 --> 00:11:26,270
print to see.

161
00:11:26,330 --> 00:11:28,090
That's because I wasn't calling a method.

162
00:11:28,120 --> 00:11:37,730
So now let's do a red dot send and I'll just Welcome to the comments page just like that and all save

163
00:11:38,240 --> 00:11:42,290
and restart the server now to match this route.

164
00:11:42,350 --> 00:11:49,100
I need to go to slash our slash sublet it name slash comments slash an ID anything slash a title that

165
00:11:49,100 --> 00:11:50,450
can be anything as well.

166
00:11:50,990 --> 00:11:52,680
And let's do that now.

167
00:11:53,260 --> 00:11:58,180
We'll go to slash slash soccer slash comments slash any ID.

168
00:11:58,190 --> 00:12:00,980
We'll do one two three but it doesn't have to be numbers.

169
00:12:01,040 --> 00:12:02,050
It could be a word.

170
00:12:02,120 --> 00:12:03,170
It doesn't matter at all.

171
00:12:03,320 --> 00:12:13,270
And then slash a title like my first soccer game and if we hit Enter we now get Welcome to the comments

172
00:12:13,270 --> 00:12:14,090
page.

173
00:12:14,330 --> 00:12:18,640
But of course I can change this and make it some random string.

174
00:12:18,760 --> 00:12:22,600
And then another title that's a random string or just numbers.

175
00:12:22,820 --> 00:12:24,470
And I still match that pattern.

176
00:12:24,590 --> 00:12:30,200
So it's not checking for the fact that something is letters or words or has underscores or that it's

177
00:12:30,220 --> 00:12:32,590
at least 10 characters it doesn't care.

178
00:12:32,620 --> 00:12:33,930
There are ways of doing that.

179
00:12:34,070 --> 00:12:40,790
But all this cares about is a pattern of chunks of text followed by and divided by slashes the last

180
00:12:40,790 --> 00:12:46,100
and most important thing is how we access this data out instead of our route handler.

181
00:12:46,100 --> 00:12:52,910
So if I wanted to send a message here that was you know welcome to the soccer Sublette it when the user

182
00:12:52,900 --> 00:12:54,850
goes to slash slash soccer.

183
00:12:55,000 --> 00:12:56,620
But I want it to change too.

184
00:12:56,620 --> 00:12:57,900
Welcome to the puppies.

185
00:12:58,000 --> 00:13:00,710
So I've read it when they go to our slash puppies.

186
00:13:00,740 --> 00:13:02,530
I need a way to access that out.

187
00:13:02,520 --> 00:13:08,530
And you know what was the value of sublet it to him and expressed gives us a nice and easy way to do

188
00:13:08,540 --> 00:13:11,630
that instead of this request object.

189
00:13:11,620 --> 00:13:17,390
So far we've only been working with the response residents and but the request object contains all the

190
00:13:17,380 --> 00:13:20,610
information about the incoming request.

191
00:13:20,650 --> 00:13:26,840
Let's just do a simple con. log requests and we probably won't actually be able to see all that much

192
00:13:26,840 --> 00:13:30,990
because there's so much there that it will only print out a small subset of it.

193
00:13:31,050 --> 00:13:35,680
But let's just try and restart the server and hit this route.

194
00:13:35,690 --> 00:13:40,260
So our slash submit it name to soccer.

195
00:13:41,480 --> 00:13:44,580
And here you can see it actually does print the whole thing out.

196
00:13:45,010 --> 00:13:48,490
And so there's a lot of information coming from that request.

197
00:13:48,760 --> 00:13:50,430
That's all being printed out here.

198
00:13:50,720 --> 00:13:56,440
And what I'm looking for is something called request parameters which should be where we go right here

199
00:13:56,460 --> 00:13:56,680
.

200
00:13:56,870 --> 00:14:02,360
It's an object that contains all of the route parameters and their corresponding values.

201
00:14:02,360 --> 00:14:09,390
So in this case sub redit name is equal to Socker because I went to slash our slash soccer.

202
00:14:09,470 --> 00:14:16,490
So what we can do is let's do cancel that log requests stop harams rather than the entire thing and

203
00:14:16,490 --> 00:14:21,140
save and then refresh or restart the server.

204
00:14:21,240 --> 00:14:29,120
And now if I go to slash our slash hello it will say that subtended name is hello.

205
00:14:29,260 --> 00:14:32,180
They can do the same thing for puppies.

206
00:14:33,460 --> 00:14:35,050
And there we go.

207
00:14:35,090 --> 00:14:39,570
Let me show you the same thing when we have multiple path parameters like we do here.

208
00:14:40,040 --> 00:14:41,880
So I'll just put that right there.

209
00:14:41,920 --> 00:14:50,080
Save restart the server again and then will trigger this route by going to our slash puppies slash comments

210
00:14:50,500 --> 00:14:53,700
slash an ID slash title.

211
00:14:53,780 --> 00:14:57,670
My core is cute and hit enter and we get.

212
00:14:57,710 --> 00:14:59,090
Welcome to the Commons page.

213
00:14:59,140 --> 00:15:04,330
And if I look in the terminal I'll see that we have three different route parameters three different

214
00:15:04,380 --> 00:15:05,370
harams.

215
00:15:05,380 --> 00:15:11,270
Subset it name as puppies ID is 1 2 3 4 and title is my Corgi is cute.

216
00:15:11,310 --> 00:15:15,930
Wrap this up when we respond with Welcome to a subset it let's actually make it.

217
00:15:15,980 --> 00:15:17,840
Welcome to the puppy spreaded.

218
00:15:17,840 --> 00:15:20,210
Welcome to the whatever spreaded.

219
00:15:20,600 --> 00:15:24,640
And to make it a little bit more fun let's make sure it's all uppercase.

220
00:15:24,770 --> 00:15:35,920
So what we'll do is make a variable far and we'll call it sub it equals request up harams sub redit

221
00:15:35,960 --> 00:15:39,790
name has to match exactly what we called it here.

222
00:15:39,800 --> 00:15:42,510
Remember it's just inside of this request.

223
00:15:42,640 --> 00:15:47,060
Harams object rather than just responding with welcome to a subset it will do.

224
00:15:47,060 --> 00:15:51,940
Welcome to the space.

225
00:15:52,120 --> 00:16:02,130
Plus I've read it plus I've read it so that will be welcome to the puppies.

226
00:16:02,190 --> 00:16:04,990
Read it and it won't be uppercase.

227
00:16:05,140 --> 00:16:13,130
So to make that uppercase we can use to upper case we can do that here or we could do it right here

228
00:16:13,490 --> 00:16:20,530
on Sublette it and I'll get rid of that semi-colon and save and restart the server.

229
00:16:21,790 --> 00:16:24,460
Let's go back and trigger that route again.

230
00:16:24,560 --> 00:16:26,650
So this one won't trigger it.

231
00:16:26,650 --> 00:16:28,880
This is for the router that has multiple parameters.

232
00:16:29,030 --> 00:16:31,950
We just want our slush puppies and I get.

233
00:16:32,000 --> 00:16:32,950
Welcome to the puppy.

234
00:16:32,980 --> 00:16:33,480
Ready.

235
00:16:33,770 --> 00:16:42,340
Now if I do are slashed puppies or are slash dogs all grown up or cats and I now have a dynamic web

236
00:16:42,350 --> 00:16:43,130
page.

237
00:16:43,120 --> 00:16:48,280
All right so let's wrap this up really quickly and go back to when we use the star instead of a route

238
00:16:48,290 --> 00:16:49,070
definition.

239
00:16:49,220 --> 00:16:54,920
It will match anything that comes in at all and along with that the order that we define the route's

240
00:16:54,910 --> 00:16:55,580
matters.

241
00:16:55,630 --> 00:17:00,350
So if we put the star Routemaster up top no other routes will run below it.

242
00:17:00,500 --> 00:17:05,530
But if we put it at the bottom which is where it normally goes it will behave as a catch all sort of

243
00:17:05,540 --> 00:17:06,920
as an else statement.

244
00:17:07,100 --> 00:17:10,930
If no other route is matched otherwise match the star.

245
00:17:11,170 --> 00:17:16,600
Lastly we talked about route parameters which we can use to define a pattern in a route that doesn't

246
00:17:16,610 --> 00:17:19,400
have to be matched word for word or character for character.

247
00:17:19,490 --> 00:17:21,550
Just has to be matched in the same pattern.

248
00:17:21,740 --> 00:17:27,360
So something like this where I can have Slash are slash any subset it named after it.

249
00:17:27,590 --> 00:17:28,670
All right so that's it.

250
00:17:28,660 --> 00:17:33,040
So in the next video we're going to do another exercise and this time you'll be writing your own Express

251
00:17:33,050 --> 00:17:36,640
app from scratch and you'll be using rope harams in some of he wraps