This is the first part of my adventure creating a simple game for my daughter.
Now that you have Node installed, let’s create a simple server. Create a file called server.js like this:
var express = require('express'),
server = express.createServer();
server.use('/cocos2d', express.static(__dirname + '/cocos2d') );
server.use('/cocosDenshion', express.static(__dirname + '/cocosDenshion') );
server.use('/classes', express.static(__dirname + '/classes') );
server.use('/resources', express.static(__dirname + '/resources') );
res.send('Hello Cruel World');
server.listen(process.env.PORT || 3000);
And… that’s it, a fully functioning web server.
That first line is the key, where we require(‘express’). Express is the module that is doing the heavy lifting on the server side.
There is however a small amount of configuration you need to do. You need to tell node to install the express module. This is pretty simply done though, open a command prompt and navigate to your project directory, then type:
npm install express
npm is the node package manager, and it will download and configure your project to work with express. Now that we are configured, lets get back to code.
The next four lines are defining a series of static routes. Essentially, if a web request comes in to any of these paths ( for example http://localhost/cocos2d ), node will simply serve the files back to the requesting browser, just like IIS or Apache would. These four lines will result in /cocos2d, /cocosDenshion, /classes and /resources folders having their files served, so when your HTML file requests /classes/cocos2d.js, the file will be returned. This is how we will allow our user to download our scripts and resources. In this particular, I am porting the class from this tutorial to run from Node, which is why we require a resources and cocosDenshion folder.
Next is a GET request handler for “/”. In HTTP, there are two kinds of requests, GET ( urls ) and POST ( form submissions ). In this line we are saying if someone requests our web root, our function is called, which simply sends the file index.html back.
A moment later, we set up another GET handler for the route (URL) /api/hello, which simply returns the string “Hello Cruel World”. This is a very simple web service, and we will see it in action shortly.
Finally we start our server listening on port 3000, or whatever port the running environment forces us on, in case our host has such limitations. At this point, we have a fully functioning web server.
However, I made a few alterations to the last tutorial’s file layout to better be served by Node. Our folder structure now looks like:
Don’t worry if you are missing a few folders ( .git and .idea for example ) or files ( package.json or Procfile ), we will covers those later.
I altered all the paths in cocos.js and MyFourthApp.js because cocos2d was moved to the classes folder. Otherwise the code is pretty much unchanged from the last tutorial. You can download the full source at the end of this post if you want to see the complete changes.
I did make a few small alterations though, beyond changing paths. I added a reference to jQuery in index.html, like this:
I also added the following line to cocos2d.js:
So what exactly is this line of code doing?
Remember earlier in server.js where we added a route handler for /api/hello? Well this is about as simple a REST based web request as you can make. This uses jQuery to make an AJAX call to our server, which returns the string “Hello Cruel World”, which we log to the console.
Now you can run your server. Open a command prompt, navigate to your project directory and type node server.js. If all went well, there should be no error messages. Now open up a web browser and navigate to http://localhost:3000 like this:
At this point we have a working web server, capable of hosting a cocos2D application ( and replacing the need for WAMP completely ), making successful, if simple, web services calls between the client and server.
You can download the full project right here.
Next up, we will look into a problem many web developers face… where the heck am I going to put this thing???
EDIT: Next part is now up.