1
00:00:02,120 --> 00:00:04,810
Now, before we now conclude this module,

2
00:00:04,810 --> 00:00:08,330
I want to split my code even a bit more.

3
00:00:08,330 --> 00:00:10,650
And I want to use a new feature

4
00:00:10,650 --> 00:00:12,820
offered by the Express package,

5
00:00:12,820 --> 00:00:14,260
which comes in handy

6
00:00:14,260 --> 00:00:16,260
if you have a lot of routes.

7
00:00:16,260 --> 00:00:20,283
So a lot of handlers as we have them here in app JS.

8
00:00:21,390 --> 00:00:26,170
Often you want to group your routes in different files

9
00:00:26,170 --> 00:00:30,300
by feature or by responsibility.

10
00:00:30,300 --> 00:00:33,510
Now, for example, here in this basic demo website,

11
00:00:33,510 --> 00:00:34,930
we have a lot of routes

12
00:00:34,930 --> 00:00:37,730
that deal with our restaurants

13
00:00:37,730 --> 00:00:41,960
here at the detail page and the recommend page,

14
00:00:41,960 --> 00:00:44,550
and the post route and on.

15
00:00:44,550 --> 00:00:46,650
But we also have some pages

16
00:00:46,650 --> 00:00:50,200
that are of a more general nature,

17
00:00:50,200 --> 00:00:54,010
for example, about or the starting page.

18
00:00:54,010 --> 00:00:56,100
These are very simple routes

19
00:00:56,100 --> 00:01:00,510
that are not directly related to getting

20
00:01:00,510 --> 00:01:02,103
or storing restaurants.

21
00:01:03,510 --> 00:01:04,660
And therefore,

22
00:01:04,660 --> 00:01:07,300
you might want to split these different routes

23
00:01:07,300 --> 00:01:09,230
into different files.

24
00:01:09,230 --> 00:01:10,470
And for this, as I mentioned,

25
00:01:10,470 --> 00:01:14,530
Express has an extra feature that helps us with that.

26
00:01:14,530 --> 00:01:16,350
It has a so-called a router

27
00:01:16,350 --> 00:01:20,060
which allows us to group and split our routes,

28
00:01:20,060 --> 00:01:24,133
which again, can make bigger project easier to maintain.

29
00:01:25,590 --> 00:01:29,390
And for that, I'll add a new folder in this project,

30
00:01:29,390 --> 00:01:32,740
and it is quite common that as your project grows,

31
00:01:32,740 --> 00:01:34,530
you add more and more folders

32
00:01:34,530 --> 00:01:36,880
to hold different code files.

33
00:01:36,880 --> 00:01:39,823
And I'll name this new folder, routes,

34
00:01:40,660 --> 00:01:42,620
because I want to store my routes,

35
00:01:42,620 --> 00:01:45,623
my route configuration in that folder.

36
00:01:46,700 --> 00:01:50,320
And in there I'll add two files,

37
00:01:50,320 --> 00:01:54,460
I'll add a restaurants.js file,

38
00:01:54,460 --> 00:01:59,460
and I will add a default.js file.

39
00:01:59,800 --> 00:02:01,743
Both names are up to you.

40
00:02:02,850 --> 00:02:06,280
Now, default should hold my standard routes,

41
00:02:06,280 --> 00:02:09,870
which are not directly related to restaurants

42
00:02:09,870 --> 00:02:11,970
and restaurants JS on the other hand

43
00:02:11,970 --> 00:02:16,610
should hold my restaurant's specific routes and pages.

44
00:02:16,610 --> 00:02:19,300
Now I'll start with default JS

45
00:02:19,300 --> 00:02:22,680
and I'll get my main route here,

46
00:02:22,680 --> 00:02:25,190
and move that into default JS,

47
00:02:25,190 --> 00:02:28,233
this main slash nothing route.

48
00:02:29,980 --> 00:02:33,100
And I'll do the same here for the about route

49
00:02:33,100 --> 00:02:36,730
and cut this from app JS

50
00:02:36,730 --> 00:02:39,563
and move that into default JS as well.

51
00:02:41,200 --> 00:02:45,130
Now we don't have the app object available in here,

52
00:02:45,130 --> 00:02:47,370
and I also don't want to create it

53
00:02:47,370 --> 00:02:49,280
in that default JS file

54
00:02:49,280 --> 00:02:52,800
because we should only create such an Express app once

55
00:02:52,800 --> 00:02:56,410
and that should happen in our main app file.

56
00:02:56,410 --> 00:02:58,713
So I don't want to move that code.

57
00:03:00,010 --> 00:03:02,870
Instead, to allow us to outsource routes

58
00:03:02,870 --> 00:03:03,940
into different files,

59
00:03:03,940 --> 00:03:07,000
Express has a standalone feature.

60
00:03:07,000 --> 00:03:11,620
And for this, in default JS, I'll import Express.

61
00:03:13,300 --> 00:03:17,403
So I'll again, require Express as I did it before,

62
00:03:18,310 --> 00:03:22,400
but I will not execute it as a function.

63
00:03:22,400 --> 00:03:25,350
But instead, on this Express object,

64
00:03:25,350 --> 00:03:29,010
which it also is, there is a router function

65
00:03:29,010 --> 00:03:30,860
which we can execute.

66
00:03:30,860 --> 00:03:34,160
And this gives us a router object,

67
00:03:34,160 --> 00:03:37,020
which works a bit like app,

68
00:03:37,020 --> 00:03:39,423
but internally is a bit different.

69
00:03:40,910 --> 00:03:42,740
Now, since it works a bit like app,

70
00:03:42,740 --> 00:03:44,860
we can replace app with it.

71
00:03:44,860 --> 00:03:49,700
And just like app router also has get and post methods

72
00:03:49,700 --> 00:03:53,013
to register different route handlers.

73
00:03:55,420 --> 00:03:57,290
So we can leave that code as it is,

74
00:03:57,290 --> 00:03:59,723
and just use router instead of app.

75
00:04:01,530 --> 00:04:05,390
Now I want to export my configured router,

76
00:04:05,390 --> 00:04:07,670
where I added these routes,

77
00:04:07,670 --> 00:04:10,170
from that default JS file

78
00:04:10,170 --> 00:04:13,460
so that I can bring it back into app JS,

79
00:04:13,460 --> 00:04:16,890
so that I can use this router in app JS.

80
00:04:16,890 --> 00:04:20,040
And for this I'll again use module exports

81
00:04:20,040 --> 00:04:22,173
and export router like this.

82
00:04:23,200 --> 00:04:25,500
Router already is an object,

83
00:04:25,500 --> 00:04:27,980
we now just added our configuration.

84
00:04:27,980 --> 00:04:29,660
And now with line here,

85
00:04:29,660 --> 00:04:33,293
we are exporting this configured router object.

86
00:04:36,370 --> 00:04:38,390
Now that's step number one.

87
00:04:38,390 --> 00:04:41,040
Now in app JS, for the moment,

88
00:04:41,040 --> 00:04:43,590
I will leave all the other routes,

89
00:04:43,590 --> 00:04:48,590
but now I want to also merge in my router routes

90
00:04:48,630 --> 00:04:50,810
defined in default JS,

91
00:04:50,810 --> 00:04:53,030
I want to merge them into this app

92
00:04:53,030 --> 00:04:55,233
which also has these other routes.

93
00:04:56,310 --> 00:04:59,883
And that can be done with middleware again.

94
00:05:00,870 --> 00:05:03,350
First of all, I want to import these routes.

95
00:05:03,350 --> 00:05:05,070
So I want to require them.

96
00:05:05,070 --> 00:05:09,273
So right under resData, I'll add my defaultRoutes.

97
00:05:10,940 --> 00:05:13,430
I think that's a fitting name for this constant

98
00:05:13,430 --> 00:05:16,480
which will describe what will be stored in it,

99
00:05:16,480 --> 00:05:20,990
by requiring ./routes/default

100
00:05:20,990 --> 00:05:23,313
without a file extension as you learned.

101
00:05:24,500 --> 00:05:26,180
That will give us that router

102
00:05:26,180 --> 00:05:29,020
that contains our default routes,

103
00:05:29,020 --> 00:05:30,653
hence this constant name.

104
00:05:32,720 --> 00:05:36,700
And now after running through that standard middleware,

105
00:05:36,700 --> 00:05:40,140
which should execute for every incoming request,

106
00:05:40,140 --> 00:05:44,340
I want to add these default routes as handlers

107
00:05:44,340 --> 00:05:46,530
that should be considered,

108
00:05:46,530 --> 00:05:49,950
and that can be done with app.use again,

109
00:05:49,950 --> 00:05:52,800
and here, I just want to make it clear

110
00:05:52,800 --> 00:05:55,260
that every incoming request

111
00:05:55,260 --> 00:05:58,690
that starts with a slash

112
00:05:58,690 --> 00:06:01,600
should be handled by defaultRoutes,

113
00:06:03,120 --> 00:06:06,743
which we simply tell Express by adding this line.

114
00:06:08,070 --> 00:06:10,240
Now what's very important here is

115
00:06:10,240 --> 00:06:14,310
that with get and post and so on,

116
00:06:14,310 --> 00:06:18,760
the path that we added here as a first parameter value

117
00:06:18,760 --> 00:06:21,790
acted as an exact match.

118
00:06:21,790 --> 00:06:25,890
So, this route here will only become access

119
00:06:25,890 --> 00:06:29,053
if we have our domain slash restaurants.

120
00:06:31,490 --> 00:06:34,340
With 'use', that's different.

121
00:06:34,340 --> 00:06:39,130
This first parameter value here then acts as a filter

122
00:06:39,130 --> 00:06:43,540
which only checks for the beginning of the incoming path.

123
00:06:43,540 --> 00:06:46,270
So slash nothing, as I have it here,

124
00:06:46,270 --> 00:06:51,270
will become active for all incoming requests.

125
00:06:51,450 --> 00:06:54,950
And that simply means that all incoming requests

126
00:06:54,950 --> 00:06:59,340
will be forwarded to my defaultRoutes.

127
00:06:59,340 --> 00:07:02,820
So will be funneled through these routes.

128
00:07:02,820 --> 00:07:04,990
And if one of these routes matches,

129
00:07:04,990 --> 00:07:07,693
my incoming request will be done.

130
00:07:09,040 --> 00:07:11,550
Only if none of these routes here

131
00:07:11,550 --> 00:07:13,670
matches my incoming request,

132
00:07:13,670 --> 00:07:15,700
we'll go back into app JS

133
00:07:15,700 --> 00:07:19,060
and have a look at the other routes as well.

134
00:07:19,060 --> 00:07:21,630
And that's how we can define these routes

135
00:07:21,630 --> 00:07:23,300
in a different file

136
00:07:23,300 --> 00:07:25,980
and still include them in my main app,

137
00:07:25,980 --> 00:07:30,060
with help of 'use' and this built-in router feature,

138
00:07:30,060 --> 00:07:33,550
which turns out to be a built-in middleware

139
00:07:33,550 --> 00:07:37,790
that allows us to register our own custom routes

140
00:07:37,790 --> 00:07:39,233
in a different file.

141
00:07:40,800 --> 00:07:42,930
Hence, if you save everything here,

142
00:07:42,930 --> 00:07:45,080
this application works as before,

143
00:07:45,080 --> 00:07:48,710
and the starting and about page also works as before,

144
00:07:48,710 --> 00:07:51,353
but now we outsourced these routes.

145
00:07:52,510 --> 00:07:54,270
And now I want to do the same

146
00:07:54,270 --> 00:07:57,500
for my restaurant related routes.

147
00:07:57,500 --> 00:08:00,913
So I'll grab all the other routes which I have here,

148
00:08:02,020 --> 00:08:06,963
and cut this, and move that into restaurants JS.

149
00:08:10,070 --> 00:08:11,300
Now just as before,

150
00:08:11,300 --> 00:08:13,880
here, I want to use that Express router.

151
00:08:13,880 --> 00:08:17,810
So I will require Express here.

152
00:08:17,810 --> 00:08:21,950
And then create my router by accessing Express router

153
00:08:21,950 --> 00:08:24,073
and executing it as a function.

154
00:08:25,510 --> 00:08:30,510
And then we can replace app with router,

155
00:08:33,350 --> 00:08:36,023
just like that.

156
00:08:40,230 --> 00:08:42,743
And do that for all those routes.

157
00:08:46,290 --> 00:08:47,590
And then at the end, again,

158
00:08:47,590 --> 00:08:50,170
I'll export this configured router

159
00:08:50,170 --> 00:08:54,200
to make it available outside of this file as well.

160
00:08:54,200 --> 00:08:56,140
And back in app JS,

161
00:08:56,140 --> 00:08:59,640
we can now require that configuration file

162
00:08:59,640 --> 00:09:01,713
and the router there as well.

163
00:09:02,600 --> 00:09:05,387
So now I get my restaurantRoutes

164
00:09:06,720 --> 00:09:11,573
by requiring ./routes/restaurants.

165
00:09:12,730 --> 00:09:15,900
And I want to load those as well.

166
00:09:15,900 --> 00:09:19,410
And again, I want to funnel all incoming requests

167
00:09:19,410 --> 00:09:21,103
through these restaurantRoutes.

168
00:09:22,807 --> 00:09:25,530
First, I funnel them through defaultRoutes,

169
00:09:25,530 --> 00:09:27,240
but if I don't handle them there,

170
00:09:27,240 --> 00:09:30,080
I'll funnel them through restaurantRoutes.

171
00:09:31,280 --> 00:09:34,040
We could also change this starting filter

172
00:09:34,040 --> 00:09:36,640
and say only requests

173
00:09:36,640 --> 00:09:40,490
where the path starts with /restaurants

174
00:09:40,490 --> 00:09:43,100
should be handled by these routes.

175
00:09:43,100 --> 00:09:45,750
But that would be something I don't want to do

176
00:09:45,750 --> 00:09:50,570
because then, the paths defined in restaurants JS

177
00:09:50,570 --> 00:09:54,430
would be evaluated after this filter.

178
00:09:54,430 --> 00:09:57,520
So if I start with /restaurants here,

179
00:09:57,520 --> 00:10:00,810
then this route would only become active

180
00:10:00,810 --> 00:10:04,683
if the incoming path is /restaurants/restaurants,

181
00:10:06,200 --> 00:10:07,950
because I have it twice.

182
00:10:07,950 --> 00:10:11,240
The first time here in the filter in app JS

183
00:10:11,240 --> 00:10:12,993
and the second time here.

184
00:10:14,010 --> 00:10:16,240
Now, I could of course delete it here

185
00:10:16,240 --> 00:10:18,880
in the second time, and then this would work.

186
00:10:18,880 --> 00:10:21,040
But for other routes like recommend,

187
00:10:21,040 --> 00:10:22,420
we would have a problem

188
00:10:22,420 --> 00:10:24,650
because this would now only become active

189
00:10:24,650 --> 00:10:28,290
if I have restaurants/recommend,

190
00:10:28,290 --> 00:10:31,100
and that is simply not what my links

191
00:10:31,100 --> 00:10:36,000
in my views, in my templates are configured to lead to.

192
00:10:36,000 --> 00:10:37,970
So we would have to change all these links

193
00:10:37,970 --> 00:10:39,110
to make that work.

194
00:10:39,110 --> 00:10:41,270
And whilst that is something we could do,

195
00:10:41,270 --> 00:10:43,600
it's not something I want to do here.

196
00:10:43,600 --> 00:10:45,550
So I'll change this back

197
00:10:45,550 --> 00:10:48,583
and not apply any filter here.

198
00:10:50,570 --> 00:10:53,030
Now, there's also one other thing we have to do now,

199
00:10:53,030 --> 00:10:56,070
since I moved my route code,

200
00:10:56,070 --> 00:10:59,680
resData should not be included

201
00:10:59,680 --> 00:11:03,100
or required in app JS anymore.

202
00:11:03,100 --> 00:11:07,510
Instead, we are now using resData in restaurants JS

203
00:11:07,510 --> 00:11:10,140
because that is where this route is,

204
00:11:10,140 --> 00:11:12,563
where we use this resData object.

205
00:11:13,400 --> 00:11:15,950
Hence, I'll cut it here in app JS.

206
00:11:15,950 --> 00:11:20,610
And in restaurants JS, below this Express requirement,

207
00:11:20,610 --> 00:11:24,423
I want to require my restaurant-data utility file now.

208
00:11:25,440 --> 00:11:27,830
However, the path now changed

209
00:11:27,830 --> 00:11:31,610
because now this is relative from the restaurants JS file

210
00:11:31,610 --> 00:11:33,420
in the routes folder.

211
00:11:33,420 --> 00:11:35,830
And there is no util folder

212
00:11:35,830 --> 00:11:38,320
next to this restaurants JS file,

213
00:11:38,320 --> 00:11:42,200
instead we have to go up one level first.

214
00:11:42,200 --> 00:11:46,000
And we do this with dot dot slash.

215
00:11:46,000 --> 00:11:47,720
With that, we tell Express

216
00:11:47,720 --> 00:11:50,040
that's the file we're looking for

217
00:11:50,040 --> 00:11:52,900
is in a higher level folder.

218
00:11:52,900 --> 00:11:55,450
We go up one level

219
00:11:55,450 --> 00:11:58,730
and then in that new folder to which we moved,

220
00:11:58,730 --> 00:12:00,340
which is the project folder,

221
00:12:00,340 --> 00:12:04,363
we'll have the util folder where we then find this file.

222
00:12:05,240 --> 00:12:07,683
So that is an adjustment we have to make here.

223
00:12:09,000 --> 00:12:12,830
We also have to move this UUID requirement

224
00:12:12,830 --> 00:12:15,100
and cut this from app JS

225
00:12:15,100 --> 00:12:18,110
and use this in restaurants JS instead,

226
00:12:18,110 --> 00:12:22,123
because that is where I do use this UUID package now.

227
00:12:24,520 --> 00:12:27,640
And whilst we are already moving imports around,

228
00:12:27,640 --> 00:12:31,750
in app JS, we can now also get rid of this FS requirement

229
00:12:31,750 --> 00:12:35,173
because I'm not using the file system in here anymore.

230
00:12:36,150 --> 00:12:39,603
I am still using the path, but not the file system.

231
00:12:41,210 --> 00:12:43,700
And with that, if you save everything,

232
00:12:43,700 --> 00:12:47,400
all these routes still work just fine.

233
00:12:47,400 --> 00:12:50,950
But now we have our new structure

234
00:12:50,950 --> 00:12:54,650
where we split our code across different files.

235
00:12:54,650 --> 00:12:57,610
And again, for a simple project like this,

236
00:12:57,610 --> 00:13:00,190
this might not be required technically,

237
00:13:00,190 --> 00:13:02,430
and we might not gain much,

238
00:13:02,430 --> 00:13:05,770
but this is a crucial, fundamental concept

239
00:13:05,770 --> 00:13:08,900
which you have to understand and get used to

240
00:13:08,900 --> 00:13:11,690
because the bigger your projects will be,

241
00:13:11,690 --> 00:13:15,800
the more you want to split your code across multiple files

242
00:13:15,800 --> 00:13:20,630
to keep your individual files manageable and small.

243
00:13:20,630 --> 00:13:21,720
And in this course,

244
00:13:21,720 --> 00:13:24,330
we want to turn you into real web developers,

245
00:13:24,330 --> 00:13:26,080
hence this is a concept

246
00:13:26,080 --> 00:13:28,923
you also have to understand and know.

247
00:13:30,940 --> 00:13:33,760
With that, however, we are done.

248
00:13:33,760 --> 00:13:35,470
And now we achieved a lot

249
00:13:35,470 --> 00:13:38,350
and we have a fairly realistic,

250
00:13:38,350 --> 00:13:41,223
nontrivial Express application.