1
00:00:00,300 --> 00:00:05,970
In this video you're going to learn how to set up a 4 0 4 page for your express server.

2
00:00:05,970 --> 00:00:10,400
So when things go well we'll still show the user the content they were looking for.

3
00:00:10,620 --> 00:00:15,510
But if someone provides that you are all and we're not sure what to show them we'll show them the fluoro

4
00:00:15,510 --> 00:00:17,340
for page instead.

5
00:00:17,370 --> 00:00:20,800
So right here local host three thousand forward slash help.

6
00:00:20,880 --> 00:00:25,280
That is something we explicitly setup support for in Express.

7
00:00:25,290 --> 00:00:29,070
Let's try another U.R.L. which is not going to work over here.

8
00:00:29,070 --> 00:00:34,650
That would be something like local host colon three thousand forward slash pretty much anything.

9
00:00:34,650 --> 00:00:36,970
As an example forward slash me.

10
00:00:37,320 --> 00:00:40,980
We do not have support for forward slash me in our server.

11
00:00:40,980 --> 00:00:46,770
And when I try to visit the page you can see that we get a generic text based error message and this

12
00:00:46,770 --> 00:00:51,180
is coming from Express cannot get forward slash me.

13
00:00:51,240 --> 00:00:57,720
So instead of showing this message we want to show a nice helpful page we could render some HDMI all

14
00:00:57,720 --> 00:01:03,420
to show them a message and we could even include links back to the home page so they can find a page

15
00:01:03,420 --> 00:01:08,000
that actually does exist and then look for whatever they're looking for again.

16
00:01:08,430 --> 00:01:14,070
Now to set up the four or four page four routes which we don't have support for We're gonna need to

17
00:01:14,070 --> 00:01:20,010
customize our Express application just a little bit what we need to do here is set up another route

18
00:01:20,010 --> 00:01:26,160
handler using app dot get we've used that plenty of times before to set up Route handlers like this

19
00:01:26,160 --> 00:01:32,850
one for the route this one for forward slash about forward slash help and forward slash whether at the

20
00:01:32,850 --> 00:01:40,380
end below all of those just before we start up the server we're gonna add one more call to app dot get

21
00:01:40,680 --> 00:01:44,400
and in a moment we'll talk about why it needs to come last.

22
00:01:44,490 --> 00:01:49,320
Now right here we're gonna pass in these same two arguments we've used every time that we called app

23
00:01:49,320 --> 00:01:57,020
dot get the first is the string the second is the function and that function is still gonna get called

24
00:01:57,030 --> 00:02:03,810
with the request object and the response object which we'll be able to use to do whatever it is we need

25
00:02:03,810 --> 00:02:04,660
to do.

26
00:02:04,740 --> 00:02:12,000
Now the real question here is what do we use as the U R L we're trying to match previously we explicitly

27
00:02:12,000 --> 00:02:14,250
typed out the URL for this.

28
00:02:14,250 --> 00:02:21,960
There is no one explicit match it's everything else everything that isn't listed up above to match everything

29
00:02:21,960 --> 00:02:22,290
else.

30
00:02:22,290 --> 00:02:28,890
EXPRESS provides us with the wild card character we can use in our you are L's and right here this means

31
00:02:28,890 --> 00:02:32,440
match anything that hasn't been matched so far.

32
00:02:32,450 --> 00:02:35,190
Now what do we want to do with all of that other stuff.

33
00:02:35,550 --> 00:02:41,070
Well in a few moments we'll render a real handlebars H UML page for the moment though we can just send

34
00:02:41,070 --> 00:02:43,410
back a message as text.

35
00:02:43,410 --> 00:02:51,000
So I'll use response dot send to send back a string saying something like my 4 0 4 page.

36
00:02:51,120 --> 00:02:53,130
Let's go ahead and save app dot J.

37
00:02:53,120 --> 00:02:55,080
S and see what happens.

38
00:02:55,080 --> 00:03:01,770
I'll refresh your forward slash me and what do I get I get my content I get my forum for page showing

39
00:03:01,770 --> 00:03:03,570
up if I refresh.

40
00:03:03,570 --> 00:03:10,290
Forward slash help I would expect to still see what I have here and if I refresh things that is exactly

41
00:03:10,470 --> 00:03:11,540
what's happening.

42
00:03:11,730 --> 00:03:15,410
So now we have to answer the question why does this work.

43
00:03:15,480 --> 00:03:21,510
Why does app dot get need to come last after all other routes are set up.

44
00:03:21,540 --> 00:03:27,600
Well this has to do with how Express is going to end up matching the incoming request with the correct

45
00:03:27,660 --> 00:03:32,920
route handler when Express gets an incoming request it starts to look for a match.

46
00:03:32,940 --> 00:03:36,230
So as an example let's use a forward slash help.

47
00:03:36,300 --> 00:03:40,900
Way up at the top it's going to look through how you set up the application in order.

48
00:03:40,950 --> 00:03:44,550
So first stop it's going to look for a match in the public folder.

49
00:03:44,610 --> 00:03:49,310
There is no forward slash help so it needs to continue looking for a match.

50
00:03:49,320 --> 00:03:52,520
Next up it looks at this handler for the route.

51
00:03:52,530 --> 00:03:53,710
This is not the route.

52
00:03:53,730 --> 00:03:55,510
So this is not a match.

53
00:03:55,530 --> 00:03:57,980
Next up it looks at Forward slash about.

54
00:03:57,990 --> 00:04:03,750
This is not a match either since the U.R.L. is forward slash help and then it looks at this one and

55
00:04:03,750 --> 00:04:09,960
this is a match forward slash help matches up with the U.R.L. on the incoming request.

56
00:04:10,050 --> 00:04:13,170
That means the help page gets rendered and it stops.

57
00:04:13,170 --> 00:04:19,620
It does not look at the other matching routes below because it already found its match so it doesn't

58
00:04:19,620 --> 00:04:22,250
need to continue to look and it won't.

59
00:04:22,260 --> 00:04:26,570
Now what happens for a page like a forward slash meet right here.

60
00:04:26,640 --> 00:04:31,440
It's once again going to start way up top it's going to look for a match in the public folder which

61
00:04:31,440 --> 00:04:38,340
it won't find it's then going to go through all of these routes none that match the route forward slash

62
00:04:38,340 --> 00:04:41,900
about forward slash help and forward slash weather.

63
00:04:42,030 --> 00:04:48,330
None of those are matches it then finds this root handler and with the wildcard character we're saying

64
00:04:48,390 --> 00:04:49,480
everything's a match.

65
00:04:49,500 --> 00:04:51,290
And that's exactly what happens.

66
00:04:51,360 --> 00:04:56,630
Forward slash me is considered a match and the 4 0 4 page gets sent back.

67
00:04:56,850 --> 00:04:57,770
So there we go.

68
00:04:57,810 --> 00:05:03,060
That's all it takes to set up a root handler for a forum for page Inn Express.

69
00:05:03,060 --> 00:05:09,260
Now the wild card character doesn't have to sit all alone there in the you are all and to explore that.

70
00:05:09,330 --> 00:05:14,520
Let's go ahead and work through one more example before I set you off on your challenge to actually

71
00:05:14,520 --> 00:05:17,640
render a HDL forum for page.

72
00:05:17,760 --> 00:05:20,610
Let's go ahead and start with forward slash help.

73
00:05:20,610 --> 00:05:25,770
So imagine that we have a Web site and forward slash help serves as a sort of starting point for our

74
00:05:25,770 --> 00:05:26,100
help.

75
00:05:26,100 --> 00:05:27,390
Documentation.

76
00:05:27,420 --> 00:05:31,200
There is no specific advice there but it links off to other articles.

77
00:05:31,260 --> 00:05:37,920
Maybe one of them is something like forward slash data we visit forward slash data and this is a real

78
00:05:37,920 --> 00:05:41,950
page which shows us some information about the data being used.

79
00:05:41,970 --> 00:05:48,510
Now maybe there are other you are owls after forward slash help that do not exist like forward slash

80
00:05:48,510 --> 00:05:50,910
help forward slash test.

81
00:05:50,910 --> 00:05:56,380
We don't have an article for that that doesn't exist in the 4 0 4 page shows up.

82
00:05:56,490 --> 00:06:02,370
Now we could continue to show the generic forum for page or we could show one to someone we know is

83
00:06:02,370 --> 00:06:08,010
trying to look for help because they are on forward slash help but are not finding the article they

84
00:06:08,010 --> 00:06:08,870
expected.

85
00:06:08,940 --> 00:06:14,520
This could allow our messaging to be a bit more specific and obviously it will allow us to explore a

86
00:06:14,520 --> 00:06:18,670
new technique with Express so over inside of our app.

87
00:06:18,720 --> 00:06:22,900
J.S. file just before our forum for handler.

88
00:06:22,920 --> 00:06:28,110
We're gonna add just one more call to app doc get right here.

89
00:06:28,240 --> 00:06:32,790
You are well followed by the function and this function like all of them.

90
00:06:32,790 --> 00:06:35,430
We get the request and the response.

91
00:06:35,430 --> 00:06:41,010
Now we are gonna use the wildcard character inside of here but it's not going to be the only thing I'm

92
00:06:41,010 --> 00:06:45,480
actually going to start with forward slash help forward slash.

93
00:06:45,480 --> 00:06:48,120
Then the wild card character.

94
00:06:48,120 --> 00:06:54,680
This is going to match any page that hasn't been matched so far that starts with forward slash help

95
00:06:54,920 --> 00:06:56,990
forward slash right here.

96
00:06:56,990 --> 00:06:59,160
We could once again use response.

97
00:06:59,170 --> 00:07:05,690
Dot send it to just send back a simple text based message and I could say something more specific like

98
00:07:05,690 --> 00:07:10,190
help article not found perfect.

99
00:07:10,190 --> 00:07:17,900
Now if we save aspect J S we can see this showing up when I visit forward slash help forward slash test

100
00:07:18,200 --> 00:07:20,950
I refresh the page and what do I get I get help.

101
00:07:20,960 --> 00:07:22,670
Article not found.

102
00:07:22,700 --> 00:07:29,440
Now if I go to a root that does exist like the forward slash help root I do indeed still get that content.

103
00:07:29,960 --> 00:07:36,260
So by using the wild card character we can match either every request or we can match a bunch of requests

104
00:07:36,290 --> 00:07:38,480
that match a specific pattern.

105
00:07:38,510 --> 00:07:46,010
In this case matching anything after forward slash help forward slash as long as it wasn't matched previously.

106
00:07:46,040 --> 00:07:52,220
So if I did have a handler for forward slash help forward slash data that could still run and this would

107
00:07:52,220 --> 00:07:59,150
be a catch all for help for all fours and this would be a catch all for any four or four that occurs.

108
00:07:59,180 --> 00:08:01,220
Now it's challenge time and down below.

109
00:08:01,220 --> 00:08:05,060
I have some comments outlining what I'd like you to do right here.

110
00:08:05,060 --> 00:08:10,010
Your goal is to create and render a 4 0 4 page with handlebars.

111
00:08:10,070 --> 00:08:17,330
That's going to be for generic for all for errors and 4 4 0 4 errors related to help documentation.

112
00:08:17,330 --> 00:08:24,650
So step 1 you're going to create a single new view in that views directory and that HDL page is going

113
00:08:24,650 --> 00:08:29,260
to render the header and footer now right in between the header and footer.

114
00:08:29,300 --> 00:08:31,810
You should use the partials for both of those.

115
00:08:31,940 --> 00:08:36,610
It's going to render an error message which will also be provided to the template.

116
00:08:36,620 --> 00:08:41,950
Now the reason needs a specific view is gonna have the error message provided is because we're gonna

117
00:08:41,990 --> 00:08:46,670
provide a different error messages depending on which one of these two fired.

118
00:08:46,730 --> 00:08:53,870
We will say Page not found for generic for all for messages and we will say a help article not found.

119
00:08:53,870 --> 00:08:59,570
If this is the handler that ends up running so in the end of the day when you visit a you are l like

120
00:08:59,570 --> 00:09:06,380
forward slash what I would expect to see page not found when you visit the U.R.L. forward slash help

121
00:09:06,380 --> 00:09:07,990
forward slash units.

122
00:09:08,000 --> 00:09:14,390
This handler is going to run and I would expect to see these page rendering help article not found.

123
00:09:14,870 --> 00:09:20,570
So take some time to knock all of that out and the hint is that you should only create a single new

124
00:09:20,570 --> 00:09:25,700
handlebars file you want to set it up to be used in both situations.

125
00:09:25,790 --> 00:09:32,570
Taking in the error as one of the data values past to render all right knocked that out.

126
00:09:32,570 --> 00:09:35,810
Test your work and when you're done come back and click play

127
00:09:39,710 --> 00:09:40,550
how'd that go.

128
00:09:40,550 --> 00:09:46,310
I'm gonna kick things off by creating the new view we're gonna need down inside of the views directory

129
00:09:46,320 --> 00:09:53,990
I can create a new file and we can call this something like 4 0 4 dot H B S now in here we want a full

130
00:09:54,040 --> 00:09:58,570
H TSL page remember this is a view and not a partial.

131
00:09:58,610 --> 00:10:00,540
Now maybe you built it up from scratch.

132
00:10:00,560 --> 00:10:07,160
If so props to you maybe you copied and pasted one of the other views gutting it and changing it to

133
00:10:07,160 --> 00:10:08,240
fit your needs.

134
00:10:08,240 --> 00:10:09,930
That would work as well.

135
00:10:09,980 --> 00:10:14,650
So right here I could take the index page as an example I could copy it.

136
00:10:14,780 --> 00:10:18,920
I could bring it over to the forum for page and change it to fit my needs.

137
00:10:18,920 --> 00:10:23,870
First up we're not going to load the javascript file into this page so I'll remove that.

138
00:10:23,870 --> 00:10:27,920
The only external file we're going to load in is our style sheet.

139
00:10:27,920 --> 00:10:32,630
And from there we already have the header and footer in place which is great.

140
00:10:32,630 --> 00:10:37,910
That brings us to step 2 making sure we render a message in between the two.

141
00:10:37,970 --> 00:10:43,750
So right here inside of a paragraph I'm going to provide the actual message.

142
00:10:43,760 --> 00:10:46,540
Now you could have called this anything you wanted to.

143
00:10:46,550 --> 00:10:49,670
I'm going to call mine an error message.

144
00:10:49,670 --> 00:10:50,750
Perfect.

145
00:10:50,750 --> 00:10:56,820
Now we have this generic error page that can be used for both of our 4 0 4 routes.

146
00:10:56,840 --> 00:11:02,050
It's time to take things into app dot J S and actually swap out our response.

147
00:11:02,060 --> 00:11:06,170
Dot send calls with response dot render.

148
00:11:06,170 --> 00:11:12,170
I'm gonna kick things off with the generic forum for page so down below I'll remove everything inside

149
00:11:12,170 --> 00:11:16,940
of the callback and I'll replace it with response dot render.

150
00:11:16,940 --> 00:11:21,850
And in this case what am I rendering I am rendering the 4 0 4 view we created.

151
00:11:21,860 --> 00:11:22,780
Down below.

152
00:11:22,910 --> 00:11:24,920
And what data Am I providing.

153
00:11:24,920 --> 00:11:31,190
Well I know I need to provide a title and name because those are used by the header in the footer and

154
00:11:31,190 --> 00:11:36,720
I also want to provide a value for my error message which I just set up support for.

155
00:11:36,740 --> 00:11:42,090
So right here title I could say something like 4 0 for name.

156
00:11:42,110 --> 00:11:45,770
I'll continue to put my name as the person responsible for the page.

157
00:11:45,830 --> 00:11:53,650
Then after that we're going to setup error message matching up exactly with what we used inside of the

158
00:11:53,650 --> 00:11:56,490
view and we can pick a message for this one.

159
00:11:56,590 --> 00:12:01,120
Now for the generic forum for something like Page Not Found.

160
00:12:01,120 --> 00:12:03,960
Would get the job done before we go any further.

161
00:12:03,970 --> 00:12:05,890
Let's test out our work.

162
00:12:05,920 --> 00:12:09,870
I'm gonna head into the browser and go to a page like forward slash.

163
00:12:09,870 --> 00:12:12,400
What which does not exist when I do.

164
00:12:12,550 --> 00:12:18,700
What do I get I get for a four page not found and I could then click a link over to a page that does

165
00:12:18,700 --> 00:12:21,510
exist which is great for me here.

166
00:12:21,520 --> 00:12:26,980
Let's go ahead and make sure that when someone visits a bad help article they get the four for a page

167
00:12:27,010 --> 00:12:28,390
but with a different message.

168
00:12:28,690 --> 00:12:35,730
So for that we're going to remove response dot send and I will replace it with response dot render.

169
00:12:35,770 --> 00:12:40,800
Once again we are still rendering that floral 4 page just with different content.

170
00:12:40,840 --> 00:12:41,470
Right here.

171
00:12:41,560 --> 00:12:43,120
Let's provide that content.

172
00:12:43,150 --> 00:12:48,650
Title I could say something like floral for or floral for help.

173
00:12:48,800 --> 00:12:49,580
Name.

174
00:12:49,580 --> 00:12:52,700
I'll stick with the same value we've used before and then.

175
00:12:52,700 --> 00:12:54,380
Error message.

176
00:12:54,380 --> 00:12:57,080
And this is going to change instead of printing.

177
00:12:57,080 --> 00:12:58,610
Page Not Found.

178
00:12:58,610 --> 00:13:00,370
I'd like to go ahead and print help.

179
00:13:00,380 --> 00:13:01,820
Article not found.

180
00:13:02,030 --> 00:13:08,180
So right here inside of quotes help article not found.

181
00:13:08,330 --> 00:13:09,320
Excellent.

182
00:13:09,320 --> 00:13:15,350
So when someone has a generic forum for they get this when it's a help specific forum for they get what

183
00:13:15,350 --> 00:13:21,290
we have above now we can test things out making sure the help for all for works.

184
00:13:21,290 --> 00:13:26,810
I'm going to remove the challenge comments I'm going to ensure that all files are saved and then we're

185
00:13:26,810 --> 00:13:33,010
going to move over into the browser forward slash help forward slash data would get the job done.

186
00:13:33,020 --> 00:13:37,370
And right here I see help article not found which is fantastic.

187
00:13:37,370 --> 00:13:43,550
From there I could click over to the help page and I could view an article that actually does exist.

188
00:13:43,550 --> 00:13:49,850
So using the wild card character with Express is going to allow us to set up more complex match routing

189
00:13:50,180 --> 00:13:57,110
instead of just matching exact routes we can provide the wild card to match a wider range of you or

190
00:13:57,110 --> 00:13:57,930
else.

191
00:13:58,010 --> 00:13:59,820
All right that is it for this one.

192
00:13:59,840 --> 00:14:01,280
I'll see you next time.