How to Build a Server with Express

[? Music ?] 0:00 [Code Racer] [Building a Server with Express] 0:02 [Jim Hoskins] Now we're able to see that our CoffeeScript works. 0:05 It's able to print out some basic text, but we actually want a real server, 0:07 so let's get into that. 0:10 I'm going to move this console.log of Hello World, 0:13 and we're going to require a couple of packages. 0:16 The first one we're going to do is CoffeeScript. 0:18 I'm just simply going to do require 'coffee-script.' 0:21 And what this does is it allows Node to require 0:29 other CoffeeScript files. 0:33 We only need to really include this in the file that we're going to be running 0:35 because once it's loaded once, all the require calls 0:39 will be able to find .coffee files. 0:41 And the next thing we're going to want to include is Express, 0:45 and Express is the application framework we'll be using, 0:47 and this allows us to route certain URLs 0:50 to certain code, which will allow us to create different pages, 0:53 like the home page, a lobby page, 0:56 as well as APIs that will be located at different URLs 0:59 and anything else that we need, for instance, 1:03 sending static files across. 1:05 To do this, all we need to do is require Express, 1:08 and we'll set up a server that we'll add routes to. 1:11 This is easy enough to do. 1:15 We'll store Express into a variable called Express. 1:17 And we'll do a require with the string "express" 1:19 to load in the module, and now we have Express there. 1:24 And the next thing we need to do is use the create server 1:27 method of Express to create an instance of our application, 1:30 which we'll store in the app variable. 1:33 So "app = express.createServer." 1:36 And this app is everything that we're going to be defining different 1:40 configurations on, defining routes, 1:43 as well as the actual app that will listen on a port 1:46 to allow us to serve pages. 1:50 We can start off by doing "app.listen." 1:52 And what we can do is pass in a port, and we'll say port 3000. 1:57 And at the end of the file here, we'll just add a console.log, 2:02 and we'll say that the "Server is listening." 2:07 If we were to run this, we'll go back to our console here, 2:14 and we'll run "coffee server.coffee." 2:18 And if we go to our browser, load up local host 3000, 2:23 we actually get "Cannot GET /." 2:27 And this is the default error message that Express will send out 2:30 for anything that it cannot find. 2:33 It's its 404 page. 2:35 In fact, if we go to any other route, like something else, 2:37 we'll see that it updates that it cannot find that page. 2:41 What we have to do is define these different routes 2:44 and the type of content that they should return. 2:46 Let's go back to our editor here. 2:49 Now, between the app.createServer and app.listen, 2:51 we're going to define our routes. 2:55 The first thing I want to do is define the route for the route 2:57 or the / URL, so we'll do "app.get." 3:00 And get is the HTTP method, so instead of a get, we could do post 3:04 to handle, for instance, form posting 3:09 or put or any of the other HTTP methods. 3:12 But for our purposes, we'll be doing get, 3:15 and then we'll pass in the URL, and our URL is simply / 3:18 for the route of our application. 3:22 And finally, we'll pass a callback function, 3:24 and in this callback function will be passed a request object and a response object. 3:26 The way we'll do this in CoffeeScript is we will define a function 3:31 by first declaring the parameters in parentheses. 3:35 The parameters are request, which we'll call "req," 3:38 and response, which is "res." 3:42 And then we'll use an arrow, and then by indenting, 3:45 we'll create the function body. 3:48 Everything that's indented under line 6 will be part 3:51 of the callback or the body of our method here. 3:54 The simplest way to send information back to the browser 3:58 that requested this is to use the response objects, 4:01 send method, and this just takes something to send back, 4:05 so we'll send a string "Hello from express." 4:08 Now if we go back to our browser and we're trying to go to the route, 4:14 if we do that, right now it says it "Cannot GET /." 4:18 And that's because we need to restart our server, 4:22 so I'm going to stop it by hitting Control C. 4:24 We can start it again. 4:27 And now we have our server listening, and if I refresh the page, 4:29 we see we now get "Hello from express." 4:32 That's great, but we saw we had to stop and restart the server, 4:35 which is really inconvenient, especially in development 4:38 because we have to--every time we save a file go back, stop it, start it. 4:41 It would be nice if we could just save the file, go to the browser, 4:45 and see what's changed. 4:47 The tool that lets us do that is Supervisor. 4:49 Instead of running coffee server.coffee, 4:51 we'll instead say "supervisor server.coffee." 4:54 Now, Supervisor sees that there's a coffee extension 5:01 and will run it through CoffeeScript. 5:04 Otherwise we could have simply done a .js file, 5:06 and it would have run it directly through Node. 5:08 Supervisor is aware of the coffee extension. 5:11 By running this, we get a little bit of debug information 5:14 about how to run Supervisor. 5:17 And then we'll see the familiar server is listening 5:19 at the last part of our output here. 5:21 We have it all running, which is great. 5:24 And if we refresh, we can see it says "Hello from express." 5:26 But if we were to go into our code here and let's just--once again-- 5:30 save this file. 5:33 We've just saved it, even though nothing has changed. 5:35 Simply by saving it, we can see these last 3 lines. 5:38 It's "crashing child" and then starting it again. 5:41 It's detected that the server.coffee file has changed, 5:44 and by doing that, it stopped the instance we were running before 5:47 and started a new one for us automatically. 5:51 This is really convenient, so we'll be using Supervisor as our development runner. 5:54 Now, this is great, but we don't want to just simply send strings 5:58 from our routes here. 6:01 Instead we want to use templates or views, 6:03 and Express allows us a way to do this by allowing us 6:06 to use various templating languages. 6:09 The one we're going to use is called eco, E-C-O for embedded CoffeeScript. 6:11 And this is very similar to ERB or EJS 6:16 or other similar templating applications in that 6:20 it's simply the direct template code you want 6:23 with special tags that allow us to do dynamic things. 6:26 Now, since we're going to be using eco, we need to include it 6:29 as a dependency of our application, and that means we have to open 6:32 our package.json file again. 6:36 After our Express here, we'll define another dependency called "eco." 6:39 And again, we'll say any version will do right now, 6:44 but we'll change that later. 6:47 We've saved our package.json, and we're going to go back to the terminal here. 6:49 And now we need to update our packages now that we've updated our package.json. 6:56 To do this, all we have to do is run "npm install" once again. 7:02 And we can see it installed eco, and you can see it has a dependency 7:08 string scan that it's also installed for us. 7:11 Now we should be up and running with eco, 7:14 and now we just have to create an eco file 7:16 and tell Express to serve that eco template to it. 7:18 I'm going to start our server once again, 7:22 and what we need to do is we need to create a views directory. 7:24 This is where we'll keep our templates, 7:27 and it's where Express will look for them so it can read them, 7:29 compile them, and send it back to the browser. 7:33 Inside our Code Racer directory, we'll create a new folder, 7:36 and we're going to call this "views." 7:39 And this is where we'll create our template files. 7:42 Now, the views directory is the default for Express, 7:45 so we don't have to configure anything, 7:48 but if we wanted to have our view directory be somewhere else, 7:50 we could easily configure it with Express. 7:53 But this seems like a good place to go, 7:56 so let's create a new file. 7:58 And we'll save this as "index.eco." 8:01 Now let's just put some HTML in here. 8:06 We'll create a doctype HTML. 8:08 And right now our editor is not understanding what eco is. 8:13 We could install an eco bundle, but for right now 8:18 I'm just going to instruct it that it's HTML. 8:20 That way we get at least some syntax highlighting. 8:23 We'll create an HTML. 8:26 And I'll just fill the rest of this in. 8:33 All right, so I have the basic HTML page just with a head and a title 8:36 and an h1 in the body, and we'll store it into index.eco. 8:39 How do we send this from our application? 8:43 Well, let's open up our server.coffee, 8:46 and instead of doing res.send with a string, 8:49 we're going to change this to "res.render." 8:51 And we'll pass it the name of our template, in which case we'll do 8:55 "index.eco." 8:58 Now, this isn't quite going to work, but let's just see what happens. 9:01 We don't need to restart our server, but if we just refresh, 9:05 we can see it failed to locate view layout. 9:08 And this is the default functionality of Express 9:11 when it tries to render an action. 9:14 There are 2 layers. There's the action and the layout. 9:17 Right now, we've written everything into our one index.eco file, 9:20 so if we come back here, there's one way we can do it 9:24 is to pass in some options. 9:26 In our case, we'll say "layout: false." 9:29 By doing this, it says we don't need to wrap this with a layout, 9:33 and we can just simply serve the index.eco file 9:36 as it exists, so this is one way to solve it. 9:39 And if we go back and refresh, we see our page just as we wanted it. 9:42 If we look inside, we can see it's the code that we put in there. 9:46 Now, what I'm going to do is I'm going to reorient this and by 9:51 leaving a comma at the end of the line 9:54 and indenting, we're still passing anything else in here 9:57 as an object to res.render. 10:00 The first argument is index.eco. 10:04 And anything indented here is an object 10:07 that's being passed in as options. 10:09 Layout is one option. 10:11 Anything else after that is going to be variables 10:13 that can be interpreted in our template. 10:16 If we were to say "title" is "Our Special Title," 10:19 we could go into our index.eco file and replace this 10:27 with the special eco tag. 10:31 And our tag is a less than sign, a percent, and an equal 10:38 to output some information into our page. 10:43 And then our variable, which is title. 10:45 And we need to actually prepend any of these with @. 10:49 The @ symbol in CoffeeScript is like saying "this.title," 10:54 which would also work. 10:58 You can see "Our Special Title," but in CoffeeScript, we can replace this dot with @. 11:00 Simply by passing in something called title with a value, 11:05 we can retrieve it using @title here. 11:09 And we can see we get "Our Special Title," and by simply changing it, 11:13 we don't have to make any changes to our template, 11:19 and it will be reflected right in our page. 11:22 That's great. 11:25 In fact, though, we don't really want to disable this layout feature. 11:27 It's actually very nice. 11:30 I'm going to remove this "layout: false" here, 11:32 and inside our views directory, we'll create a layout.eco file. 11:35 And I'm just going to move most of this into that layout.eco. 11:41 But I'm going to keep the h1 in our index.eco. 11:47 And instead of our normal h1 here in the layout, 11:55 we need to indicate where we're going to place the contents 11:58 of index.eco into our layout. 12:01 We'll do this by using a special tag with the less than, percent, 12:03 dash, and then an @body and closing percent there. 12:08 So @body is where our template engine will store the contents 12:15 of index.eco, and we want to display it into our body. 12:19 Now, we may have seen that we've used equal before, 12:24 but what happens if we do that? 12:27 If we go back to our page and refresh it, 12:29 we can see that it put the contents of index.eco into our page. 12:31 However, it has escaped all the values, so now we're seeing 12:35 the HTML tags like this. 12:39 By replacing this equal with a dash, 12:41 we won't escape it, which we trust it to not be escaped. 12:43 If we refresh, now our h1 tags are handled properly. 12:47 This is nice in that we can simply have our index.eco 12:51 be the main body of our page, 12:55 and our layout can be consistent and shared 12:57 across different actions on our page, which is great 12:59 because a lot of our pages will have the same header, footer, JavaScript includes, 13:02 style includes, and everything else like that, 13:05 and we only really want to mess with what's in the body. 13:08 So we'll just save this out, and now we have a basic server 13:11 that's able to send out our templates 13:13 compiled with even variables like title. 13:15 The next step is to go a little bit further with this 13:19 and add some things like the ability to search static files 13:22 as well as to use a CSS preprocessor like LESS 13:25 and include some base CSS from Bootstrap. 13:29 We'll do that next. 13:32