1
00:00:00,270 --> 00:00:05,400
You now have express serving up the contents of the public directory in this video.

2
00:00:05,400 --> 00:00:11,520
I want to take a break from adding anything new to the node j s application and I want to focus on how

3
00:00:11,520 --> 00:00:17,580
we could continue to build out the public folder adding our other assets into the mix and using them

4
00:00:17,580 --> 00:00:19,490
in our HDL files.

5
00:00:19,530 --> 00:00:26,250
So things like CSX style sheets to style the application client side JavaScript to add some dynamic

6
00:00:26,310 --> 00:00:30,270
user interaction and images to show on the screen.

7
00:00:30,330 --> 00:00:33,150
Now let's go ahead and kick things off with the CSX.

8
00:00:33,150 --> 00:00:38,670
We're going to add if you're not familiar with CSX that's OK we're only going to use a little bit of

9
00:00:38,670 --> 00:00:41,680
CSX in this class and they CSX.

10
00:00:41,700 --> 00:00:42,530
We do use.

11
00:00:42,570 --> 00:00:43,770
I'll walk you through.

12
00:00:43,770 --> 00:00:46,590
So let's go ahead and kick this process off now.

13
00:00:46,620 --> 00:00:51,240
The file that we're going to create needs to be loaded by the browser which means it needs to go in

14
00:00:51,240 --> 00:00:58,020
the public folder as this is the only directory set up to be exposed by the web server so we can put

15
00:00:58,080 --> 00:01:00,790
our CSX file in the public folder.

16
00:01:00,930 --> 00:01:07,380
And I'm actually going to stay organized and create a sub directory called CSX for all of my style sheets

17
00:01:07,380 --> 00:01:10,610
though for the moment we'll only have one inside of here.

18
00:01:10,620 --> 00:01:13,190
We can create our brand new style sheet.

19
00:01:13,290 --> 00:01:17,690
I'm going to call this Stiles dot CSX for now.

20
00:01:17,700 --> 00:01:24,000
We have very simple Web pages where we just render a title for each page since we only have one thing

21
00:01:24,000 --> 00:01:24,570
showing up.

22
00:01:24,570 --> 00:01:31,270
We should probably add a style to that so we can actually see if our style sheet is loading correctly.

23
00:01:31,270 --> 00:01:34,160
All we're going to do is change the color of the title.

24
00:01:34,230 --> 00:01:38,990
We're seeing to start we define which elements we're trying to style in this case.

25
00:01:39,000 --> 00:01:40,710
It's just our H ones.

26
00:01:40,710 --> 00:01:46,890
So I'm going to type out a one followed by an opening and closing curly brace in here we define all

27
00:01:46,890 --> 00:01:52,680
of these style properties we want to apply to those headers and for the moment we're just going to apply

28
00:01:52,680 --> 00:01:55,120
one which is going to be color.

29
00:01:55,120 --> 00:01:59,590
Color allows you to set the text color right here after the colon.

30
00:01:59,790 --> 00:02:03,660
I'm gonna type out gray followed by a semicolon and there we go.

31
00:02:03,660 --> 00:02:06,570
We have a completely valid style sheet.

32
00:02:06,570 --> 00:02:12,080
Now just because we have it created in the public folder doesn't mean it's actually going to be used.

33
00:02:12,120 --> 00:02:17,640
If I were to head over to local host three thousand the root of the site we're gonna see that it's not

34
00:02:17,640 --> 00:02:21,600
visible here and it's not visible on any of our other pages as well.

35
00:02:21,600 --> 00:02:25,360
The title still shows up in black as opposed to gray.

36
00:02:25,440 --> 00:02:29,180
That's because we haven't loaded it in in our HDL files.

37
00:02:29,220 --> 00:02:34,350
So let's go ahead and do that starting with index done HDMI out right here.

38
00:02:34,350 --> 00:02:38,300
I'm gonna go ahead and setup a new element inside of head.

39
00:02:38,340 --> 00:02:45,660
This is link right here less than link greater than and the link is an empty element which means it

40
00:02:45,660 --> 00:02:53,190
actually does not have a closing tag like we see with H1 and its closing tag here or body and its closing

41
00:02:53,190 --> 00:02:56,990
tag down below link sits just like this.

42
00:02:57,060 --> 00:03:03,840
Now we set up on a link to attributes these are key value pairs allowing us to define specific values

43
00:03:04,170 --> 00:03:09,330
link to set up a style sheet expects those two to be set right here.

44
00:03:09,330 --> 00:03:12,510
The first is Rel which is short for relationship.

45
00:03:12,540 --> 00:03:16,770
What exactly are we linking in in this case style sheet.

46
00:03:16,770 --> 00:03:22,700
Is the value we have to apply then each ref This is the path to the file.

47
00:03:22,710 --> 00:03:24,160
We're trying to load.

48
00:03:24,270 --> 00:03:31,480
Now it's important to note that this path is relative to our current location and it's absolute start.

49
00:03:31,500 --> 00:03:33,060
Is the public directory.

50
00:03:33,060 --> 00:03:34,520
What do I mean by that.

51
00:03:34,530 --> 00:03:41,650
Well dot forward slash is obviously going to leave us in this public directory where index dot HDL lives.

52
00:03:41,820 --> 00:03:48,690
From there we could use C Ss forward slash styles dot CSX and that would indeed work.

53
00:03:48,720 --> 00:03:50,340
This is a relative path.

54
00:03:50,550 --> 00:03:56,410
So if I go ahead and refresh things I can see that now my title is great which is great.

55
00:03:56,520 --> 00:03:58,480
Now that's the relative path version.

56
00:03:58,560 --> 00:04:04,200
We can also use an absolute path the absolute path starts with a forward slash.

57
00:04:04,200 --> 00:04:09,120
Now typically if you started a path with a forward slash on your machine that would bring you to the

58
00:04:09,120 --> 00:04:10,780
route of the hard drive.

59
00:04:10,830 --> 00:04:16,920
But this is being accessed in the browser and thank God it doesn't have access to your hard drive otherwise

60
00:04:16,920 --> 00:04:20,820
anyone could put up a Web site that reads files you wouldn't want them to read.

61
00:04:21,210 --> 00:04:26,490
This is relative to the web server route which we set up as the public folder.

62
00:04:26,490 --> 00:04:32,250
So that would be forward slash CSX forward slash styles dot CSX.

63
00:04:32,340 --> 00:04:37,350
And this is that you are well we're going to end up using now if we were to save things and refresh

64
00:04:37,350 --> 00:04:43,360
things in the browser we can see that once again we do still indeed have the gray style showing up.

65
00:04:43,470 --> 00:04:46,460
So we created a styles sheet in the public folder.

66
00:04:46,530 --> 00:04:52,290
We loaded it in and we were able to style our application from here we could add other style sheets

67
00:04:52,320 --> 00:04:57,920
and we could add more content to these style sheets to create a complex dynamic web site.

68
00:04:57,930 --> 00:05:00,330
Now from here we could take the link element.

69
00:05:00,360 --> 00:05:05,780
We can copy it over to our other files to make sure these style sheet loads there as well.

70
00:05:05,820 --> 00:05:11,130
I'm going to paste it into both HDL files and I'll go ahead and save things as well.

71
00:05:11,190 --> 00:05:12,990
So that's loading in the style sheet.

72
00:05:12,990 --> 00:05:18,640
I also want to show you how you can load in a client side JavaScript file to get that done once again

73
00:05:18,640 --> 00:05:22,030
and we're gonna have to add a new file to the public folder.

74
00:05:22,140 --> 00:05:25,920
And this is gonna be a J.S. file like we did with our style sheets.

75
00:05:25,920 --> 00:05:29,940
I'm going to create a new folder in the public directory called J.

76
00:05:29,940 --> 00:05:36,760
S and in the J S directory we can just make a single style we can call this one something like app J

77
00:05:36,800 --> 00:05:42,180
J.S. and this is a javascript file which will actually fill out a bit later to do something meaningful

78
00:05:42,450 --> 00:05:43,260
for the moment.

79
00:05:43,260 --> 00:05:48,060
We're just going to do something not meaningful and print a message to the screen so we can at least

80
00:05:48,060 --> 00:05:50,800
see if it's loading up right here.

81
00:05:51,030 --> 00:05:55,440
Client side JavaScript file is loaded.

82
00:05:55,440 --> 00:05:55,950
Perfect.

83
00:05:56,310 --> 00:05:59,700
So go ahead and print some message in your javascript file.

84
00:05:59,790 --> 00:06:04,530
We can then go ahead and actually close that down as we're not going to make any changes to it for a

85
00:06:04,530 --> 00:06:10,880
few lessons and from here we're going to make sure that it gets loaded in to index dot HCM out.

86
00:06:10,980 --> 00:06:15,660
We're actually not going to load it into the other pages and you'll learn why a bit later.

87
00:06:15,660 --> 00:06:18,330
So right here how do we get that done to do that.

88
00:06:18,330 --> 00:06:21,000
We use a script tag in the head.

89
00:06:21,000 --> 00:06:26,970
Now script is not an empty element which means we do setup an opening and closing tag which you can

90
00:06:26,970 --> 00:06:31,090
see that Visual Studio code automatically completed for me.

91
00:06:31,230 --> 00:06:33,300
And then we provide the path to the file.

92
00:06:33,300 --> 00:06:40,000
Much like we did in the H ref attribute though we do it with the script tag via the source attribute.

93
00:06:40,080 --> 00:06:42,840
So source equals right here.

94
00:06:42,840 --> 00:06:48,710
That would be forward slash J.S. forward slash app dot J s perfect.

95
00:06:48,900 --> 00:06:55,460
Now that we have this in place we can make sure that our message shows up when we run the HD CML file.

96
00:06:55,470 --> 00:07:01,410
Now it's not gonna show up on any browsers page but it will show up in the developer tools.

97
00:07:01,410 --> 00:07:06,870
We can open those by going to the settings menu more tools developer tools.

98
00:07:06,960 --> 00:07:11,940
And once we're here we're gonna see something pretty similar though a little more complex than what

99
00:07:11,940 --> 00:07:18,180
we had when we debug node j s we're just looking for this console tab where we can view things that

100
00:07:18,180 --> 00:07:24,160
were output it to the console and right here I have my message client side JavaScript file is loaded.

101
00:07:24,510 --> 00:07:27,900
So we have a CSX file we have a javascript file.

102
00:07:27,990 --> 00:07:33,630
Let's go ahead and wrap things up by adding an image into the mix as that's one of the last common assets

103
00:07:33,630 --> 00:07:38,940
you would definitely end up using if you were building pretty much any kind of Web site out there.

104
00:07:38,940 --> 00:07:43,800
This means we are going to need an image we can load into one of our H2 PML files.

105
00:07:43,830 --> 00:07:48,210
We're gonna get a profile picture of ourselves and put that on the about page.

106
00:07:48,270 --> 00:07:52,500
So it shows up under some description about what the Web site is all about.

107
00:07:52,500 --> 00:07:57,280
Now if you have a picture of yourself you can go ahead and bring that into the public directory.

108
00:07:57,300 --> 00:08:02,910
I'm going to use a picture of myself at links dot Meade dot I O forward slash.

109
00:08:02,940 --> 00:08:04,210
Pick one.

110
00:08:04,260 --> 00:08:09,450
Now obviously you probably don't want to use a picture of me but if you don't have a picture of yourself

111
00:08:09,450 --> 00:08:16,720
handy you can always use what I have at links dot Mead dot I O forward slash pic to.

112
00:08:16,830 --> 00:08:21,760
This is a picture of a robot and you can use that for your application.

113
00:08:21,870 --> 00:08:25,740
So either image would work just fine or an image you have on your machine.

114
00:08:26,010 --> 00:08:31,200
I'm going to go ahead and grab the picture of myself and once I have that downloaded I'm going to make

115
00:08:31,200 --> 00:08:33,520
sure it gets into the right directory.

116
00:08:33,660 --> 00:08:38,420
So I'm going to open up my finder or the file explorer on Windows.

117
00:08:38,490 --> 00:08:43,050
I'm going to navigate to the downloads area and find my picture from there.

118
00:08:43,050 --> 00:08:45,920
We have to get it into the desktop file.

119
00:08:45,990 --> 00:08:48,840
So I have to copy it to the clipboard.

120
00:08:49,020 --> 00:08:54,390
I'm going to use the keyboard shortcut but you can always use the right click copy image and then I'm

121
00:08:54,390 --> 00:09:00,390
going to go to desktop followed by that into the node course directory where we have web server then

122
00:09:00,390 --> 00:09:02,130
we go into the public folder.

123
00:09:02,190 --> 00:09:04,660
And right here we don't have a place for images.

124
00:09:04,740 --> 00:09:10,650
We could just stick it right here alongside of our HDMI file but we could also create a new folder for

125
00:09:10,650 --> 00:09:14,730
those right here I am G inside of there.

126
00:09:14,730 --> 00:09:17,880
I'll paste in that file I copied before.

127
00:09:17,880 --> 00:09:23,850
So now that we have the image in the images directory in the public folder it's going to be accessible

128
00:09:23,880 --> 00:09:27,060
to anyone who has an internet connection.

129
00:09:27,240 --> 00:09:33,690
I can see it showing up right here and we can actually load it in to our page to do that right below

130
00:09:33,720 --> 00:09:34,840
the H one.

131
00:09:34,860 --> 00:09:37,390
We are going to setup an image element.

132
00:09:37,410 --> 00:09:39,300
This is also an empty element.

133
00:09:39,300 --> 00:09:41,010
So there is no closing tag.

134
00:09:41,040 --> 00:09:46,560
And we specify the path to the image using these source attribute like we did with the script.

135
00:09:46,980 --> 00:09:52,890
So forward slash image forward slash me dot PMG is going to get the job done.

136
00:09:52,920 --> 00:09:58,590
Now if we save things we can pull up the about page and make sure it's actually showing up over in the

137
00:09:58,590 --> 00:10:04,960
browser I'm going to go to forward slash about Dot HDL and what do I see.

138
00:10:04,970 --> 00:10:08,390
I see the title with the picture of me down below.

139
00:10:08,390 --> 00:10:13,600
If I were to head over to the other pages I would not see this picture as it's only listed here.

140
00:10:13,610 --> 00:10:18,290
Now we could always go ahead and target this AMG element if we wanted to.

141
00:10:18,440 --> 00:10:20,130
Over in these styles file.

142
00:10:20,180 --> 00:10:25,430
Let's go ahead and add a couple of new lines and we're gonna set up another set of styles.

143
00:10:25,430 --> 00:10:28,040
This time I'm going to target my image elements.

144
00:10:28,040 --> 00:10:29,340
We just have one.

145
00:10:29,600 --> 00:10:34,430
I'm going to set up the curly braces and we're gonna make the image a bit smaller than it currently

146
00:10:34,460 --> 00:10:35,140
is.

147
00:10:35,150 --> 00:10:39,340
I'm gonna say that I want the image to be two hundred and fifty pixels wide.

148
00:10:39,350 --> 00:10:51,110
So with equals so right after with we have the colon space then 2 5 0 p x 4 pixels followed by the semicolon.

149
00:10:51,110 --> 00:10:52,190
And we're done.

150
00:10:52,190 --> 00:10:59,140
Now we can go ahead and refresh the page and we can see our image shows up at a more reasonable size.

151
00:10:59,210 --> 00:11:04,430
Now that we have this in place we've taken a little tour of all of the different assets we can include

152
00:11:04,490 --> 00:11:08,040
in our web server as we're building out our Web sites.

153
00:11:08,060 --> 00:11:11,600
That's where we're going to stop for this little tour of the front end.

154
00:11:11,600 --> 00:11:18,520
We have h to UML javascript CSX and images all being loaded in with our server in the next video.

155
00:11:18,530 --> 00:11:21,490
We're going to turn our attention back towards node j.

156
00:11:21,490 --> 00:11:26,050
S and we're gonna continue to build out and expand on our application.

157
00:11:26,060 --> 00:11:27,260
I'm excited to get to it.

158
00:11:27,290 --> 00:11:30,140
So stay tuned and I'll see you in the next one.