1
00:00:00,000 --> 00:00:02,000
[? Music ?]

2
00:00:02,000 --> 00:00:05,000
[Code Racer] [Building a Server with Express]

3
00:00:05,000 --> 00:00:07,000
[Jim Hoskins] Now we're able to see that our CoffeeScript works.

4
00:00:07,000 --> 00:00:10,000
It's able to print out some basic text, but we actually want a real server, 

5
00:00:10,000 --> 00:00:13,000
so let's get into that.

6
00:00:13,000 --> 00:00:16,000
I'm going to move this console.log of Hello World,

7
00:00:16,000 --> 00:00:18,000
and we're going to require a couple of packages.

8
00:00:18,000 --> 00:00:21,000
The first one we're going to do is CoffeeScript.

9
00:00:21,000 --> 00:00:29,000
I'm just simply going to do require 'coffee-script.'

10
00:00:29,000 --> 00:00:33,000
And what this does is it allows Node to require

11
00:00:33,000 --> 00:00:35,000
other CoffeeScript files.

12
00:00:35,000 --> 00:00:39,000
We only need to really include this in the file that we're going to be running

13
00:00:39,000 --> 00:00:41,000
because once it's loaded once, all the require calls

14
00:00:41,000 --> 00:00:45,000
will be able to find .coffee files.

15
00:00:45,000 --> 00:00:47,000
And the next thing we're going to want to include is Express,

16
00:00:47,000 --> 00:00:50,000
and Express is the application framework we'll be using,

17
00:00:50,000 --> 00:00:53,000
and this allows us to route certain URLs

18
00:00:53,000 --> 00:00:56,000
to certain code, which will allow us to create different pages, 

19
00:00:56,000 --> 00:00:59,000
like the home page, a lobby page,

20
00:00:59,000 --> 00:01:03,000
as well as APIs that will be located at different URLs

21
00:01:03,000 --> 00:01:05,000
and anything else that we need, for instance,

22
00:01:05,000 --> 00:01:08,000
sending static files across.

23
00:01:08,000 --> 00:01:11,000
To do this, all we need to do is require Express,

24
00:01:11,000 --> 00:01:15,000
and we'll set up a server that we'll add routes to.

25
00:01:15,000 --> 00:01:17,000
This is easy enough to do.

26
00:01:17,000 --> 00:01:19,000
We'll store Express into a variable called Express.

27
00:01:19,000 --> 00:01:24,000
And we'll do a require with the string "express"

28
00:01:24,000 --> 00:01:27,000
to load in the module, and now we have  Express there.

29
00:01:27,000 --> 00:01:30,000
And the next thing we need to do is use the create server

30
00:01:30,000 --> 00:01:33,000
method of Express to create an instance of our application,

31
00:01:33,000 --> 00:01:36,000
which we'll store in the app variable.

32
00:01:36,000 --> 00:01:40,000
So "app = express.createServer."

33
00:01:40,000 --> 00:01:43,000
And this app is everything that we're going to be defining different 

34
00:01:43,000 --> 00:01:46,000
configurations on, defining routes, 

35
00:01:46,000 --> 00:01:50,000
as well as the actual app that will listen on a port

36
00:01:50,000 --> 00:01:52,000
to allow us to serve pages.

37
00:01:52,000 --> 00:01:57,000
We can start off by doing "app.listen."

38
00:01:57,000 --> 00:02:02,000
And what we can do is pass in a port, and we'll say port 3000.

39
00:02:02,000 --> 00:02:07,000
And at the end of the file here, we'll just add a console.log,

40
00:02:07,000 --> 00:02:14,000
and we'll say that the "Server is listening."

41
00:02:14,000 --> 00:02:18,000
If we were to run this, we'll go back to our console here,

42
00:02:18,000 --> 00:02:23,000
and we'll run "coffee server.coffee."

43
00:02:23,000 --> 00:02:27,000
And if we go to our browser, load up local host 3000,

44
00:02:27,000 --> 00:02:30,000
we actually get "Cannot GET /."

45
00:02:30,000 --> 00:02:33,000
And this is the default error message that Express will send out

46
00:02:33,000 --> 00:02:35,000
for anything that it cannot find.

47
00:02:35,000 --> 00:02:37,000
It's its 404 page.

48
00:02:37,000 --> 00:02:41,000
In fact, if we go to any other route, like something else,

49
00:02:41,000 --> 00:02:44,000
we'll see that it updates that it cannot find that page.

50
00:02:44,000 --> 00:02:46,000
What we have to do is define these different routes

51
00:02:46,000 --> 00:02:49,000
and the type of content that they should return.

52
00:02:49,000 --> 00:02:51,000
Let's go back to our editor here.

53
00:02:51,000 --> 00:02:55,000
Now, between the app.createServer and app.listen,

54
00:02:55,000 --> 00:02:57,000
we're going to define our routes.

55
00:02:57,000 --> 00:03:00,000
The first thing I want to do is define the route for the route 

56
00:03:00,000 --> 00:03:04,000
or the / URL, so we'll do "app.get."

57
00:03:04,000 --> 00:03:09,000
And get is the HTTP method, so instead of a get, we could do post

58
00:03:09,000 --> 00:03:12,000
to handle, for instance, form posting

59
00:03:12,000 --> 00:03:15,000
or put or any of the other HTTP methods.

60
00:03:15,000 --> 00:03:18,000
But for our purposes, we'll be doing get,

61
00:03:18,000 --> 00:03:22,000
and then we'll pass in the URL, and our URL is simply / 

62
00:03:22,000 --> 00:03:24,000
for the route of our application.

63
00:03:24,000 --> 00:03:26,000
And finally, we'll pass a callback function,

64
00:03:26,000 --> 00:03:31,000
and in this callback function will be passed a request object and a response object.

65
00:03:31,000 --> 00:03:35,000
The way we'll do this in CoffeeScript is we will define a function

66
00:03:35,000 --> 00:03:38,000
by first declaring the parameters in parentheses. 

67
00:03:38,000 --> 00:03:42,000
The parameters are request, which we'll call "req,"

68
00:03:42,000 --> 00:03:45,000
and response, which is "res."

69
00:03:45,000 --> 00:03:48,000
And then we'll use an arrow, and then by indenting,

70
00:03:48,000 --> 00:03:51,000
we'll create the function body.

71
00:03:51,000 --> 00:03:54,000
Everything that's indented under line 6 will be part

72
00:03:54,000 --> 00:03:58,000
of the callback or the body of our method here.

73
00:03:58,000 --> 00:04:01,000
The simplest way to send information back to the browser

74
00:04:01,000 --> 00:04:05,000
that requested this is to use the response objects,

75
00:04:05,000 --> 00:04:08,000
send  method, and this just takes something to send back,

76
00:04:08,000 --> 00:04:14,000
so we'll send a string "Hello from express."

77
00:04:14,000 --> 00:04:18,000
Now if we go back to our browser and we're trying to go to the route,

78
00:04:18,000 --> 00:04:22,000
if we do that, right now it says it "Cannot GET /."

79
00:04:22,000 --> 00:04:24,000
And that's because we need to restart our server,

80
00:04:24,000 --> 00:04:27,000
so I'm going to stop it by hitting Control C.

81
00:04:27,000 --> 00:04:29,000
We can start it again.

82
00:04:29,000 --> 00:04:32,000
And now we have our server listening, and if I refresh the page,

83
00:04:32,000 --> 00:04:35,000
we see we now get "Hello from express."

84
00:04:35,000 --> 00:04:38,000
That's great, but we saw we had to stop and restart the server,

85
00:04:38,000 --> 00:04:41,000
which is really inconvenient, especially in development

86
00:04:41,000 --> 00:04:45,000
because we have to--every time we save a file go back, stop it, start it.

87
00:04:45,000 --> 00:04:47,000
It would be nice if we could just save the file, go to the browser,

88
00:04:47,000 --> 00:04:49,000
and see what's changed.

89
00:04:49,000 --> 00:04:51,000
The tool that lets us do that is Supervisor.

90
00:04:51,000 --> 00:04:54,000
Instead of running coffee server.coffee,

91
00:04:54,000 --> 00:05:01,000
we'll instead say "supervisor server.coffee."

92
00:05:01,000 --> 00:05:04,000
Now, Supervisor sees that there's a coffee extension

93
00:05:04,000 --> 00:05:06,000
and will run it through CoffeeScript.

94
00:05:06,000 --> 00:05:08,000
Otherwise we could have simply done a .js file,

95
00:05:08,000 --> 00:05:11,000
and it would have run it directly through Node.

96
00:05:11,000 --> 00:05:14,000
Supervisor is aware of the coffee extension.

97
00:05:14,000 --> 00:05:17,000
By running this, we get a little bit of debug information

98
00:05:17,000 --> 00:05:19,000
about how to run Supervisor.

99
00:05:19,000 --> 00:05:21,000
And then we'll see the familiar server is listening

100
00:05:21,000 --> 00:05:24,000
at the last part of our output here.

101
00:05:24,000 --> 00:05:26,000
We have it all running, which is great.

102
00:05:26,000 --> 00:05:30,000
And if we refresh, we can see it says "Hello from express."

103
00:05:30,000 --> 00:05:33,000
But if we were to go into our code here and let's just--once again--

104
00:05:33,000 --> 00:05:35,000
save this file.

105
00:05:35,000 --> 00:05:38,000
We've just saved it, even though nothing has changed.

106
00:05:38,000 --> 00:05:41,000
Simply by saving it, we can see these last 3 lines. 

107
00:05:41,000 --> 00:05:44,000
It's "crashing child" and then starting it again.

108
00:05:44,000 --> 00:05:47,000
It's detected that the server.coffee file has changed,

109
00:05:47,000 --> 00:05:51,000
and by doing that, it stopped the instance we were running before

110
00:05:51,000 --> 00:05:54,000
and started a new one for us automatically.

111
00:05:54,000 --> 00:05:58,000
This is really convenient, so we'll be using Supervisor as our development runner.

112
00:05:58,000 --> 00:06:01,000
Now, this is great, but we don't want to just simply send strings

113
00:06:01,000 --> 00:06:03,000
from our routes here.

114
00:06:03,000 --> 00:06:06,000
Instead we want to use templates or views,

115
00:06:06,000 --> 00:06:09,000
and Express allows us a way to do this by allowing us

116
00:06:09,000 --> 00:06:11,000
to use various templating languages.

117
00:06:11,000 --> 00:06:16,000
The one we're going to use is called eco, E-C-O for embedded CoffeeScript.

118
00:06:16,000 --> 00:06:20,000
And this is very similar to ERB or EJS 

119
00:06:20,000 --> 00:06:23,000
or other similar templating applications in that 

120
00:06:23,000 --> 00:06:26,000
it's simply the direct template code you want

121
00:06:26,000 --> 00:06:29,000
with special tags that allow us to do dynamic things. 

122
00:06:29,000 --> 00:06:32,000
Now, since we're going to be using eco, we need to include it

123
00:06:32,000 --> 00:06:36,000
as a dependency of our application, and that means we have to open

124
00:06:36,000 --> 00:06:39,000
our package.json file again.

125
00:06:39,000 --> 00:06:44,000
After our Express here, we'll define another dependency called "eco."

126
00:06:44,000 --> 00:06:47,000
And again, we'll say any version will do right now,

127
00:06:47,000 --> 00:06:49,000
but we'll change that later.

128
00:06:49,000 --> 00:06:56,000
We've saved our package.json, and we're going to go back to the terminal here.

129
00:06:56,000 --> 00:07:02,000
And now we need to update our packages now that we've updated our package.json.

130
00:07:02,000 --> 00:07:08,000
To do this, all we have to do is run "npm install" once again.

131
00:07:08,000 --> 00:07:11,000
And we can see it installed eco, and you can see it has a dependency

132
00:07:11,000 --> 00:07:14,000
string scan that it's also installed for us.

133
00:07:14,000 --> 00:07:16,000
Now we should be up and running with eco,

134
00:07:16,000 --> 00:07:18,000
and now we just have to create an eco file

135
00:07:18,000 --> 00:07:22,000
and tell Express to serve that eco template to it.

136
00:07:22,000 --> 00:07:24,000
I'm going to start our server once again,

137
00:07:24,000 --> 00:07:27,000
and what we need to do is we need to create a views directory.

138
00:07:27,000 --> 00:07:29,000
This is where we'll keep our templates,

139
00:07:29,000 --> 00:07:33,000
and it's where Express will look for them so it can read them,

140
00:07:33,000 --> 00:07:36,000
compile them, and send it back to the browser.

141
00:07:36,000 --> 00:07:39,000
Inside our Code Racer directory, we'll create a new folder,

142
00:07:39,000 --> 00:07:42,000
and we're going to call this "views."

143
00:07:42,000 --> 00:07:45,000
And this is where we'll create our template files.

144
00:07:45,000 --> 00:07:48,000
Now, the views directory is the default for Express,

145
00:07:48,000 --> 00:07:50,000
so we don't have to configure anything, 

146
00:07:50,000 --> 00:07:53,000
but if we wanted to have our view directory be somewhere else,

147
00:07:53,000 --> 00:07:56,000
we could easily configure it with Express.

148
00:07:56,000 --> 00:07:58,000
But this seems like a good place to go,

149
00:07:58,000 --> 00:08:01,000
so let's create a new file.

150
00:08:01,000 --> 00:08:06,000
And we'll save this as "index.eco."

151
00:08:06,000 --> 00:08:08,000
Now let's just put some HTML in here.

152
00:08:08,000 --> 00:08:13,000
We'll create a doctype HTML.

153
00:08:13,000 --> 00:08:18,000
And right now our editor is not understanding what eco is.

154
00:08:18,000 --> 00:08:20,000
We could install an eco bundle, but for right now

155
00:08:20,000 --> 00:08:23,000
I'm just going to instruct it that it's HTML.

156
00:08:23,000 --> 00:08:26,000
That way we get at least some syntax highlighting.

157
00:08:26,000 --> 00:08:33,000
We'll create an HTML.

158
00:08:33,000 --> 00:08:36,000
And I'll just fill the rest of this in.

159
00:08:36,000 --> 00:08:39,000
All right, so I have the basic HTML page just with a head and a title

160
00:08:39,000 --> 00:08:43,000
and an h1 in the body, and we'll store it into index.eco.

161
00:08:43,000 --> 00:08:46,000
How do we send this from our application?

162
00:08:46,000 --> 00:08:49,000
Well, let's open up our server.coffee,

163
00:08:49,000 --> 00:08:51,000
and instead of doing res.send with a string,

164
00:08:51,000 --> 00:08:55,000
we're going to change this to "res.render."

165
00:08:55,000 --> 00:08:58,000
And we'll pass it the name of our template, in which case we'll do

166
00:08:58,000 --> 00:09:01,000
"index.eco."

167
00:09:01,000 --> 00:09:05,000
Now, this isn't quite going to work, but let's just see what happens.

168
00:09:05,000 --> 00:09:08,000
We don't need to restart our server, but if we just refresh,

169
00:09:08,000 --> 00:09:11,000
we can see it failed to locate view layout.

170
00:09:11,000 --> 00:09:14,000
And this is the default functionality of Express 

171
00:09:14,000 --> 00:09:17,000
when it tries to render an action.

172
00:09:17,000 --> 00:09:20,000
There are 2 layers. There's the action and the layout.

173
00:09:20,000 --> 00:09:24,000
Right now, we've written everything into our one index.eco file,

174
00:09:24,000 --> 00:09:26,000
so if we come back here, there's one way we can do it

175
00:09:26,000 --> 00:09:29,000
is to pass in some options.

176
00:09:29,000 --> 00:09:33,000
In our case, we'll say "layout: false."

177
00:09:33,000 --> 00:09:36,000
By doing this, it says we don't need to wrap this with a layout,

178
00:09:36,000 --> 00:09:39,000
and we can just simply serve the index.eco file

179
00:09:39,000 --> 00:09:42,000
as it exists, so this is one way to solve it.

180
00:09:42,000 --> 00:09:46,000
And if we go back and refresh, we see our page just as we wanted it.

181
00:09:46,000 --> 00:09:51,000
If we look inside, we can see it's the code that we put in there.

182
00:09:51,000 --> 00:09:54,000
Now, what I'm going to do is I'm going to reorient this and by 

183
00:09:54,000 --> 00:09:57,000
leaving a comma at the end of the line

184
00:09:57,000 --> 00:10:00,000
and indenting, we're still passing anything else in here

185
00:10:00,000 --> 00:10:04,000
as an object to res.render.

186
00:10:04,000 --> 00:10:07,000
The first argument is index.eco.

187
00:10:07,000 --> 00:10:09,000
And anything indented here is an object 

188
00:10:09,000 --> 00:10:11,000
that's being passed in as options.

189
00:10:11,000 --> 00:10:13,000
Layout is one option.

190
00:10:13,000 --> 00:10:16,000
Anything else after that is going to be variables

191
00:10:16,000 --> 00:10:19,000
that can be interpreted in our template.

192
00:10:19,000 --> 00:10:27,000
If we were to say "title" is "Our Special Title,"

193
00:10:27,000 --> 00:10:31,000
we could go into our index.eco file and replace this

194
00:10:31,000 --> 00:10:38,000
with the special eco tag.

195
00:10:38,000 --> 00:10:43,000
And our tag is a less than sign, a percent, and an equal

196
00:10:43,000 --> 00:10:45,000
to output some information into our page.

197
00:10:45,000 --> 00:10:49,000
And then our variable, which is title.

198
00:10:49,000 --> 00:10:54,000
And we need to actually prepend any of these with @.

199
00:10:54,000 --> 00:10:58,000
The @ symbol in CoffeeScript is like saying "this.title,"

200
00:10:58,000 --> 00:11:00,000
which would also work.

201
00:11:00,000 --> 00:11:05,000
You can see "Our Special Title," but in CoffeeScript, we can replace  this dot with @.

202
00:11:05,000 --> 00:11:09,000
 Simply by passing in something called title with a value,

203
00:11:09,000 --> 00:11:13,000
we can retrieve it using @title here. 

204
00:11:13,000 --> 00:11:19,000
And we can see we get "Our Special Title," and by simply changing it,

205
00:11:19,000 --> 00:11:22,000
we don't have to make any changes to our template,

206
00:11:22,000 --> 00:11:25,000
and it will be reflected right in our page.

207
00:11:25,000 --> 00:11:27,000
That's great.

208
00:11:27,000 --> 00:11:30,000
In fact, though, we don't really want to disable this layout feature. 

209
00:11:30,000 --> 00:11:32,000
It's actually very nice.

210
00:11:32,000 --> 00:11:35,000
I'm going to remove this "layout: false" here,

211
00:11:35,000 --> 00:11:41,000
and inside our views directory, we'll create a layout.eco file.

212
00:11:41,000 --> 00:11:47,000
And I'm just going to move most of this into that layout.eco.

213
00:11:47,000 --> 00:11:55,000
But I'm going to keep the h1 in our index.eco.

214
00:11:55,000 --> 00:11:58,000
And instead of our normal h1 here in the layout,

215
00:11:58,000 --> 00:12:01,000
we need to indicate where we're going to place the contents

216
00:12:01,000 --> 00:12:03,000
of index.eco into our layout.

217
00:12:03,000 --> 00:12:08,000
We'll do this by using a special tag with the less than, percent,

218
00:12:08,000 --> 00:12:15,000
dash, and then an @body and closing percent there.

219
00:12:15,000 --> 00:12:19,000
So @body is where our template engine will store the contents

220
00:12:19,000 --> 00:12:24,000
of index.eco, and we want to display it into our body.

221
00:12:24,000 --> 00:12:27,000
Now, we may have seen that we've used equal before,

222
00:12:27,000 --> 00:12:29,000
but what happens if we do that?

223
00:12:29,000 --> 00:12:31,000
If we go back to our page and refresh it,

224
00:12:31,000 --> 00:12:35,000
we can see that it put the contents of index.eco into our page.

225
00:12:35,000 --> 00:12:39,000
However, it has escaped all the values, so now we're seeing 

226
00:12:39,000 --> 00:12:41,000
the HTML tags like this.

227
00:12:41,000 --> 00:12:43,000
By replacing this equal with a dash,

228
00:12:43,000 --> 00:12:47,000
we won't escape it, which we trust it to not be escaped.

229
00:12:47,000 --> 00:12:51,000
If we refresh, now our h1 tags are handled properly.

230
00:12:51,000 --> 00:12:55,000
This is nice in that we can simply have our index.eco

231
00:12:55,000 --> 00:12:57,000
be the main body of our page, 

232
00:12:57,000 --> 00:12:59,000
and our layout can be consistent and shared 

233
00:12:59,000 --> 00:13:02,000
across different actions on our page, which is great 

234
00:13:02,000 --> 00:13:05,000
 because a lot of our pages will have the same header, footer, JavaScript includes,

235
00:13:05,000 --> 00:13:08,000
style includes, and everything else like that,

236
00:13:08,000 --> 00:13:11,000
and we only really want to mess with what's in the body.

237
00:13:11,000 --> 00:13:13,000
So we'll just save this out, and now we have a basic server 

238
00:13:13,000 --> 00:13:15,000
that's able to send out our templates

239
00:13:15,000 --> 00:13:19,000
compiled with even variables like title.

240
00:13:19,000 --> 00:13:22,000
The next step is to go a little bit further with this

241
00:13:22,000 --> 00:13:25,000
and add some things like the ability to search static files

242
00:13:25,000 --> 00:13:29,000
as well as to use a CSS preprocessor like LESS

243
00:13:29,000 --> 00:13:32,000
and include some base CSS from Bootstrap.

244
00:13:32,000 --> 00:13:34,000
We'll do that next.