Free BrowserQuest Hosting on a PaaS

The latest OpenShift release added WebSocket support. For those of you that haven’t had a deeper look at WebSockets and what they can do, take a look at Marek’s OpenShift post on websockets If you want to see them in action look at another game the OpenShift Operations team got running on OpenShift (Thanks Wesley!) This one is an install of BrowserQuest from Mozilla.

BrowswerQuest on OpenShift Picture

BrowserQuest is a simple looking multiplayer adventure game but uses a lot of great new technologies behind the scenes. For starters, on the back end we’re using OpenShift, nodejs, php and websockets.The latest OpenShift release added WebSocket support. For those of you that haven’t had a deeper look at WebSockets and what they can do, take a look at Marek’s OpenShift post on websockets If you want to see them in action look at another game the OpenShift Operations team got running on OpenShift (Thanks Wesley!) This one is an install of BrowserQuest from Mozilla.

BrowswerQuest on OpenShift Picture

BrowserQuest is a simple looking multiplayer adventure game but uses a lot of great new technologies behind the scenes. For starters, on the back end we’re using OpenShift, nodejs, php and websockets. On the frontend the BattleQuest developers are using HTML5 Canvas, Web workers, localStorage and HTML5 audio.

Perhaps one of the best features of this application is that it runs anywhere HTML5 does. We’ve tested it on our desktops, Android devices, iOS, tablets, phones and it all works great. Though on a phone it is a bit… small.

Lets do this thing

So how do we set this all up? First you need an OpenShift account. If you don’t have one already, just head over to http://openshift.redhat.com/ and get one. Next you need at least 2 available gears. OpenShift provides 3 gears for free.

BattleQuest has three parts to it. The first is a nodejs backend, we’ll create that first:

$ rhc app create bqserver nodejs-0.6
$ cd bqserver
$ git remote add upstream -m master git://github.com/wshearn/openshift-quickstart-browserquest-server.git
$ git pull -s recursive -X theirs upstream master
$ git push

You’ll need to note the DNS name for the server portion. It will have whatever namespace you created in the name, like bqserver-mynamespace.rhcloud.com. You’ll need this DNS name while configuring the client tools.

Now that the backend is created, we need to create the web interface portion which is a PHP application. This PHP application serves up all the HTML5 and client pieces that run inside your web browser. To create this application, run:

$ rhc app create bqclient php-5.3
$ cd bqclient
$ git remote add upstream -m master git://github.com/wshearn/openshift-quickstart-browserquest-client.git
$ git pull -s recursive -X theirs upstream master

Then we need to alter and edit some files with the DNS name noted earlier:

$ cp php/config/config_build.json-dist php/config/config_build.json
$ cp php/config/config_build.json-dist php/config/config_local.json
$ # edit php/config/config_build.json and php/config/config_local.json

Last just commit your changes and git push:

$ git add -A
$ git commit -m 'Added server URL for initial deployment'
$ git push

After that you can access BrowserQuest and play with your friends using at http://bqclient-mydomain.rhcloud.com/

All of the BrowserQuest source code is available on GitHub – https://github.com/mozilla/BrowserQuest so if you’re feeling up to it you can make your own quests and battles.

What’s Next?

Categories
PHP
Tags
,
Comments are closed.