Getting Started with Node.js and the NPM Package Manager

Now, Code Racer is a very complex project, 0:00 and that means we don't have time to do all of the different parts 0:02 of Code Racer in these videos. 0:04 But what we will do is create a project that has the major components of Code Racer 0:06 and see how to build it piece by piece with Node.js, 0:10 Express, and Socket.io. 0:13 Let's get started. 0:15 [? Music ?] 0:17 The first thing that we need to do on this project is create 0:22 a basic skeleton application. 0:25 This will be the application that we're going to get running 0:28 as fast as possible so that 0:31 the developers have something to work off of 0:34 as well as having the designers be able to create the templates 0:36 directly in the application. 0:39 Now, it's going to be a little while before we actually need to integrate 0:41 the designs from the designers into our real application. 0:44 But the sooner we get the environment for them to actually code 0:48 real-live templates in, the better, so that's what we want to do right now 0:51 is get a basic Node server up and running 0:54 and some basic templates that our designers can work with 0:57 and experiment with. 1:00 [nodejs.org] 1:02 The main technologies we're going to be working with are Node.js, 1:04 and to install this, we'll just go to nodejs.org, 1:06 and we can use the Macintosh installer. 1:09 I've actually installed it via Homebrew, 1:12 which is the package manager, which you can read about down here. 1:14 But any of these options will get a Node installation up and running fairly quickly. 1:18 So, we can see that I've installed it, and we can actually check on our Node version 1:23 by typing in "node -v." 1:26 And we'll see we're running 0.6.7, which is a fairly recent release for us. 1:28 Now obviously, depending on when you download and install Node, 1:34 you'll get a different version, but 0.6.7 is what we'll be using right now. 1:37 So notice the programming environment we'll be using, 1:41 but we'll also be using another tool called NPM, 1:44 and as of now, NPM is actually installed alongside of Node, 1:47 so if we type in "npm -v" we'll see we get 1:51 an NPM version of 1.1.0-beta-10. 1:55 NPM is the tool we'll be using to manage the dependencies in our projects 1:58 to bring in outside libraries as well as to manage the version of those libraries 2:01 and even just keep track of the meta information of our application. 2:06 You can learn more at npmjs.org. 2:10 We'll also be working in CoffeeScript, which is a small language 2:13 built on top of JavaScript that compiles to JavaScript. 2:16 It has much of the same semantics but a slightly different syntax. 2:20 Typically, CoffeeScript tends to be a little bit smaller 2:24 in the amount of characters used to express certain objects. 2:28 If you want to learn more about CoffeeScript and the type of JavaScript it creates, 2:32 you can learn more at coffeescript.org. 2:35 We'll be using a couple of libraries as we go along. 2:38 The first one we're going to encounter is called Express, 2:41 and this is a small web application framework for Node.js 2:43 that allows us to easily create different pages 2:46 and some different interactions on our site. 2:49 A little bit later on we'll be learning about Socket.io or Socket IO, 2:51 which is a library for using web sockets. 2:56 And this will allow us to create an application 2:59 that runs in sort of real time, 3:01 meaning that the server can actually push data down to each of the players 3:04 so all of them can keep their state in sync. 3:08 As one player does one thing, it will be communicated instantly 3:10 to all of the other players, which is what we want for our game. 3:13 This is the main reason we're choosing Node.js for our game application 3:16 because the support for sockets in Socket.io is pretty good. 3:20 The architecture of Node lends itself well to using sockets, 3:25 which require a lot of connections to be left open at once, 3:28 even though they're going to be mostly idle. 3:32 This is where the event-based Node.js is the strongest. 3:34 What I have right now is an empty folder called Code Racer, 3:37 and this is where all of our code will be, and I have a terminal window open 3:41 to that directory. 3:44 I also have my editor looking at this directory right here. 3:46 This is our Code Racer directory, and right now there is nothing in it. 3:49 The first thing I want to do is set up our project. 3:52 Now, there's actually a couple of dependencies I want to install 3:54 globally on my system via NPM. 3:57 These 2 packages are CoffeeScript, which obviously allows us 3:59 to run CoffeeScript files directly, and Supervisor, 4:02 which is a way for us to run our application, 4:06 but any time the application crashes, Supervisor will restart it. 4:08 Also, any time we save a file, Supervisor will again restart our application. 4:12 This is great for development since you can simply save a file 4:17 and immediately go to your server without having to stop and start your server 4:20 to reload your code changes. 4:24 We're going to install Supervisor and CoffeeScript via NPM. 4:26 I'm going to type "npm install coffee-script" 4:30 as well as "supervisor." 4:36 And I'm going to pass it the -g flag for global. 4:40 This will install it to our global environment 4:43 instead of installing it as a dependency of this particular application. 4:46 We got a little bit of an error here, and that's because 4:53 the way this computer is set up, we don't have the permissions 4:55 in the right place for us to simply run this command, 4:58 so instead I'll have to write "sudo," 5:01 and I'm going to use ! ! to run sudo on the last application. 5:05 And when I hit Enter here, you can see that my shell has brought up 5:11 "sudo npm install coffee-script supervisor -g." 5:14 When I hit Enter, we'll now run it with sudo, 5:19 which will actually run it as a privileged user, 5:21 which means we should be able to install into the directories 5:24 that we didn't have access to as our normal user. 5:27 I'll just type in my password, 5:31 and everything is running just fine. 5:36 If I type in "coffee -v," you can see we have a CoffeeScript version, 5:39 so that means we have installed it properly. 5:44 The next step for us is to initialize a new NPM package. 5:46 This will allow us to declare the dependencies for our application 5:51 and manage its version through NPM. 5:55 This is very easy to do. 5:58 We'll type in "npm init," 6:00 and now it's going to interactively prompt us for some information. 6:03 Right now we'll call our package name Code Racer. 6:06 We'll say its description is "An awesome game." 6:09 And all of this stuff besides the package name is optional 6:13 and not really necessary for us to worry about right now. 6:16 We'll just enter through it. 6:21 It confirms "Is this okay?" 6:23 We'll say yes. 6:25 And now if we go to our editor here, 6:27 we'll see there is now a package.json file, 6:30 and our package.json file includes the information 6:33 that we just put in through the interactive prompt. 6:35 But what we're going to be worrying about here is 6:38 the dependencies object here, and this is where we'll be defining 6:40 the dependencies that we're going to be using in our application. 6:43 For instance, things like Express. 6:47 The way we define our dependencies is 6:49 we will give it key value pairs where a key 6:51 is the name of the package we want to use 6:53 and the value is going to be a version string. 6:56 Right now, I want to include CoffeeScript 6:59 since we'll be writing our project in CoffeeScript. 7:01 So write "coffee-script," 7:04 and for its version string, I'm just going to use * for right now 7:07 because I don't know what the latest version of CoffeeScript is. 7:10 However, later on we'll put a more specific version number in here 7:13 to lock it down so we have a little bit more control 7:15 over what version of each package is compatible 7:19 with our Code Racer package. 7:22 And the next one I'm going to want to do is to install Express. 7:24 And that's just using Express, and again, 7:29 we'll use the wild card version here. 7:32 We'll be coming back to this file every time we need a new dependency 7:34 for our application, but let's just save this right now. 7:37 So, our NPM command will always be working off of this package.json file. 7:41 We saw how to use the npm init command to 7:45 create our package.json, but we'll see another command 7:48 called install. 7:51 We'll type in "npm install." 7:53 And what this will do is it will read the package.json file, 7:55 grab all the packages and install them 7:58 into a local directory called "node modules." 8:00 So, if we hit Enter, we can see it's going out to get some information, 8:02 grab our packages, and this will include 8:06 all of the sub dependencies of our packages. 8:09 For instance, Express itself depends on qs, mime, mkdirp and connect. 8:12 NPM manages all those dependencies for us 8:18 and makes them available in our project. 8:20 So, if we were to go into our editor here, 8:23 we'll see we have a new directory called "node_modules." 8:27 And this is where all of our modules have been installed. 8:30 The way Node works when looking for dependencies 8:34 when we use the require statement is it will try to find 8:36 Node modules folders in the directory that it's executing in. 8:39 Otherwise it will try to find any globally installed modules, 8:43 like we had globally installed CoffeeScript, 8:46 and then it will fail if it can't find those packages in any of those directories. 8:48 Let's create what will be our server file. 8:52 We'll create a new file, and I'm going to save it 8:54 as server.coffee. 8:58 And I'm going to just change our indentation here to 2 spaces. 9:05 Let's just do a very simple file, and let's just create a Hello world file 9:10 for our server.coffee right now. 9:14 What we'll do is console.log "Hello." 9:16 And let's go to our terminal and see if we can run this file. 9:22