1
00:00:00,240 --> 00:00:03,200
Welcome back in this lesson I'm going to show you how we can write.

2
00:00:03,210 --> 00:00:03,990
H m l.

3
00:00:04,020 --> 00:00:09,420
In a separate file and we can send that file back in the response rather than what we've been doing

4
00:00:09,420 --> 00:00:12,000
so far using redstart send.

5
00:00:12,090 --> 00:00:13,880
There are three main objectives here.

6
00:00:13,890 --> 00:00:20,400
The first is to use redstart render to render him out to send back a file from each file and that will

7
00:00:20,400 --> 00:00:23,150
make more sense once we talk about what each of us is.

8
00:00:23,460 --> 00:00:24,740
And that's the next objective.

9
00:00:24,780 --> 00:00:27,340
Explain what Ejaz is and why we use it.

10
00:00:27,360 --> 00:00:30,920
And then lastly pass variables to Ejay as templates.

11
00:00:30,930 --> 00:00:35,760
So to get started here I'm going to need a new Express app and I'm going to go through creating the

12
00:00:35,760 --> 00:00:41,640
basic express app from scratch which I won't continue doing in every video but it still is pretty early

13
00:00:41,640 --> 00:00:42,440
on in the course.

14
00:00:42,480 --> 00:00:46,440
And I just want to make sure you get used to seeing it and doing it because it's something that you'll

15
00:00:46,440 --> 00:00:48,280
be doing nonstop.

16
00:00:48,300 --> 00:00:54,210
So I have a directory called More express where I'll be working from for this unit and I'll make a new

17
00:00:55,110 --> 00:01:01,130
directory inside of that and we'll just call this Ejay us demo.

18
00:01:02,290 --> 00:01:10,540
And then instead of Ejaz demo we'll run NPM in it and I'll just speed through this.

19
00:01:10,560 --> 00:01:11,990
So that name is fine.

20
00:01:12,000 --> 00:01:14,800
Version is fine description is empty.

21
00:01:14,880 --> 00:01:16,700
I always like to change this to app.

22
00:01:16,830 --> 00:01:17,490
Yes.

23
00:01:17,490 --> 00:01:19,690
Just a personal preference.

24
00:01:20,070 --> 00:01:21,580
Hit enter a few more times.

25
00:01:21,660 --> 00:01:25,100
You don't need to fill any of those and there we go.

26
00:01:25,470 --> 00:01:32,940
And now if we do allow us we have a package that Jason let's create our act out J us and we'll also

27
00:01:32,940 --> 00:01:39,120
run NPM install express dash dash save.

28
00:01:39,150 --> 00:01:41,360
There we go.

29
00:01:41,400 --> 00:01:45,780
Now let's open up the jazz file and start adding some code in there.

30
00:01:45,780 --> 00:01:52,410
And rather than just doing ls and then clicking on J.S. and clicking on open I recently found another

31
00:01:52,410 --> 00:01:53,350
way of doing that.

32
00:01:53,460 --> 00:02:00,570
That Cloud 9 recently added which is if you type C9 space and then the name of a file or the path to

33
00:02:00,570 --> 00:02:01,290
a file.

34
00:02:01,380 --> 00:02:03,040
So C9 base app.

35
00:02:03,060 --> 00:02:07,090
J Yes that will open it up for you in the editor.

36
00:02:07,200 --> 00:02:11,760
It's much faster than having to type ls and then click on the file and then click on Open.

37
00:02:11,760 --> 00:02:22,380
So let's get the basic express code in here so far express equals require express and then var app equals

38
00:02:22,410 --> 00:02:25,160
express execute it as a function.

39
00:02:25,170 --> 00:02:33,710
One thing that you will occasionally see is this where someone said Savar app equal to require express

40
00:02:33,840 --> 00:02:36,720
and then just run it as a function immediately.

41
00:02:36,720 --> 00:02:43,410
Most people though will do it like this in two seperate steps and most commonly you'll just see Xpress

42
00:02:43,500 --> 00:02:45,660
and app that those can be anything.

43
00:02:45,660 --> 00:02:46,950
Now let's get the act up.

44
00:02:46,950 --> 00:02:53,450
Listen going at the very bottom which will start the server so it would need the port which is process

45
00:02:53,800 --> 00:03:02,280
that EMV port and then process that D-NV IP and those are environment variables that cloud 9 has set

46
00:03:02,280 --> 00:03:06,250
up that we're accessing the port and IP address.

47
00:03:06,510 --> 00:03:13,230
And then I add in my callback that will run once the server has been set up once it's listening and

48
00:03:13,230 --> 00:03:15,840
we'll just see what comes about log.

49
00:03:16,060 --> 00:03:21,540
The server is listening just like that and will save.

50
00:03:21,540 --> 00:03:25,350
Now let's add in our first route and we will do the route route.

51
00:03:25,350 --> 00:03:30,090
I always like to start there and that's always a confusing phrase to some of my students because this

52
00:03:30,090 --> 00:03:34,130
word that I pronounce route some of them will pronounce as root.

53
00:03:34,410 --> 00:03:36,830
I try to make it very clear when I say roots.

54
00:03:36,900 --> 00:03:41,250
I'm only talking about R O T as in this.

55
00:03:41,280 --> 00:03:42,870
The root route.

56
00:03:43,140 --> 00:03:53,040
OK so let's add that in apt get root or slash and then our callback function will be run whenever a

57
00:03:53,040 --> 00:04:00,450
request to get requests is made to slash and then will have these two objects request in response and

58
00:04:00,450 --> 00:04:06,500
we'll go ahead and just call the rez send and we'll just do a simple thing.

59
00:04:06,540 --> 00:04:08,700
Welcome to the home page.

60
00:04:08,730 --> 00:04:11,730
Just like that should all be review at this point.

61
00:04:12,090 --> 00:04:16,020
Let's start the server up so node j.

62
00:04:16,890 --> 00:04:18,280
Looks like everything's good.

63
00:04:18,390 --> 00:04:22,500
Let's now go to the root page here and refresh.

64
00:04:22,500 --> 00:04:23,710
Welcome to the home page.

65
00:04:23,890 --> 00:04:28,580
Obviously this type of content a single line of text is pretty boring.

66
00:04:28,610 --> 00:04:34,890
What we can do to spruce it up a little bit is we can go back in here and make this some H-2A Mel.

67
00:04:34,950 --> 00:04:43,640
If we wanted to just like that and then we can add in below that and H-2 that says blah blah.

68
00:04:43,770 --> 00:04:45,910
Just like that.

69
00:04:46,020 --> 00:04:46,760
There we go.

70
00:04:46,920 --> 00:04:50,730
And if we save this and restart the server.

71
00:04:51,120 --> 00:04:53,980
And then we go back here and refresh.

72
00:04:53,980 --> 00:05:00,070
We get HVM albums being rendered to us but that's still incredibly painful to actually type out an entire

73
00:05:00,070 --> 00:05:00,850
page.

74
00:05:00,850 --> 00:05:04,290
It's technically possible but it would be so difficult.

75
00:05:04,450 --> 00:05:05,720
It's just not a good idea.

76
00:05:05,920 --> 00:05:10,870
So luckily there's an easier way where we can write all of our code in a separate file all the time

77
00:05:10,960 --> 00:05:17,070
that we want all the C Ss and yes all the front end javascript that we want to send back to the user

78
00:05:17,530 --> 00:05:23,920
so we can use a method called render and that render method lives on the response object whatever we're

79
00:05:23,920 --> 00:05:24,430
calling it.

80
00:05:24,430 --> 00:05:26,730
In our case revs so rest don't render.

81
00:05:26,730 --> 00:05:35,170
And then we give it a name of a file like home page or home dot aged him or Dogstar aged him out or

82
00:05:35,170 --> 00:05:36,950
something like that.

83
00:05:37,270 --> 00:05:40,950
And of course we need to have that file created and it needs to have some content in it.

84
00:05:41,230 --> 00:05:46,840
But even before we do that there is a small issue I'll get rid of this line and the problem is when

85
00:05:46,840 --> 00:05:50,810
we use Express we don't write plain h m l files.

86
00:05:50,950 --> 00:05:52,400
There are ways of doing that.

87
00:05:52,420 --> 00:05:58,060
It requires a little more setup but most of our web apps aren't going to be just standard Tim static

88
00:05:58,060 --> 00:05:59,410
files that are sent back.

89
00:05:59,590 --> 00:06:05,290
What we're looking for are dynamic html files which are called templates and in the second half of this

90
00:06:05,290 --> 00:06:07,080
video we'll introduce those.

91
00:06:07,270 --> 00:06:13,360
But for now I'm going to go here and change this to E.J. s and all that I'll say about E.J. is that

92
00:06:13,360 --> 00:06:18,280
it stands for embedded javascript and that you'll learn a lot more about it in about five minutes when

93
00:06:18,280 --> 00:06:23,250
it get request is made to slash our code will render a file called Dogstar.

94
00:06:23,380 --> 00:06:23,990
Yes.

95
00:06:24,060 --> 00:06:28,060
And let's change it to home just because that makes more sense with the route route.

96
00:06:28,330 --> 00:06:33,580
And so we need to create that file and we actually don't create it in the same directory as actually

97
00:06:33,580 --> 00:06:34,340
us.

98
00:06:34,570 --> 00:06:41,560
What we need to do is make a new directory called views and that's not an arbitrary name that's a directory

99
00:06:41,560 --> 00:06:43,380
that express is going to look for.

100
00:06:43,540 --> 00:06:49,360
So whenever we render a file whatever it's called it's going to look first in the views directory and

101
00:06:49,360 --> 00:06:52,650
try and find this exact file inside a fuse.

102
00:06:52,660 --> 00:06:54,790
So now let's create that.

103
00:06:54,790 --> 00:07:01,520
So I'll do a touch views slash home that Ejay us just like that.

104
00:07:01,780 --> 00:07:04,380
And then the next thing I want to do is add some content.

105
00:07:04,420 --> 00:07:10,320
So let's open that file with that new C9 command C-9 views slash home.

106
00:07:10,360 --> 00:07:10,610
E.J..

107
00:07:10,610 --> 00:07:14,800
Yes and let's add some stuff in here.

108
00:07:14,890 --> 00:07:17,530
This is the home page.

109
00:07:17,890 --> 00:07:19,100
Let's fix this.

110
00:07:19,480 --> 00:07:24,850
And let's also add an image and I have an image I'd like to use here.

111
00:07:24,850 --> 00:07:26,960
This is something called a palm ski.

112
00:07:27,080 --> 00:07:29,230
It's a Pomeranian and a husky mix.

113
00:07:29,230 --> 00:07:33,700
Allegedly this is a full grown Parsky which is pretty crazy if that's true.

114
00:07:33,910 --> 00:07:38,240
It looks like a miniaturised husky or just a permanent husky puppy.

115
00:07:38,350 --> 00:07:41,720
Anyway so we'll copy this URL and go back.

116
00:07:41,800 --> 00:07:44,380
And of course you can do any image that you'd like.

117
00:07:44,380 --> 00:07:48,670
You don't have to go find that or typeless you are Ellaby yourself and will save.

118
00:07:49,060 --> 00:07:52,880
And now we'll close out of this and we should be good to go.

119
00:07:53,050 --> 00:07:58,030
Except for missing one thing and I'm actually going to let express tell us what we're missing.

120
00:07:58,030 --> 00:07:59,310
We'll get an error message.

121
00:07:59,530 --> 00:08:02,940
So I'm going to clear this just to make some more room for you.

122
00:08:03,160 --> 00:08:05,510
And now I'm going to start the server.

123
00:08:06,910 --> 00:08:12,110
And when we go to the route route it will call the render method which will look for home.

124
00:08:12,270 --> 00:08:12,950
Yes.

125
00:08:13,150 --> 00:08:15,650
Inside of a directory called views.

126
00:08:15,790 --> 00:08:21,580
And then once it finds it it will take the content and send that back in the response so it we'll go

127
00:08:21,580 --> 00:08:28,690
back to our app and refresh and we get an error message here it says cannot find Montreuil.

128
00:08:28,690 --> 00:08:28,940
E.J..

129
00:08:29,020 --> 00:08:29,780
Yes.

130
00:08:30,160 --> 00:08:36,340
And what that means is that express is looking for a package called Ejay us that it needs to use in

131
00:08:36,340 --> 00:08:39,630
order to render and Ejaz file.

132
00:08:39,670 --> 00:08:46,570
So we need to NPM install Ejay us and this will all make sense why we're using Ejaz in just a few minutes

133
00:08:46,570 --> 00:08:46,590
.

134
00:08:46,600 --> 00:08:52,440
But for now just trust me NPM install Ejay us and we'll do dash dash save.

135
00:08:53,230 --> 00:08:57,080
And once that finishes we can just do node.

136
00:08:57,160 --> 00:09:04,570
J.S. again and refresh the page now and we get this is the home page and our adorable puppies last full

137
00:09:04,570 --> 00:09:06,020
grown Tomsky.

138
00:09:06,130 --> 00:09:11,530
So now we have a file of h t m l that we've written that we're now sending back to the user and that's

139
00:09:11,530 --> 00:09:12,820
being rendered in the browser.

140
00:09:13,030 --> 00:09:17,900
And that's great but this is still extremely limited for web applications.

141
00:09:17,920 --> 00:09:23,980
This will only send back the exact same page every single time and in most web apps that's not what

142
00:09:23,980 --> 00:09:24,530
we want.

143
00:09:24,670 --> 00:09:28,260
Maybe the home page is the same or the log in page is the same.

144
00:09:28,330 --> 00:09:33,850
But then once the user has logged in for example there's usually a message that says welcome back calls

145
00:09:34,300 --> 00:09:35,370
or welcome back.

146
00:09:35,380 --> 00:09:37,960
Adorable Parsky puppy slash adult.

147
00:09:37,960 --> 00:09:39,870
Let me show you what I mean with a quick example.

148
00:09:40,060 --> 00:09:45,960
So I'll go back and add in a new route and our route is going to be something like Slash.

149
00:09:46,060 --> 00:09:54,100
Fall in love with and then a thing like Rustie and then we can also go to fall in love with a palm ski

150
00:09:54,100 --> 00:09:54,480
.

151
00:09:54,550 --> 00:09:55,780
I think that's how it's spelled.

152
00:09:55,990 --> 00:10:01,780
And we want an HMO file that will show us a message that contains the variable from the route that path

153
00:10:01,780 --> 00:10:02,480
parameter.

154
00:10:02,590 --> 00:10:14,900
So it would say something like you fell in love with rusty so to do that you need to define or get slash

155
00:10:15,290 --> 00:10:18,560
fall in love with Slash thing.

156
00:10:18,570 --> 00:10:19,600
That's what we'll call it.

157
00:10:19,940 --> 00:10:24,440
And then we need our request and response inside the callback.

158
00:10:24,440 --> 00:10:32,480
And just like the last exercise will capture thing which will be VAR's thing equals request up harams

159
00:10:32,960 --> 00:10:39,290
thing and then we can start with this simple red dot send just like we did with the animal speaking

160
00:10:39,290 --> 00:10:39,950
exercise.

161
00:10:39,960 --> 00:10:41,770
The pig says oink.

162
00:10:41,900 --> 00:10:44,050
The cow says moo can do the same thing here.

163
00:10:44,060 --> 00:10:51,130
So we'll just say you fell in love with a plus thing.

164
00:10:51,890 --> 00:10:52,310
All right.

165
00:10:52,340 --> 00:11:00,890
So this is a review and if I restart the server now and I go back and now I go to slash fall in love

166
00:11:01,280 --> 00:11:10,820
with Slash ske we get you fell in love with Tomsky which isnt exactly grammatically correct but then

167
00:11:10,820 --> 00:11:12,850
again neither is the word pomps.

168
00:11:13,070 --> 00:11:18,770
So I'll go back and now what we want to do is figure out how we can send an H to him I'll file back

169
00:11:18,950 --> 00:11:25,850
that says you fell in love with plus and then some thing we can start by creating the file and we'll

170
00:11:25,850 --> 00:11:31,490
just call this file inside the views directory and call it whatever you want of course but I'll just

171
00:11:31,490 --> 00:11:36,380
go with love E.J. as to keep it short and then we'll fill that in.

172
00:11:36,380 --> 00:11:40,520
So we need C-9 views slash.

173
00:11:40,940 --> 00:11:41,840
Love that.

174
00:11:41,950 --> 00:11:51,110
Yes we have that open and let's start by just adding in you fell in love with and then we need to fill

175
00:11:51,110 --> 00:11:51,910
in the blank.

176
00:11:52,010 --> 00:11:56,780
But we don't know what to put here yet so we'll just leave it like that and let's put a note here that

177
00:11:56,780 --> 00:12:07,500
says P.S. This is the love that Ejay us file just so that you know it's coming from the Ejaz file.

178
00:12:07,500 --> 00:12:10,430
It's not the redstart send that we have right now.

179
00:12:10,490 --> 00:12:12,270
In fact to get rid of that.

180
00:12:13,100 --> 00:12:18,230
So what we want to do is render that file so read is not render.

181
00:12:18,500 --> 00:12:21,420
And the name of the file is love that E.J..

182
00:12:21,420 --> 00:12:27,080
Yes it will automatically look in the views directory which is right there.

183
00:12:27,110 --> 00:12:31,980
There we go we have two files let's start the server up Node.

184
00:12:32,110 --> 00:12:36,260
Yes will restart and refresh.

185
00:12:36,590 --> 00:12:36,920
OK.

186
00:12:36,950 --> 00:12:38,520
So our file is here.

187
00:12:38,540 --> 00:12:41,700
You fell in love with and we need to fill in the blank right here.

188
00:12:41,990 --> 00:12:46,250
And I know this is a really simple example which is the point I don't want to confuse you with something

189
00:12:46,250 --> 00:12:51,860
crazy just yet but this type of logic is really important where we can fill a template in with data

190
00:12:51,860 --> 00:12:57,950
coming back from a database or data that a user has provided where it's not a static kill file.

191
00:12:57,980 --> 00:13:00,220
That is exactly the same every time.

192
00:13:00,260 --> 00:13:05,770
We basically want to add variables into HTL and that's what each Yes lets us do.

193
00:13:06,080 --> 00:13:09,380
So E.J. S stands for embedded javascript.

194
00:13:09,380 --> 00:13:18,520
It lets us embed javascript code variables if statements loops inside of H Timo.

195
00:13:18,560 --> 00:13:20,450
So it's how we could do something like.

196
00:13:20,840 --> 00:13:26,970
You fell in love with and then here this won't work just yet but we could put our variable called thing

197
00:13:27,640 --> 00:13:30,650
let's just do it in all caps thing variable.

198
00:13:30,650 --> 00:13:36,430
But this won't work because it will just treat it as regular HMO and it will just show us the word thing

199
00:13:36,440 --> 00:13:37,700
variable.

200
00:13:37,700 --> 00:13:43,010
We need to do something to tell each of us that this is javascript code not teach to him I'll treat

201
00:13:43,010 --> 00:13:44,200
this like javascript.

202
00:13:44,390 --> 00:13:47,160
Luckily it just gives us a way of doing that.

203
00:13:47,210 --> 00:13:49,600
It's a little bit weird when you see it for the first time.

204
00:13:49,790 --> 00:13:51,220
It looks like this.

205
00:13:51,830 --> 00:13:58,640
So we have our brackets and then percent signs and then equal sign on the opening bracket and whatever

206
00:13:58,640 --> 00:14:03,150
goes between these two brackets here is going to be treated as Javascript.

207
00:14:03,320 --> 00:14:10,580
So I'll show you what I mean we can just use something like five plus five which in regular H M L and

208
00:14:10,580 --> 00:14:14,010
I'll do that actually to show you five plus five.

209
00:14:14,450 --> 00:14:20,480
Without these Ejay Yes brackets will just print five plus five but if we do it right here we'll actually

210
00:14:20,480 --> 00:14:22,000
get 10 printed out.

211
00:14:22,130 --> 00:14:33,230
So I'll save this template quit or start the server again node after J us and refresh the page and we

212
00:14:33,230 --> 00:14:36,920
get you fell in love with five plus five ten.

213
00:14:37,130 --> 00:14:38,010
And I totally get it.

214
00:14:38,030 --> 00:14:41,270
If I pause five ten is a complete catch all right all right.

215
00:14:41,270 --> 00:14:42,220
So we'll go back.

216
00:14:42,350 --> 00:14:44,980
So we don't want five plus five to be printed there.

217
00:14:45,020 --> 00:14:48,830
But we actually want is the thing variable.

218
00:14:48,890 --> 00:14:52,780
We'll just call it the thing VAR or it let's just do thing far.

219
00:14:52,940 --> 00:14:56,180
And this needs to come from our code over here.

220
00:14:56,180 --> 00:15:02,820
So what we need to do is pass this value thing to our love that E.J. as template and we want to print

221
00:15:02,820 --> 00:15:07,290
it out and while we're here also get rid of the five plus five.

222
00:15:07,490 --> 00:15:12,980
So we get you fell in love with and then we need to define the thing far and you might think we could

223
00:15:12,980 --> 00:15:15,400
just do this var thing.

224
00:15:15,410 --> 00:15:18,200
Var equals request up from slot thing.

225
00:15:18,440 --> 00:15:24,320
And you might be hoping that expressed automatically sends all those variables somehow to this template

226
00:15:24,330 --> 00:15:24,360
.

227
00:15:24,410 --> 00:15:26,410
And it just knows about thing var.

228
00:15:26,750 --> 00:15:28,550
Unfortunately that's not how it works.

229
00:15:28,670 --> 00:15:37,790
And I'll show you that restart the server I'll get an error message and it tells me nothing var is not

230
00:15:37,790 --> 00:15:38,590
defined.

231
00:15:38,930 --> 00:15:41,800
So now I need to go back and define thing bar.

232
00:15:41,960 --> 00:15:48,230
And the way that I do that is actually pass it through to my loved E.J. s template and I do that on

233
00:15:48,230 --> 00:15:52,170
the dot render line when you pass it through as an object.

234
00:15:52,340 --> 00:15:57,210
And in that object I can put multiple pieces of data that I want to have in my template.

235
00:15:57,440 --> 00:16:03,230
So rather than things are just going to call it thing to make this clearer and then here I'm going to

236
00:16:03,230 --> 00:16:10,910
pass data through and I'm going to say in the template thing var should be equal to thing.

237
00:16:11,330 --> 00:16:15,420
What this will do is take the value of thing and stick it right here.

238
00:16:15,560 --> 00:16:19,450
So it will look like a thing far is equal to Rusty.

239
00:16:19,610 --> 00:16:22,760
And then over here thing var will be replaced.

240
00:16:22,760 --> 00:16:25,810
All of this would be replaced by rusty.

241
00:16:26,460 --> 00:16:29,600
OK so we'll leave it at that.

242
00:16:29,600 --> 00:16:35,900
Go back here and why don't we just start by hard coding it as resti just like that and will restart

243
00:16:35,900 --> 00:16:42,240
the server and I'll refresh the page and I get you fell in love with Rusty.

244
00:16:42,350 --> 00:16:48,560
So rather than doing a string the next step is just to go back to what we had which is the entire thing

245
00:16:48,560 --> 00:16:55,850
variable save and I'll pass that through under the name thing bar and then we render that here with

246
00:16:55,850 --> 00:16:56,000
there.

247
00:16:56,010 --> 00:16:58,350
E.J. has tagged this wonky looking thing.

248
00:16:58,610 --> 00:17:02,200
Restart the server again go back.

249
00:17:02,390 --> 00:17:05,910
Now I'm getting you fell in love with Parsky.

250
00:17:06,070 --> 00:17:13,440
And if I go to you you fell in love with Tater Tots that's also reflected here.

251
00:17:13,520 --> 00:17:16,510
This is a very powerful concept that we'll be using.

252
00:17:16,520 --> 00:17:21,190
Like I said and pretty much every app from here on out having these dynamic pages having itched him

253
00:17:21,190 --> 00:17:26,870
all responses that can change depending on what the user asked for in specific pieces of data in the

254
00:17:26,870 --> 00:17:27,950
request.

255
00:17:27,950 --> 00:17:31,630
The other thing I'll show is that this is just regular Javascript.

256
00:17:31,730 --> 00:17:39,590
So right here I can do things like to uppercase and this will be run first and then it will return something

257
00:17:39,650 --> 00:17:42,100
that will be printed up like rusty.

258
00:17:42,470 --> 00:17:46,880
So it's just regular javascript and we'll talk more about what should go in here and what shouldn't

259
00:17:46,890 --> 00:17:47,020
.

260
00:17:47,150 --> 00:17:51,650
Because there are some rules you don't want to clutter your aged him out all of your Ejaz template with

261
00:17:51,650 --> 00:17:53,200
tons and tons javascript.

262
00:17:53,300 --> 00:17:57,070
You want to keep it to a minimum but for now I'll do this and save.

263
00:17:57,230 --> 00:17:58,990
And this will be the very last thing we do.

264
00:17:59,270 --> 00:18:01,860
Restart the server refresh.

265
00:18:02,180 --> 00:18:04,280
And now I get a capitalized version.

266
00:18:04,280 --> 00:18:06,600
All right so now let's recap everything we talked about.

267
00:18:06,620 --> 00:18:08,330
There's quite a bit in this lesson.

268
00:18:08,360 --> 00:18:14,180
First thing is that we can send back the contents of a file using redstart render like we did here and

269
00:18:14,180 --> 00:18:20,600
here and those templates need to exist in the views directory express automatically looks there.

270
00:18:20,600 --> 00:18:26,570
The next thing we talked about his Ejaz which stands for embedded javascript and it's what enables us

271
00:18:26,570 --> 00:18:31,440
to have dynamic templates HDMI out that will change depending on some data that we provide.

272
00:18:31,640 --> 00:18:37,730
We saw that we needed to do each Yes and then have our file be called something DOD Ejay Yes.

273
00:18:37,940 --> 00:18:44,140
And then we also needed to run NPM install Ejay us and then the last thing is that we can use Ejay us

274
00:18:44,240 --> 00:18:47,230
brackets which are very weird at first to type.

275
00:18:47,360 --> 00:18:52,040
You probably aren't used to using this part of the keyboard all that much but there are brackets where

276
00:18:52,040 --> 00:18:57,140
the percent sign and an equal and then on the other side it's just a percentage sign and whatever goes

277
00:18:57,140 --> 00:19:03,650
inside is treated as JavaScript code first and then whatever that code returns is then printed to the

278
00:19:03,850 --> 00:19:07,270
HMO and to pass data through.

279
00:19:07,760 --> 00:19:12,500
We can pass an object in the red dot render call where we have key value pairs.

280
00:19:12,500 --> 00:19:14,660
It's just a regular javascript object.

281
00:19:14,660 --> 00:19:19,790
And in the template we have access to the variables that we define are the properties of the object

282
00:19:19,790 --> 00:19:19,890
.

283
00:19:19,910 --> 00:19:26,330
In this case thing are which is equal to whatever the value of thing is which changes every time.

284
00:19:26,570 --> 00:19:29,510
And in here we can then use thing for.

285
00:19:29,780 --> 00:19:32,830
OK so I know there's a lot in this video a lot to digest.

286
00:19:32,840 --> 00:19:36,280
We'll be getting a lot more practice with these concepts in particular.

287
00:19:36,320 --> 00:19:36,590
E.J..

288
00:19:36,590 --> 00:19:42,320
Yes and that E.J. has brackets and then passing data to a template is something that we'll be doing

289
00:19:42,320 --> 00:19:43,740
in every video from here on out