Today I’m going to be guiding you through how to publish your Voxel.js game using a free Heroku account.
The limitations on a free account are:
- Your online game can only be used for 18 hours every 24 hours (sleeping time doesn’t count)
- If you haven’t used it for a bit, it will shut down and do into sleep mode, however if you load the page for your app whilst it is sleeping, it will run the startup scripts and reload the page
Getting Started
First your’re going to need to go a get a free Heroku account at https://signup.heroku.com/login. It’s totally free, and the company is trustworthy, so you don’t need to worry about them asking for your name 🙂
Once you’ve registered, you’ll want to go to the page https://toolbelt.heroku.com/ and download and install the toolbelt.
Preparing the game to deploy
First off, if you have installed the Beefy package globally your’re going to have to run the command to install it again, with –save to save it your app’s packages so that Heroku knows to install it on the other end.
npm install beefy --save
The –save part tells it to save the package in the package.json dependancy list, that way Heroku knows to install it on the server. Also if you happen to have any dev-dependencies, be aware that Heroku will not install those, you will have to move them to the dependencies section. Your package.json folder should look like this:
{
"name": "example-application",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "Keith Mitchell",
"license": "ISC",
"dependencies": {
"beefy": "^2.1.5",
"browserify": "^11.0.1",
"coffeeify": "^1.1.0",
"kb-bindings": "^0.2.0",
"kb-bindings-ui": "^0.3.3",
"painterly-textures": "0.0.3",
"toolbar": "0.0.5",
"voxel": "^0.5.0",
"voxel-control": "^1.0.0",
"voxel-daylight": "^0.1.1",
"voxel-engine": "^0.20.2",
"voxel-highlight": "0.0.10",
"voxel-keys": "^0.5.0",
"voxel-player": "^0.1.0",
"voxel-plugins": "^0.3.2",
"voxel-reach": "^0.2.2",
"voxel-registry": "^0.8.1",
"voxel-shader": "^0.15.1",
"voxel-sky": "^0.3.0",
"voxel-voila": "^0.6.0",
"voxel-webview": "^0.2.3"
}
}
Now we will need to add a startup line to our package.json, so that Heroku knows what to do to start the app.
You will need to know your startup command. If you’re following over from my other guide Creating Voxel Games in Modern Browsers, your startup line will be:
beefy index.js:bundle.js 8080 -- -d
If your not using my “Creating Voxel Games in Modern Browsers” tutorial, your startup command will be whatever command(s) you use to get your app running for testing.
Now that command will not be enough for Heroku to start our app. Heroku gives your app a different port every time it starts, so instead of using “8080” we need to use the port environment variable Heroku sets. This is quite easy, simply change it to:
beefy index.js:bundle.js $PORT -- -d
Now we need to add the startup command to our package.json so Heroku knows what command to run. It should look something like this (pay attention to the scripts object we added, and the startup line):
{
"name": "example-application",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "Keith Mitchell",
"license": "ISC",
"dependencies": {
… dependencies …
},
"scripts": {
"start": "beefy index.js:bundle.js $PORT — -d"
}
}
Now Heroku knows what to do to start your app when you tell it to start.
Publishing the app to Heroku
Checking if Git is installed
Now we need to get our app to Heroku. First you need to check if you have git installed. To check, open the terminal and type ‘git’. It should say something like this:
usage: git [--version] [--help] [-C <path>] [-c name=value] [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path] [-p|--paginate|--no-pager] [--no-replace-objects] [--bare] [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>] <command> [<args>] The most commonly used git commands are: ... insert command list here ... 'git help -a' and 'git help -g' lists available subcommands and some concept guides. See 'git help <command>' or 'git help <concept>' to read about a specific subcommand or concept.
If it says “command not found”, you will need to download and install it from here https://git-scm.com/downloads.
Creating our Heroku app
Open a terminal and cd to the folder where your project files are, once your’re there, run the command (be aware it can take a minute for the command to respond):
heroku login
It will ask you to enter in the email and password you used when registering for Heroku. Enter them to login, and hit enter.
After you have logged in, we need to create a local git repository to track all our code changes. So first type:
git init
Next we need to tell it to track all our files, so we do:
git add .
The period tells it to add all the files in our current folder.
Now we need to create a commit, a commit is a point at which files are uploaded to the remote repository, and it has a message so you know what was changed.
For the message for our first commit, we’ll just say “initial commit” since it’s our initial commit:
git commit -m "initial commit"
Now we need to setup our Heroku app and make it so our git repository syncs with our Heroku app. To do this run the command:
heroku create
This will create a Heroku app on your account, with a random name. It will tell you something like this:
Creating floating-temple-0000... done, stack is cedar-14 https://floating-temple-0000.herokuapp.com/ | https://git.heroku.com/floating-temple-0000.git Git remote heroku added
So in this case my app’s name is floating-temple-0000, and the url I can access it at when I publish it is https://floating-temple-0000.herokuapp.com/. Also the url for the git repository for my app is https://git.heroku.com/floating-temple-0000.git. It has also created an entry in our git repository called “heroku” that has the Heroku git url saved.
Now we need to push our code to the git repository so that Heroku has our code, and can run it. To do that type:
git push heroku master
This is telling git to send all our code in the default local branch (called master by default), to the branch called Heroku. It can take awhile to send depending on how much code you have and how long it takes Heroku to build your app.
If it didn’t run successfully, then your going to need to read what the error says, and poke around a bit.
Running the app on Heroku
Now that all the code is on the Heroku server, and it’s been built successfully, we’re ready to deploy it. To deploy it simply run:
heroku ps:scale web=1
It will take a minute, and then it should tell you a dyno is running. Now you can access your app from the outside! To view your app in a webbrowser, run the command “heroku open”, or go to the url the create command gave you. (e.g https://floating-temple-0000.herokuapp.com/)
Congrats on getting your app running! Anyone can access the url, so go ahead and share it with your friends and family, or even me 🙂 I’d be glad to see what your’re working on and to give you some tips if you need them.
All for now!