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.