A Guide to Deploying Phaser 3 Webpack Games to Heroku

I’ve had a hard time figuring out how to get a Phaser 3 Game deployed on Heroku. This is why I’m going to show you how to create a brand new node.js project, integrate it with Webpack and Phaser 3 game engine using Express as a Webserver, and deploy it to Heroku, so we can see it live.

Requirements

In order to follow this tutorial you will need these tools already installed on your local environment:

Node
Npm
Git
Heroku CLI (https://devcenter.heroku.com/articles/heroku-cli)
VSCode (or the code editor of your choice)

For this article, we assume that you have previous experience working with Git and Github.

Steps

Start a new project

Create a GitHub repository and clone it into your local environment.

Open a new terminal window in your project’s root path and initiate a new npm project using the following command. Use the default configuration (Press enter when asked)

$ npm init

After a successful installation, you will now have the package.json file added to your project’s root.

Install core dependencies

Now, we’ll need to install Webpack, Phaser 3, and Express modules using npm commands.

$ npm install webpack webpack-cli --save-dev
$ npm install phaser@3.23.0
$ npm install express

Express is needed because Phaser 3 needs a Web Server to run on.

Before we move one, we need to create 2 important folders for our app, the /src folder, where all of our application code will reside, and the /dist. Create them in your project’s root directory. Until now, your project directory should look like this:

Webpack configuration

Create a webpack.config.js file inside your project’s root directory and add the following code:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
    ],
  },
};

This configuration will tell Webpack to read what is on the /src/index.js file and output it to the /dist/main.js. Therefore, we will need to add an index.js file to the /src folder. You will create and import all the logic for your game inside the index.js.

Express server configuration

Create a server.js file inside your project’s root directory and add the following code (Which is a default implementation of an Express server):

const path = require('path');
const express = require('express');

const app = express();
const DIST_DIR = path.join(__dirname, '/dist');
const HTML_FILE = path.join(DIST_DIR, 'index.html');

app.use(express.static(DIST_DIR));
app.get('*', (req, res) => {
  res.sendFile(HTML_FILE);
});

const PORT = process.env.PORT || 8080;

app.listen(PORT, () => {

});

The above code will tell express to boot and listen to port 8080 by default if no environment variable PORT was supplied. The express server will serve the /dist/index.html file on localhost:8080. Now we can start a new terminal window in our project’s root directory and type the following command to start our server:

$ node server.js

Yes, we are missing an index.html inside our /dist folder, so we create it and add a script link to the /dist/main.js file (which will be automatically generated when we run the Webpack build command) inside the <body> </body> tags of the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Phaser 3 Game</title>
</head>
<body style="margin: 0; padding: 0;">
  <script src="main.js"></script>
</body>
</html>

Phaser 3 game configuration

I won’t go too deep into this topic because there is a lot of information and good tutorials from Phaser out there. However, what you need to know is that all of the phaser game configurations should reside inside your /src/index.js file.

This is an example of the game configuration for my game The Witcher (I know). If you like it don’t forget to star the repository.

import Phaser from 'phaser';
import MainScene from './scenes/mainScene';
import MainMenuScene from './scenes/mainMenuScene';
import GameOverScene from './scenes/gameOverScene';
import LeaderboardScene from './scenes/leaderboardScene';
import InstructionsScene from './scenes/instructionsScene';
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight - 5,
parent: 'divId',
dom: {
createContainer: true,
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false,
},
},
scene: [
MainMenuScene,
MainScene,
InstructionsScene,
GameOverScene,
LeaderboardScene,
],
};
const game = new Phaser.Game(config);

Heroku deployment

Assuming that you already have installed the Heroku CLI, now you need to create an important file that will tell Heroku how to run your app and start the server using node, this file is called Procfile and we’ll create it in the project’s root directory and inside it, add :

web: node server.js

That’s it, you are ready to deploy your app to Heroku and go live.

So first of all, we’ll commit all our work to our git repository. Later, we need to create a new Heroku app from the terminal using the Heroku CLI. For this, just go to your project’s root directory in a new terminal and type:

$ heroku create

This will link your actual local repository to a brand new Heroku app. Finally, push your project to Heroku using:

If you were working on git’s master branch:

$ git push heroku master

If you were working on any other branch :

$ git push heroku <your-branch>:master

Once it finishes compiling, go ahead a type heroku open in order to see your game live

$ heroku open

Happy coding!

As previously mentioned I have a public repo on GitHub for a game I developed using Phaser 3 — Webpack — Express, this is the live version.

Previously published at https://medium.com/@diegoreyes1212/how-to-deploy-phaser-3-node-js-express-webpack-game-to-heroku-tutorial-8a813f31502c