How do I actually get my game running on Heroku?

Phaser 2 / CE
1

I’ve written a game and pushed it to Heroku. But, it’s not running. I just get the “there’s nothing here yet” screen.

I know that when I run the game locally, I run npm start so I create a Procfile and add the line

web: npm start

But that doesn’t work. So I try:

web: npm run build

Still, the game isn’t running. I have a look at the logs:

2018-12-10T13:11:38.577884+00:00 heroku[web.1]: Starting process with command `npm run build`
2018-12-10T13:11:41.987007+00:00 app[web.1]: 
2018-12-10T13:11:41.987026+00:00 app[web.1]: > CatNite@1.0.0 build /app
2018-12-10T13:11:41.987027+00:00 app[web.1]: > webpack
2018-12-10T13:11:41.987029+00:00 app[web.1]: 
2018-12-10T13:11:48.734307+00:00 app[web.1]: Hash: 3e735a6380b280f14c42
2018-12-10T13:11:48.734355+00:00 app[web.1]: Version: webpack 3.12.0
2018-12-10T13:11:48.734357+00:00 app[web.1]: Time: 5902ms
2018-12-10T13:11:48.734361+00:00 app[web.1]: Asset     Size  Chunks                    Chunk Names
2018-12-10T13:11:48.734363+00:00 app[web.1]: bundle.js  4.06 MB       0  [emitted]  [big]  main
2018-12-10T13:11:48.734366+00:00 app[web.1]: [0] ./src/config.js 515 bytes {0} [built]
2018-12-10T13:11:48.734368+00:00 app[web.1]: [1] (webpack)/buildin/global.js 509 bytes {0} [built]
2018-12-10T13:11:48.734369+00:00 app[web.1]: [2] ./src/lib/score.js 1.77 kB {0} [built]
2018-12-10T13:11:48.734371+00:00 app[web.1]: [3] ./src/main.js 5.46 kB {0} [built]
2018-12-10T13:11:48.734372+00:00 app[web.1]: [11] ./src/states/boot.js 2.29 kB {0} [built]
2018-12-10T13:11:48.734374+00:00 app[web.1]: [12] ./src/states/splash.js 4.52 kB {0} [built]
2018-12-10T13:11:48.734376+00:00 app[web.1]: [13] ./src/utils.js 246 bytes {0} [built]
2018-12-10T13:11:48.734377+00:00 app[web.1]: [14] ./src/states/menu.js 3.89 kB {0} [built]
2018-12-10T13:11:48.734379+00:00 app[web.1]: [15] ./src/states/game.js 13.9 kB {0} [built]
2018-12-10T13:11:48.734380+00:00 app[web.1]: [17] (webpack)/buildin/module.js 517 bytes {0} [built]
2018-12-10T13:11:48.734382+00:00 app[web.1]: + 8 hidden modules
2018-12-10T13:11:48.855931+00:00 heroku[web.1]: Process exited with status 0
2018-12-10T13:11:48.939357+00:00 heroku[web.1]: State changed from starting to crashed

This is over my head. How do I get my game running?

My webpack.config.js looks like this:

const path = require('path');

module.exports = {

  /**
   * Minimal build setup.
   * Create your app bundle.
   */

  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public', 'assets', 'scripts')
  },

  /**
   * Minimal development setup.
   * Serves files in ./public folder.
   * Refresh browser automatically when your bundle changes.
   */

  devServer: {
    publicPath: '/assets/scripts/',
    contentBase: path.join(__dirname, 'public'),
    port: 3000
  },

  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  }
};
```

Here is my `package.json`

````
{
  "name": "CatNite",
  "version": "1.0.0",
  "description": "Gruesome jump game.",
  "dependencies": {
    "phaser-ce": "^2.11.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "expose-loader": "^0.7.3",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "license": "ISC"
}

Any help would be appreciated!

2 Likes
2

This is the course I’m teaching this semester on “Cloud Computing”. You need to use “remote”. From I can see, you’re using npm on your local workstation instead remotely on heroku.

Perhaps this article might help?
Deploying a Game to Heroku

P.S.: Heroku uses AWS. This means that if there are network problems at either Amazon OR Heroku, you’ll have to wait until BOTH are back online.

3

If I understand correctly you are trying to deploy a static Phaser game, not the Node.js application(server). Heroku is a platform for hosting applications, say PHP, Ruby, Node.js, not static websites. Now, while it is possible to deploy the static website on Heroku I would not encourage you to go that route, because there are better and easier options.

If your game size is under 15mb I would suggest you use Netlify. You would need to add your project to Github(or Gitlab/Bitbucket that have a free option for private repositories) and then connect with your Netlify account, it then will deploy your app on every push you make in master branch.

You can also use Github Pages if you don’t mind your source code to be publicly available(or paying 7$ a month for private repositories feature).

You can also check Amazon S3.

2 Likes