Game Tutorial using Node.js - IBM Bluemix (Part 1)

Hi folk,

Many of you ask me to teach how to create a game in the cloud, I am preparing a tutorial step by step so everyone can realize their own game.

There is no better way to learn technological concepts than by playing with them.

Setup project local environment and deploy to Bluemix

What you'll need to build your game

Simple, all you need is:

• Firefox (Browser)
• Atom (Text Editor)   
• NodeJS (Server)
• Bluemix account (Hosting your game Online)

Project folder structure

A little theory about the project structure, folders and files so that throughout the tutorial people can identify the one we are modifying and why it is modified.

Install software

There is the software that you have to install:

• Nodejs - https://nodejs.org/en/
• Atom - https://atom.io/ (Optional, you can use your preferred note pad or text editor)
• IBM Bluemix CLI - https://clis.ng.bluemix.net/ui/home.html (You need a registered user)

Create project

Before to start the procedure you have to create a project structure with following folders and empty file

1) Open a terminal and go to project directory

2) Open the file package.json by command line (e.g.):

$ atom package.json

3) Copy and paste following lines:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "express": "^4.13.4",
    "socket.io": "^1.4.5"
  },
  "devDependencies": {},
  "author": "",
  "license": "ISC",
  "scripts": {
      "start": "node app.js"
  }
}

4) Save file package.json
5) Execute following command into project root folder to install node modules dependencies:

$ npm install

New node_modules is added to project

6) Open file app.js
7) Copy and paste following lines:

 var http = require('http');
 var express = require('express');
 var app = express();
 

 app.get('/',function(req, res) {
  res.sendFile(__dirname + '/client/index.html');
 });

 app.use('/client',express.static(__dirname + '/client'));

 var server = http.createServer(app);
 server.listen(3000, function(){

   console.log('Express server listening on port ' + app.get('port'));

 });

8) Save file app.js
9) Open files index.html
10) Write following line:

Hello Folk! Start game here!

11) Save file index.html
12) Execute following command into project root folder to run local Express server:

 $ node app.js

13) Open a browser and type:

http://localhost:3000

The result:

Try: You can access to client files

http://localhost:3000/client/img/lock.png

Deploy to Bluemix

Now is time to host the application to the cloud.

1) Open a terminal and go to project directory
2) Connect and log in to Bluemix using your account:

$ bluemix api https://api.ng.bluemix.net

3) Open file manifest.yml
4) Copy and paste following lines:

 applications:
 - path: .
  memory: 512M
  instances: 1
  domain: mybluemix.net
  name: tgbm
  host: {write-your-unique-hostname}
  disk_quota: 1024M

 5) Update the host property with your own host name

Note: In this manifest.yml file, random-route: true property generates a random route for your app to prevent your route from colliding with others. If you choose to, you can replace random-route: true with host:{write-your-unique-hostname}, supplying a host name of your choice

6) Save file manifest.yml
7) Execute following command into project root folder to push your app to Bluemix.

$ bluemix app push

Note: Deploying your application can take a few minutes. When deployment completes, you'll see a message that your app is running

 
8) Open a browser and type:

http://tuto-game-bx.mybluemix.net

The result:

Yeah!!! Your are ready for the next part of this tutorial!!

Let's go then, click here.

Be blue, be mix