1
00:00:00,180 --> 00:00:06,390
In the last video you learned how to use Express to send back HDL that allowed us to render some h t

2
00:00:06,380 --> 00:00:08,450
an L for pages like the home page.

3
00:00:08,460 --> 00:00:12,840
See and hear and the about page which we configured down below.

4
00:00:12,840 --> 00:00:20,490
Now we are indeed sending back HDL but typing HDL in a string in a javascript file is gonna get out

5
00:00:20,490 --> 00:00:24,850
of hand really quickly as we add more to the given web page.

6
00:00:24,870 --> 00:00:32,130
It would be nice if we could write our HDL in separate H2 CML files and have the express server serve

7
00:00:32,190 --> 00:00:34,290
those up and we can.

8
00:00:34,290 --> 00:00:40,650
So what we're gonna do is configure express to serve up an entire directory of assets that could contain

9
00:00:40,670 --> 00:00:47,510
h t CML files CSA s files client side JavaScript videos images and more.

10
00:00:47,640 --> 00:00:50,180
So let's go ahead and start this process off.

11
00:00:50,190 --> 00:00:53,610
First up let's create the directory that we're gonna serve up.

12
00:00:53,610 --> 00:01:00,140
This is gonna live in the web server folder alongside of node modules and alongside of source.

13
00:01:00,150 --> 00:01:04,020
And I'm going to call this public anything that goes inside of here.

14
00:01:04,050 --> 00:01:07,890
It's gonna be served up as part of our Express server.

15
00:01:07,890 --> 00:01:15,120
In here we can put an H2 UML files and our other assets for the moment let's add a single file index

16
00:01:15,330 --> 00:01:23,940
dot HDMI out index dot HDL as a special file the name means that it's gonna get served up by default.

17
00:01:23,970 --> 00:01:28,800
So this is the page that will eventually show up at the root of our Web site.

18
00:01:28,800 --> 00:01:33,510
Now let's go ahead and actually create a very basic HDL document.

19
00:01:33,510 --> 00:01:39,300
I'm gonna start up top with my doc type so I'm going to open and close the carrots then.

20
00:01:39,360 --> 00:01:40,350
Exclamation mark.

21
00:01:40,350 --> 00:01:44,190
Doc type to specify what type of document this is.

22
00:01:44,190 --> 00:01:46,900
And it is indeed an HDMI document.

23
00:01:46,980 --> 00:01:50,030
Den down below we can add the document itself.

24
00:01:50,100 --> 00:01:57,810
We start off with our h t tag opening and closing that inside of there we add two other tags we add

25
00:01:57,840 --> 00:02:04,230
a head tag where we're going to configure other things later on like setting up the style sheet for

26
00:02:04,260 --> 00:02:11,010
this document and below head but still inside of each UML we're going to set up body where we're gonna

27
00:02:11,010 --> 00:02:17,130
put everything that's going to display on the screen for the moment we're gonna display just one thing

28
00:02:17,370 --> 00:02:20,880
using the H one element which we already used.

29
00:02:20,880 --> 00:02:23,790
I'm going to display a title and I'll use something different.

30
00:02:23,790 --> 00:02:29,110
And just so we can see the change I'll say from a static file.

31
00:02:29,130 --> 00:02:30,210
Perfect.

32
00:02:30,210 --> 00:02:34,630
So now we have this basic HDL document in the public folder.

33
00:02:34,650 --> 00:02:40,320
The goal is to teach express how to serve up the contents of that directory.

34
00:02:40,320 --> 00:02:46,260
And one important piece of information we need is the path to the public folder.

35
00:02:46,260 --> 00:02:48,300
And it can be a relative path.

36
00:02:48,300 --> 00:02:52,200
It needs to be an absolute path from the route of your machine.

37
00:02:52,290 --> 00:02:57,420
Now to get that done node actually provides us with two very handy variables.

38
00:02:57,480 --> 00:03:02,640
So we're gonna have a quick aside to talk about these variables then we'll actually integrate them into

39
00:03:02,640 --> 00:03:06,780
the application to point express to the public folder.

40
00:03:06,780 --> 00:03:10,800
Right here though let's go ahead and just use console dialog twice.

41
00:03:10,980 --> 00:03:18,540
We're going to print to values that node provides the first is underscore underscore dir name which

42
00:03:18,540 --> 00:03:26,460
is short for directory name and the other in another console dialog call is underscore underscore file

43
00:03:26,460 --> 00:03:27,860
name.

44
00:03:27,870 --> 00:03:33,960
Now if we actually go ahead and run the program it's going to print the value for both of these to the

45
00:03:33,960 --> 00:03:34,920
console.

46
00:03:34,920 --> 00:03:39,960
I'm gonna save the file node mine is gonna restart things and what do we see down below.

47
00:03:39,960 --> 00:03:44,180
The first one dir name that contains a path to the directory.

48
00:03:44,190 --> 00:03:51,030
The current script lives in so the app that J.S. script lives in the source directory and down below

49
00:03:51,040 --> 00:03:56,250
I have the complete path from the root of my hard drive all the way to the source folder.

50
00:03:56,250 --> 00:04:01,860
Now obviously your path is going to look a bit different if you have your application somewhere else

51
00:04:01,860 --> 00:04:07,590
on your machine and your name is not Andrew which it's likely not though shout out to all the other

52
00:04:07,590 --> 00:04:14,490
Andrews and the other string we have printing is the underscore underscore file name value.

53
00:04:14,520 --> 00:04:20,010
This is very similar to dir name though instead of providing the path to the directory the file lives

54
00:04:20,010 --> 00:04:23,700
in it provides the path to the file itself.

55
00:04:23,700 --> 00:04:29,970
Now we're going to use the dir name variable to get the correct path to the public directory.

56
00:04:29,970 --> 00:04:35,370
We currently don't have that path but we can do a little path manipulation to get it.

57
00:04:35,400 --> 00:04:40,520
Now it's important to note that both of these values they're provided by that wrapper function.

58
00:04:40,560 --> 00:04:47,160
So if you remember when we debug node j s we saw that our code gets wrapped in this function and that

59
00:04:47,160 --> 00:04:52,830
function provided various things to our code like the required function which we've used plenty of times

60
00:04:52,830 --> 00:04:53,620
before.

61
00:04:53,670 --> 00:04:57,180
That is also where dir name and file name come from.

62
00:04:57,180 --> 00:05:00,960
Now it does name and doesn't get us exactly there but it's pretty close.

63
00:05:00,960 --> 00:05:03,150
This is pointing to the source directory.

64
00:05:03,150 --> 00:05:08,550
We need it to point to the public folder so we can provide express with that path.

65
00:05:08,550 --> 00:05:10,440
Now there are two ways we could do this.

66
00:05:10,440 --> 00:05:15,150
We could use a little string manipulation to try to break this string up and get it to what we want

67
00:05:15,150 --> 00:05:16,050
it to be.

68
00:05:16,050 --> 00:05:23,250
But there's actually a core node module called Path that provides us a ton of great utilities for working

69
00:05:23,250 --> 00:05:24,210
with paths.

70
00:05:24,210 --> 00:05:29,760
This is done in a cross OS compatible way and that's the tool we're gonna use.

71
00:05:29,760 --> 00:05:36,900
We can find more about path by heading over to the node j asked documentation at node j s dot org.

72
00:05:36,990 --> 00:05:44,160
I mean I click on docs head over to the API docs and from here we are going to scroll down to P for

73
00:05:44,160 --> 00:05:51,150
path now path provides us with a couple of methods that makes it easy to manipulate string paths.

74
00:05:51,150 --> 00:05:55,000
We're only going to use one that is path dot joint.

75
00:05:55,140 --> 00:05:59,100
Let's go ahead and see how it works over in visual studio code.

76
00:05:59,100 --> 00:06:05,640
I'm going to start by loading this core module in now typically Oliver require my core modules before

77
00:06:05,670 --> 00:06:08,020
I require my NPM modules.

78
00:06:08,130 --> 00:06:10,020
And that's done just to stay organized.

79
00:06:10,020 --> 00:06:11,620
It is not necessary.

80
00:06:11,670 --> 00:06:12,350
So right here.

81
00:06:12,360 --> 00:06:14,270
Const path equals.

82
00:06:14,430 --> 00:06:19,880
We are going to require a path and there's no need to install it since it is a core node module.

83
00:06:19,890 --> 00:06:22,550
It is built in and now down below.

84
00:06:22,590 --> 00:06:23,310
We can use it.

85
00:06:23,970 --> 00:06:28,140
I'm going to remove file name from our second call to console dot log.

86
00:06:28,290 --> 00:06:32,880
And we're gonna use path inside of here to try to manipulate the path correctly.

87
00:06:32,880 --> 00:06:38,350
I'll leave this first call in place so we can see the original path we started with right here.

88
00:06:38,430 --> 00:06:46,080
We'll be using path dot join no path dot join is indeed a function so let's call it as such and it's

89
00:06:46,080 --> 00:06:51,670
going to return the final path and we pass to the individual pieces to the path.

90
00:06:51,780 --> 00:06:55,410
And it does the job of manipulating the string for us.

91
00:06:55,410 --> 00:07:01,490
Let's start with just one argument to join underscore underscore dir name.

92
00:07:01,500 --> 00:07:07,020
Now if I'm gonna do this and save the file what I'm gonna end up getting is the exact same path for

93
00:07:07,020 --> 00:07:10,890
each by providing just a single argument to join.

94
00:07:10,890 --> 00:07:17,130
We haven't actually joined any paths together since we just have one from here though we can go ahead

95
00:07:17,130 --> 00:07:22,000
and pass in a second argument a string and manipulate that path.

96
00:07:22,050 --> 00:07:26,860
So if I wanted to go up a folder I could use dot dot to get that done.

97
00:07:26,880 --> 00:07:31,860
Now if I were to save the program I can see that dir name it points to source.

98
00:07:31,950 --> 00:07:38,850
Well my second log points to the web server folder from here I could use forward slash dot dot if I

99
00:07:38,850 --> 00:07:45,420
wanted to go up another directory and now I can see that the string is pointing to the node course folder.

100
00:07:45,480 --> 00:07:48,660
Now for our purposes we don't want to go up to folders.

101
00:07:48,660 --> 00:07:54,360
I want to go up a single folder getting out of the source directory then I want to use forward slash

102
00:07:54,390 --> 00:07:57,840
public to point to the public directory.

103
00:07:57,840 --> 00:08:02,930
If I go ahead and save African J.S. down below that is exactly what I get.

104
00:08:02,940 --> 00:08:05,840
We originally had a path to the source directory.

105
00:08:05,940 --> 00:08:12,120
We used the path module to get a path to the public directory and now we can go ahead and configure

106
00:08:12,150 --> 00:08:19,380
express to serve that directory up we can serve up the directory by adding a single line right here

107
00:08:19,380 --> 00:08:22,300
after we create the Express application.

108
00:08:22,320 --> 00:08:29,540
This is going to be a call to app dot use now app dot use is we're going to explore in detail in about

109
00:08:29,540 --> 00:08:32,120
three or four lectures for the moment.

110
00:08:32,120 --> 00:08:38,320
We're going to gloss over what exactly it's doing though I promise we'll explore it in detail soon.

111
00:08:38,330 --> 00:08:42,400
For now all you need to know is that it's a way to customize your server.

112
00:08:42,500 --> 00:08:47,250
And in this video we're going to customize the server to serve out that folder.

113
00:08:47,240 --> 00:08:52,910
Now we need to pass to it something else and there's something else we're going to provide comes from

114
00:08:52,910 --> 00:08:53,930
Express.

115
00:08:53,930 --> 00:09:00,560
We are going to call express dot static so express dot static is a function.

116
00:09:00,680 --> 00:09:04,480
We're calling it and we're passing its return value into use.

117
00:09:04,550 --> 00:09:07,550
Now static takes the path to the folder.

118
00:09:07,550 --> 00:09:09,670
We want to serve up and we have that.

119
00:09:09,770 --> 00:09:12,030
It's right here in console log.

120
00:09:12,080 --> 00:09:14,520
It starts with the path call to join.

121
00:09:14,630 --> 00:09:18,980
And it ends right here with the closing parentheses for the join call.

122
00:09:18,980 --> 00:09:21,110
I'm going to copy that to the clipboard.

123
00:09:21,110 --> 00:09:22,650
I'm going to paste it in.

124
00:09:22,730 --> 00:09:23,690
And there we go.

125
00:09:23,690 --> 00:09:26,200
That is our single line in place.

126
00:09:26,210 --> 00:09:30,650
Now we can always undo that change and create a separate variable and reference that.

127
00:09:31,040 --> 00:09:36,470
So for example I could create a const right here I could call this one.

128
00:09:36,470 --> 00:09:40,320
Something like public directory path.

129
00:09:40,620 --> 00:09:46,380
And then I could store the value on that variable and then I could reference the variable down below.

130
00:09:46,380 --> 00:09:47,670
Either way would work.

131
00:09:47,790 --> 00:09:48,570
I'm going to pass.

132
00:09:48,570 --> 00:09:55,370
Public directory path to the static function getting things done like we had before.

133
00:09:55,650 --> 00:10:00,250
Now we can remove our console dialog calls and our server is all set up.

134
00:10:00,270 --> 00:10:06,030
We generate the path to the public folder we provide it to static which in some way configure is our

135
00:10:06,030 --> 00:10:11,760
Express application and now we can test things out and to test things out.

136
00:10:11,820 --> 00:10:18,110
We're gonna go to the root of our web server so make sure to save your files over inside of local host

137
00:10:18,120 --> 00:10:18,960
three thousand.

138
00:10:18,960 --> 00:10:25,740
I'm just gonna refresh this home page and what do I see I see from a static file showing up.

139
00:10:25,740 --> 00:10:31,590
So this is the contents of our HDL file which we set up in the public folder.

140
00:10:31,590 --> 00:10:38,590
Now we could also visit this H2 UML page by providing the explicit path so local host colon three thousand

141
00:10:38,610 --> 00:10:45,750
forward slash index dot HDMI out but since index down H2 UML has a special meaning when related to web

142
00:10:45,750 --> 00:10:46,590
servers.

143
00:10:46,590 --> 00:10:51,330
We can also leave the path off if we're just going to the root of the site.

144
00:10:51,330 --> 00:10:56,240
This makes sure that something loads if they don't explicitly provide a path.

145
00:10:56,250 --> 00:11:00,450
Now this also means that we're never going to see the other root handler.

146
00:11:00,450 --> 00:11:06,690
We set up down below Express is going to work through your application until it finds a match for that

147
00:11:06,690 --> 00:11:07,440
route.

148
00:11:07,530 --> 00:11:12,950
In the case of our Express static call it is indeed going to find a match.

149
00:11:12,960 --> 00:11:19,920
It's going to find index dot HDL and that's going to match the route you are L because the file has

150
00:11:19,920 --> 00:11:24,010
a special name which means that this is never actually going to run.

151
00:11:24,090 --> 00:11:28,010
So we could remove it as it no longer serves much of a purpose.

152
00:11:28,020 --> 00:11:34,650
So here we still have four distinct pages though one is coming from that static directory.

153
00:11:34,650 --> 00:11:39,860
Now that we have everything set up it's gonna be up to you to add a couple more pages into the mix.

154
00:11:39,900 --> 00:11:42,160
So let's talk about what I'd like you to do.

155
00:11:42,180 --> 00:11:45,870
I'm gonna pace some challenged comments in right here right here.

156
00:11:45,870 --> 00:11:49,460
Your goal is to create two more H2 PML files.

157
00:11:49,500 --> 00:11:53,640
So in the end of the day both the help page and the about page.

158
00:11:53,730 --> 00:11:58,560
Those aren't going to get set up as individual routes like we're currently setting them up.

159
00:11:58,590 --> 00:12:03,660
Those are going to get served up as HDL pages and we're going to put those in public.

160
00:12:03,660 --> 00:12:09,900
Now weather is going to stay exactly as it is as that'll actually serve up Jason a little bit later

161
00:12:10,390 --> 00:12:11,150
so up above.

162
00:12:11,160 --> 00:12:12,240
What are you gonna do.

163
00:12:12,300 --> 00:12:18,180
You'll create an HD AML page for about with the about titles showing up and then you're going to create

164
00:12:18,210 --> 00:12:22,140
an HDL page for help with the help title showing up.

165
00:12:22,170 --> 00:12:28,830
Step 3 you're going to remove the old root handlers for help and about down below and 4 you're going

166
00:12:28,830 --> 00:12:35,730
to visit both HDL documents in the browser to make sure you're actually seeing the files to test your

167
00:12:35,790 --> 00:12:36,640
work.

168
00:12:36,750 --> 00:12:43,020
Now when it comes to creating those files you can always use the contents of index dot H to UML as a

169
00:12:43,020 --> 00:12:46,510
template and you can just swap out the title text.

170
00:12:46,650 --> 00:12:51,650
Take some time to knock that out test your work and when you're done come back and click play

171
00:12:55,060 --> 00:12:56,050
how that go.

172
00:12:56,050 --> 00:12:58,540
I'm going to kick things off with step number one.

173
00:12:58,540 --> 00:13:02,710
I'll be creating the h t AML page for about so right here.

174
00:13:02,710 --> 00:13:09,430
I could call that something like about Dot HDL and then I'm gonna start this off using the contents

175
00:13:09,430 --> 00:13:14,410
of index dot HDL so I'll highlight everything copy it to the clipboard.

176
00:13:14,410 --> 00:13:17,970
Bring it over to the new file and paste it in from there.

177
00:13:17,980 --> 00:13:25,000
I'm going to swap out the H one with the old text and I'll replace it with about next up we can set

178
00:13:25,000 --> 00:13:28,480
up the help page so that is step number two.

179
00:13:28,540 --> 00:13:35,110
I'm going to create a new file in the public directory that's gonna be help dot HDL and we'll paste

180
00:13:35,140 --> 00:13:37,090
the same boilerplate in there.

181
00:13:37,120 --> 00:13:39,840
Swapping out the title once again with help.

182
00:13:40,510 --> 00:13:44,980
Now that we have this in place we have steps 1 and 2 done from there.

183
00:13:44,980 --> 00:13:51,250
We want to remove the old root handlers so I'm going to remove forward slash help and forward slash

184
00:13:51,310 --> 00:13:53,380
about and last up.

185
00:13:53,380 --> 00:13:58,230
We're going to visit both in the browser to make sure they're showing up correctly.

186
00:13:58,390 --> 00:14:01,150
So over here I have index dot HDL.

187
00:14:01,300 --> 00:14:04,480
I'm gonna swap that out for about Dot HDL.

188
00:14:04,510 --> 00:14:07,090
I see my about page which is great.

189
00:14:07,090 --> 00:14:14,020
Then I'll swap that out for help dot HDL and right here I see my help page which is also fantastic.

190
00:14:14,500 --> 00:14:19,740
So now we have a static directory where we can put all of the assets that are gonna make up our Web

191
00:14:19,740 --> 00:14:21,880
site in the next video.

192
00:14:21,880 --> 00:14:28,210
We're going to explore how we can include other assets like CSI s files client side JavaScript images

193
00:14:28,360 --> 00:14:29,660
and more.

194
00:14:29,680 --> 00:14:35,050
Now remember for the moment this one line is not supposed to make complete sense.

195
00:14:35,140 --> 00:14:41,170
We're adding it now so we can actually serve up the directory but in three or four lessons we'll cover

196
00:14:41,230 --> 00:14:43,290
what it's doing in detail.

197
00:14:43,290 --> 00:14:49,570
All right I'll see you in the next video when we're gonna continue to build out the assets for our site.