1
00:00:00,210 --> 00:00:06,390
Up until this point our express reps have sent back completely unstaged h t m l no javascript included

2
00:00:06,390 --> 00:00:08,740
no C Ss just pure h t m l.

3
00:00:08,830 --> 00:00:14,160
In this video I'm going to show you how we can start to include assets like a stylesheet or some Javascript

4
00:00:14,160 --> 00:00:14,730
.

5
00:00:14,730 --> 00:00:19,650
And I'm also going to show you how we can dry up our templates using what are known as Parshall's.

6
00:00:19,650 --> 00:00:20,730
So let's get started.

7
00:00:20,740 --> 00:00:24,530
I'm using the same app that I've been using for the past two videos where we have our app.

8
00:00:24,630 --> 00:00:26,920
Yes and we have three main routes.

9
00:00:27,060 --> 00:00:34,380
We have the route route which renders the home that Ejay as template that has an H1 and the adorable

10
00:00:34,380 --> 00:00:40,140
image of the Palm C and then we also have the fall in love with Slash thing.

11
00:00:40,170 --> 00:00:46,890
The variable thing route which will then render the love toward each template and it will display you

12
00:00:46,890 --> 00:00:49,540
fell in love with and then whatever we wrote in the route.

13
00:00:49,770 --> 00:00:55,800
And then if statement and then a little paragraph at the bottom and then we also have the slash posts

14
00:00:55,800 --> 00:01:00,230
route that renders the posts E.J. as template and inside of that.

15
00:01:00,330 --> 00:01:01,740
We have two loops.

16
00:01:01,950 --> 00:01:04,290
Now let's say that we want to include some styles.

17
00:01:04,560 --> 00:01:07,250
So as you know by now I like the color purple.

18
00:01:07,380 --> 00:01:13,410
Let's say I wanted to make all of the bodies purple all the text color on all the different templates

19
00:01:13,500 --> 00:01:14,760
should be purple.

20
00:01:14,760 --> 00:01:22,950
Let's start with the Post page and what I could do is include a style tag so that style opening and

21
00:01:22,950 --> 00:01:30,990
closing and then I can write my style in here body and will do color purple just like that and save

22
00:01:30,990 --> 00:01:31,230
.

23
00:01:31,440 --> 00:01:36,390
And remember that this isn't really the ideal way of including styles and I'm showing it to you first

24
00:01:36,390 --> 00:01:41,220
for a reason because we're going to refactor it and improve it in just a moment but let's just make

25
00:01:41,220 --> 00:01:41,970
sure it works.

26
00:01:41,970 --> 00:01:43,880
So color purple on the body.

27
00:01:44,010 --> 00:01:46,920
Let's start the server node app.

28
00:01:47,010 --> 00:01:55,150
Yes let's go over to the browser and refresh on the Post's page and you can see we get purple.

29
00:01:55,830 --> 00:01:59,210
And if I went to another route I don't get purple.

30
00:01:59,360 --> 00:02:04,650
And that's because they're totally separate templates and we only added the style tag to the post template

31
00:02:04,680 --> 00:02:04,900
.

32
00:02:05,340 --> 00:02:11,820
So if I want everything to be purple on all three templates I could add in another style tag in home

33
00:02:11,820 --> 00:02:15,710
that Ejay us and the same style tag on love.

34
00:02:15,900 --> 00:02:25,500
Yes and save restarting the server refresh my page and I get a purple H-1 here and if I go to fall in

35
00:02:25,500 --> 00:02:30,040
love with Rusty I also get purple text here from that style tag.

36
00:02:30,090 --> 00:02:32,320
There are two main issues facing us here.

37
00:02:32,340 --> 00:02:36,810
One is the issue that this code is being repeated three different times.

38
00:02:36,810 --> 00:02:41,640
If you want identical styles on three different templates there has to be a better way to accomplish

39
00:02:41,640 --> 00:02:42,020
that.

40
00:02:42,060 --> 00:02:42,710
And there is.

41
00:02:42,810 --> 00:02:44,560
And we're going to address that second.

42
00:02:44,610 --> 00:02:49,330
We're going to start by addressing this issue of using the style tag which is not a good idea.

43
00:02:49,500 --> 00:02:56,130
What we want to do instead is use an external style sheet and linked to that style sheet using the link

44
00:02:56,130 --> 00:02:56,900
tag.

45
00:02:57,330 --> 00:03:02,010
So I'm going to write that link tag first which won't work because we don't have a style sheet yet but

46
00:03:02,010 --> 00:03:03,150
we'll create that second.

47
00:03:03,340 --> 00:03:08,990
So link and we need to provide raúl equal style sheet and then.

48
00:03:09,090 --> 00:03:14,300
And this needs to be the name of our style sheet and we'll just call it Dot.

49
00:03:14,340 --> 00:03:20,580
SS Okay so this is only on the Post's E.J. as template will save now.

50
00:03:20,700 --> 00:03:22,390
And let's go create that apt.

51
00:03:22,430 --> 00:03:28,860
C Ss except rather than creating it in the same directory as are apt J Yes we're actually going to make

52
00:03:28,860 --> 00:03:34,010
another directory where we'll put all of our style sheets all the javascript's that we write and then

53
00:03:34,010 --> 00:03:38,400
any other assets that we want are available and we're going to call it public and they can be named

54
00:03:38,430 --> 00:03:42,340
anything but public is a very common and conventional name for this directory.

55
00:03:42,430 --> 00:03:43,660
Well make sure when the right place.

56
00:03:43,800 --> 00:03:53,280
And then make directory public and will also create inside a public public slash app that see assess

57
00:03:53,400 --> 00:03:59,220
which is the name of our file here and save and you might be thinking OK wait a minute shouldn't this

58
00:03:59,220 --> 00:04:01,060
be public.

59
00:04:01,180 --> 00:04:02,720
Slash assess.

60
00:04:03,180 --> 00:04:04,940
And unfortunately the answer is no.

61
00:04:05,010 --> 00:04:10,500
We will leave it as apt upsy SS will tell express that our style sheets and javascript's are inside

62
00:04:10,500 --> 00:04:15,840
of the public directory and it will serve the public directory up for us so that we can link to things

63
00:04:15,960 --> 00:04:19,250
by just using the file names so I'll show you that in just a moment.

64
00:04:19,500 --> 00:04:26,370
Let's open up the public slash app that see SS file and add in some styles.

65
00:04:26,600 --> 00:04:27,920
Let's do something different.

66
00:04:28,020 --> 00:04:30,290
Will do body or background.

67
00:04:30,510 --> 00:04:31,290
It's going to be hideous.

68
00:04:31,290 --> 00:04:35,540
We will do background us yellow and color still purple.

69
00:04:35,900 --> 00:04:41,130
OK so now we have a really gross style she defined we can close out of here and we'll know if it's working

70
00:04:41,150 --> 00:04:41,290
.

71
00:04:41,400 --> 00:04:47,430
If this post E.J. as template shows up with a hideous yellow background in purple text it's not going

72
00:04:47,430 --> 00:04:51,760
to work just yet but I'll show you just so that you see that for yourself.

73
00:04:51,780 --> 00:04:53,270
So Noad apt.

74
00:04:53,370 --> 00:05:01,250
J.S. and we go back and refresh the page and we need to go to the post page and we don't get anything

75
00:05:01,260 --> 00:05:01,470
.

76
00:05:01,600 --> 00:05:05,880
And if I open up the consul here I get an error that says failed to load research.

77
00:05:05,950 --> 00:05:11,040
The server responded the status of 404 and it couldn't find apparat success.

78
00:05:11,110 --> 00:05:13,040
And the reason for this is pretty straightforward.

79
00:05:13,180 --> 00:05:18,550
When you create a web app and we use Express to start a web server it doesn't just automatically serve

80
00:05:18,610 --> 00:05:22,610
every single file that it sees it doesn't know that we want to do that.

81
00:05:22,660 --> 00:05:25,360
And the default is to not serve anything at all.

82
00:05:25,360 --> 00:05:27,370
Aside from the views directory.

83
00:05:27,670 --> 00:05:33,940
So if we want anything else we need to tell express explicitly hey I need you to serve my public directory

84
00:05:34,120 --> 00:05:36,030
or whatever other directors we have.

85
00:05:36,250 --> 00:05:41,470
We need to tell express to do that and likely express provides an easy way for us to do that inside

86
00:05:41,470 --> 00:05:42,390
of our act.

87
00:05:42,430 --> 00:05:48,490
Yes up top I'm going to add an app to use and then in parentheses.

88
00:05:48,700 --> 00:05:50,290
EXPRESS Does static.

89
00:05:50,440 --> 00:05:54,950
And then in parentheses again the word public which is the name for our directory.

90
00:05:55,180 --> 00:05:59,530
And this will tell express to serve the content of the public directory.

91
00:05:59,530 --> 00:06:07,690
And now if I restart my server and refresh the page over here close the consulate we get our yellow

92
00:06:07,690 --> 00:06:13,840
background and our purple font and we don't get any errors in the council.

93
00:06:13,840 --> 00:06:18,910
And if you want to include those style sheets on other pages you would just go and copy this link tag

94
00:06:20,440 --> 00:06:22,250
and put it up top.

95
00:06:22,450 --> 00:06:26,560
And of course we could have multiple style sheets as well if we wanted to and we could just link to

96
00:06:26,560 --> 00:06:30,800
them by giving them different names and making sure they're both in the public directory.

97
00:06:30,910 --> 00:06:35,830
Before we move on to Parshall's want to take a moment to show you a really quick thing we can do to

98
00:06:35,830 --> 00:06:41,020
make your code a little bit shorter notice that we're typing home that each E.J. yes loved.

99
00:06:41,050 --> 00:06:43,180
E.J. has posted E.J..

100
00:06:43,180 --> 00:06:48,630
Yes this is really minor but we can actually tell express that we're going to use Ejay us ahead of time

101
00:06:49,000 --> 00:06:55,240
and we can leave these off and just write home and evolve and it will automatically expect the files

102
00:06:55,240 --> 00:06:56,840
to be Ejaz files.

103
00:06:57,040 --> 00:07:06,040
And to do that we use app data set view engine and then we pass the second argument as E.J. s just like

104
00:07:06,040 --> 00:07:06,670
that.

105
00:07:06,790 --> 00:07:13,440
And if we save restart the server it will now expect those files to be Ejaz files.

106
00:07:13,450 --> 00:07:14,470
And if we refresh.

107
00:07:14,470 --> 00:07:16,560
Nothing should change at all.

108
00:07:16,560 --> 00:07:17,510
It still works.

109
00:07:17,650 --> 00:07:21,240
And now we don't have to explicitly say that Ejay us.

110
00:07:21,310 --> 00:07:22,930
So that's a very minor change.

111
00:07:22,930 --> 00:07:26,920
The next thing I want to show you is a little more significant and it's going to help us dry up our

112
00:07:26,920 --> 00:07:27,650
template.

113
00:07:28,000 --> 00:07:29,730
Right now we have this style sheet.

114
00:07:29,740 --> 00:07:35,680
This link to the style sheet repeated in all the templates but there's also something much more significant

115
00:07:35,680 --> 00:07:39,570
that we're missing which is our entire time boiler plate.

116
00:07:39,860 --> 00:07:43,250
We're missing the duct tape here.

117
00:07:43,420 --> 00:07:49,960
Andrew missing are aged him old tags and all the regular boilerplate that we expect head and inside

118
00:07:49,960 --> 00:07:51,120
of the head.

119
00:07:51,310 --> 00:07:54,220
We need the title and we'll give our app the title.

120
00:07:54,220 --> 00:08:00,550
Call it demo app and then we need the body as well.

121
00:08:00,550 --> 00:08:08,200
And then inside the body we should be putting this content and then we need to do that exact same thing

122
00:08:08,590 --> 00:08:09,760
on all of the other files.

123
00:08:09,760 --> 00:08:15,160
And I'm not going to do that because it's a waste of time and there's an easier solution where we don't

124
00:08:15,160 --> 00:08:20,230
have to copy this code and put it on every single template just like we shouldn't have to copy this

125
00:08:20,230 --> 00:08:23,840
single link tag and put that on every single template as well.

126
00:08:23,950 --> 00:08:28,870
And the way that we get around that is by using what are called Parshall's and Parshall's are basically

127
00:08:28,870 --> 00:08:35,500
files templates that we can write that we can include in other templates will create a template that

128
00:08:35,500 --> 00:08:36,780
looks like this.

129
00:08:36,820 --> 00:08:41,080
So we'll have the upper half of our boiler plate everything in the head.

130
00:08:41,320 --> 00:08:46,030
This will almost always be the same on every single page that we create on a given site.

131
00:08:46,060 --> 00:08:47,970
Same style sheet the same title.

132
00:08:48,160 --> 00:08:50,590
So we'll just make this its own template.

133
00:08:51,130 --> 00:08:54,680
And then at the bottom we'll make this its own template here.

134
00:08:54,850 --> 00:09:00,790
And then in between the two will have our content that changes depending on what template we're on or

135
00:09:00,810 --> 00:09:02,220
depending on what page we're on.

136
00:09:02,470 --> 00:09:05,680
So what we'll do is basically turn this into its own template.

137
00:09:05,860 --> 00:09:11,740
Turn this into its own template and then we just use those templates we refer to them in each one of

138
00:09:11,740 --> 00:09:12,520
these files.

139
00:09:12,670 --> 00:09:19,930
So we would say something like And this isn't valid code but we would do something like include header

140
00:09:20,350 --> 00:09:27,330
template and then at the bottom would do the same thing except for the footer.

141
00:09:28,180 --> 00:09:33,130
So we need to create those templates or Parshall's and to do that we'll make a new directory instead

142
00:09:33,130 --> 00:09:37,110
of views and we'll call that directory Parshall's.

143
00:09:37,240 --> 00:09:42,830
So we'll do and make directory views slash Parshall's just like that.

144
00:09:42,970 --> 00:09:49,750
And then instead of Parshall's we're going to make two files and the first one will be use slash Parshall's

145
00:09:50,200 --> 00:09:59,060
slash hetter that each us and then we'll make another partial exact same except footer and you could

146
00:09:59,060 --> 00:10:05,330
also call these like top and bottom Ejaz first and second whatever you want to call them but header

147
00:10:05,330 --> 00:10:07,530
and footer is definitely the standard name.

148
00:10:07,700 --> 00:10:13,640
So I'll make those two files and then I'll open them up and this time on the school over here and open

149
00:10:13,640 --> 00:10:21,770
up the header and I'm going to copy in this boilerplate just cut it out and put this over here instead

150
00:10:21,770 --> 00:10:22,330
of header.

151
00:10:22,430 --> 00:10:28,280
So this is what we want at the top of every page and then instead of footer all that we really want

152
00:10:28,880 --> 00:10:35,850
is the bottom of our template which is just the body and the closing team tag.

153
00:10:35,930 --> 00:10:36,810
Just like that.

154
00:10:36,970 --> 00:10:38,390
And if we wanted something else.

155
00:10:38,390 --> 00:10:40,670
So I'll do something a little more obvious.

156
00:10:40,790 --> 00:10:48,900
Let's just do a paragraph at the bottom that says something like trademark or some other footer text

157
00:10:48,920 --> 00:10:50,250
that we would see on a Web site.

158
00:10:50,270 --> 00:10:51,460
We'll just leave it at that.

159
00:10:51,530 --> 00:10:55,340
And so we expect to see this on every page where we include the footer.

160
00:10:55,370 --> 00:10:56,090
Partial.

161
00:10:56,310 --> 00:10:56,530
OK.

162
00:10:56,540 --> 00:10:58,010
So the two partials are done.

163
00:10:58,010 --> 00:10:59,400
Close those out.

164
00:10:59,570 --> 00:11:03,560
Fix this one just like this.

165
00:11:03,580 --> 00:11:05,110
All right save.

166
00:11:05,480 --> 00:11:07,660
And now we want to include the partials.

167
00:11:07,760 --> 00:11:09,200
So let's start with our love.

168
00:11:09,240 --> 00:11:12,500
Each of us and now we'll include that header partial.

169
00:11:12,500 --> 00:11:18,640
So we need to use a new bit of code in Ejay as tags erate include.

170
00:11:19,070 --> 00:11:23,680
And then the name of the file which is just hetter and we don't have to add that Ejay us because it

171
00:11:23,680 --> 00:11:25,620
is already looking for Ejaz files.

172
00:11:25,790 --> 00:11:30,620
So just include header and this actually won't work right away and I'll show you why.

173
00:11:30,680 --> 00:11:34,680
Let me put the footer one aswell in here.

174
00:11:35,510 --> 00:11:42,040
And if I start the server make sure I'll just clear some space here and then node.

175
00:11:42,140 --> 00:11:43,400
Apogee Yes.

176
00:11:43,550 --> 00:11:47,910
And if you refresh the page and this is only included on the love study J.S. template.

177
00:11:48,140 --> 00:11:50,450
So we need to go to slash.

178
00:11:50,450 --> 00:11:53,680
Fall in love with resti and we get an error.

179
00:11:53,780 --> 00:11:55,420
No such file or directory.

180
00:11:55,680 --> 00:11:58,420
Yes demo slash views slash hetter.

181
00:11:58,430 --> 00:11:59,310
E.J. Yes.

182
00:11:59,330 --> 00:12:00,750
So this tells us two things.

183
00:12:00,770 --> 00:12:03,430
One it knows it's supposed to be an Ejaz file.

184
00:12:03,470 --> 00:12:04,590
It's looking for a header.

185
00:12:04,700 --> 00:12:07,920
Yes but it's looking directly in the user directory.

186
00:12:08,000 --> 00:12:14,150
But we want it to look in views slash Parshall's slash heterodox Ejay us as you can see here views slash

187
00:12:14,150 --> 00:12:15,000
Parshall's.

188
00:12:15,110 --> 00:12:20,480
So we need to change our path here a little bit and we need to change it to say Parshall's slash Hetter

189
00:12:20,990 --> 00:12:23,660
and Parshall's slash footer.

190
00:12:23,660 --> 00:12:25,880
However that's still not going to fix it.

191
00:12:26,300 --> 00:12:31,790
And I'll show you one more time what happens when I start this up again and refresh the partial has

192
00:12:31,790 --> 00:12:33,010
been included just fine.

193
00:12:33,110 --> 00:12:39,100
And if we go to the elements you can see that we get the footer at the bottom and we have the body.

194
00:12:39,170 --> 00:12:43,100
And each time closing tags but the styles aren't being applied.

195
00:12:43,100 --> 00:12:46,670
It should be purple and yellow and it's just black and white.

196
00:12:46,670 --> 00:12:52,210
And if we look in the head we do have our link tag and it's linking to a file called apcupsd.

197
00:12:52,240 --> 00:12:53,940
SS But this isn't working.

198
00:12:54,140 --> 00:12:59,510
And if we look at the sources tab you'll see that we have this Rustie file that was sent back and it

199
00:12:59,510 --> 00:13:05,290
has our header and it has the main content and it also has the footer.

200
00:13:05,300 --> 00:13:10,550
So this is like the one assembled file because remember we send one thing back one response.

201
00:13:10,550 --> 00:13:15,500
So it makes this one file for us with our three Parshall's or two Parshall's Plus our content and it

202
00:13:15,500 --> 00:13:16,660
sends this back.

203
00:13:17,000 --> 00:13:20,710
And then there's also this ACT-UP see says that's totally empty.

204
00:13:20,870 --> 00:13:25,020
And what that means is that we've linked to our APS-C assessed incorrectly.

205
00:13:25,100 --> 00:13:30,530
So it's just appearing as an empty file and it's a really simple fix although we need to do is add a

206
00:13:30,530 --> 00:13:31,880
slash right here.

207
00:13:32,120 --> 00:13:36,920
I went through all that for a reason which is to show you the importance of paths and making sure that

208
00:13:36,920 --> 00:13:38,710
we have our paths set up correctly.

209
00:13:38,840 --> 00:13:45,170
So there's a difference between ACT-UP success and slash after the assess when we add the slash.

210
00:13:45,170 --> 00:13:51,050
It basically says look for us says not in the same directory that you're in right now but in the root

211
00:13:51,050 --> 00:13:51,930
directory.

212
00:13:51,990 --> 00:13:53,930
Let me show you a better illustration.

213
00:13:53,930 --> 00:14:00,270
Right now it's looking for success in the same directory as this Rusti template.

214
00:14:00,680 --> 00:14:08,550
Now if I go save it with the slash and restart the server they go back here and I refresh now.

215
00:14:09,290 --> 00:14:09,970
Take a look.

216
00:14:09,980 --> 00:14:10,970
Our styles work.

217
00:14:11,000 --> 00:14:17,090
Also notice we have the file with the h t m l and we have our apt the SS that is now outside of that

218
00:14:17,090 --> 00:14:21,890
directory it's not in the same folder and it has the correct styles which means that it found the file

219
00:14:21,890 --> 00:14:23,410
that we needed to find.

220
00:14:23,570 --> 00:14:27,360
So that slush seems like it's very minor but it's actually an important detail.

221
00:14:27,650 --> 00:14:31,940
So slash and then the name of our style sheet anything inside the public directory.

222
00:14:32,060 --> 00:14:38,570
So eventually it will look something like Slash stylesheets slash ACT-UP see assess and then we'll have

223
00:14:38,630 --> 00:14:46,370
a script tag where we have our source code to slash scripts slash maynt.

224
00:14:46,430 --> 00:14:46,990
Yes.

225
00:14:47,150 --> 00:14:52,720
And so we'll have inside the public directory scripts directory and stylesheets directory.

226
00:14:52,940 --> 00:14:56,760
For now though we only have one style sheet so we'll leave it like this.

227
00:14:57,440 --> 00:15:01,900
Let's quickly finish up and add in the partials to the other files as well.

228
00:15:02,330 --> 00:15:09,650
So in this one our home that each of us will pay set in and then at the bottom pasted in a swell and

229
00:15:09,650 --> 00:15:13,800
change it to be footer and save and then post it.

230
00:15:13,850 --> 00:15:14,410
Yes.

231
00:15:14,630 --> 00:15:15,520
Same thing.

232
00:15:15,920 --> 00:15:17,630
We want the header and footer.

233
00:15:17,680 --> 00:15:20,690
Get rid of that as well on all of the files.

234
00:15:20,900 --> 00:15:22,650
Parshall's slash footer.

235
00:15:23,270 --> 00:15:24,700
And that should be good for us.

236
00:15:24,710 --> 00:15:30,920
Let's refresh restart the server back here and this should look the same.

237
00:15:30,920 --> 00:15:39,440
Now if we go to the right path we also get our styles and if we go to slash posts we get the styles

238
00:15:39,440 --> 00:15:41,470
there as well.

239
00:15:41,480 --> 00:15:41,890
All right.

240
00:15:42,020 --> 00:15:43,550
So let's recap all of this.

241
00:15:43,610 --> 00:15:47,900
One of the first things that we did was create the public directory and add a style sheet inside of

242
00:15:47,900 --> 00:15:54,080
it and in order for that to work we had to make sure to tell express to serve the public directory.

243
00:15:54,380 --> 00:15:59,690
Then once we did that we made a small change which was to tell express that all of our templates will

244
00:15:59,690 --> 00:16:02,480
be yes unless otherwise noted.

245
00:16:02,540 --> 00:16:05,960
So we don't have to write each Yes after every template name.

246
00:16:06,410 --> 00:16:09,380
And then the big change that we made was introducing Parshall's.

247
00:16:09,530 --> 00:16:12,650
So we made a directory called Parshall's can be named anything.

248
00:16:12,650 --> 00:16:16,130
Some people call it layouts Parshall's is also very common.

249
00:16:16,130 --> 00:16:21,890
And then we had two files or header and footer and the whole point of this was just to help dry up our

250
00:16:21,890 --> 00:16:25,510
code so that we didn't have to add this to every single template.

251
00:16:25,880 --> 00:16:32,300
Instead we go to our template and all that we have to do is write include Parshall's slash hetter and

252
00:16:32,300 --> 00:16:37,610
we're not limited just to header and footer we might have one for the nav bar if we have a nav bar on

253
00:16:37,610 --> 00:16:38,750
every single page.

254
00:16:38,840 --> 00:16:42,880
We could have another partial that we include old Parshall's slash neph.

255
00:16:42,970 --> 00:16:45,300
So there aren't any rules on what we can and can't do.

256
00:16:45,410 --> 00:16:49,080
But most common are header and footer.

257
00:16:49,610 --> 00:16:50,520
All right so that's it