Phaser Node Express Boilerplate

Get started quickly with Phaser and Node.

View on GitHub


This article covers the creation of the Phaser Node Boilerplate if you just want to download it and get started click here

Start by opening your sites folder in a terminal window. Then create and enter a new directory by running the following commands.

mkdir Phaser-Node-Boilerplate
cd Phaser-Node-Boilerplate

To make life easier for yourself in the future and turn this directory into a git repository by running the following command.

git init

We are going to need a local server to run our game on. Trying to load our game from file:// won’t work due to security reasons. We are going to use Node to run our server. If you aren’t sure if you have Node installed you can run node -v in your terminal, it should return the version if you do. If not download and install Node.js.

To start using node in our project we need to create a package.json in to root of our project and add the following. You can either do this manually or use the command npm init.

{
  "name": "phaser-node-boilerplate",
  "version": "0.0.1",
  "description": "A basic setup for a phaser game",
  "main": "server.js",
  "keywords": [
    "Phaser",
    "Node",
    "Express"
  ],
  "author": "George Butter",
  "license": "ISC"
}

Save and commit that to git.

git add package.json
git commit -m"Create package.json"

We are going to install some Node modules using npm. These modules will be installed in the current project in a folder called node_modules, but we don’t want to track these modules in Git. Therefore, create a new file in the root of you project called .gitignore and put the following on the first line.

node_modules

Once you’ve saved it you’ll want to stage it and commit to git.

git add .gitignore
git commit -m"Add node_modules to gitignore"

We are going to use use npm to install Express to handle requests on the server.

npm install express --save

Using the --save flag means that express will have been added to our package.json under dependencies.

You will also notice this command generated a package-lock.json. We should add and commit both of these to git. We can use git add . to stage all of the files in the directory.

git add .
git commit -m"Install express"

Now create a server.js in the root of the directory. Inside the server.js add the following.

const express = require('express');
const app = express();
const port = 3000;
app.use(express.static('client'));

app.listen(port, () => console.log('Phaser Boilerplate listening on port '+port+'!'));

When run this app will start the server and listen on port 3000 for connections. It will make any files in the client folder accessible to a visitor. Therefore it’s important that nothing sensitive or private goes in the client folder. Don’t forget to commit to version control before moving on!

git add .
git commit -m"Create server.js"

At the moment if we ran the server users wouldn’t be able to access anything anyway because they are only able to access the client directory, which does not yet exist. Create it and add an index.html to it. Add the following markup to the index file.

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="description" content="Phaser node boilerplate">
  <title>HTML5 Phaser Game</title>
</head>
<body>
  <h1>Hello World</h1>
</body>

Now just one more commit before we test our server is working.

git add .
git commit -m"Create index.html"

To start the server run this command from the root of the project.

npm start

If all is well you should see Phaser Boilerplate listening on port 3000! in the terminal.

Now open up your browser and navigate to localhost:3000. You should see ‘Hello World’.

Now we want to add Phaser to our project. There are a few ways to do this. The fastest way is to use the cdn, to do so add the following into the <head> of your /client/index.html. Note that 3.10.1 is the latest stable release at the time of writing this, you may want to check this is up to date.

<script src="//cdn.jsdelivr.net/npm/phaser@3.10.1/dist/phaser.min.js"></script>

Alternatively if you want to host your own copy of Phaser, you can find the latest release and download it from Github. You’ll want to get phaser.min.js and save it in your client folder then call it in the head of your index.html.

  <script src="phaser.min.js"></script>

After you have committed those changes to git you can start using Phaser!

Create a new file called client.js in your client directory and add the following basic setup to create a blank Phaser game.

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

Add this new file to the head of the index.html. Make sure you add it after Phaser!

  <script src="client.js"></script>

Now if you refresh your localhost:3000 you should see a black canvas! All of that for a black rectangle on a page I hear you say. This black rectangle is about to take you on an awesome journey of game development.

Troubleshooting

If you had problems getting setup, don’t fear, checkout this repository to see how I have mine setup and if you still can’t get it working feel free to raise an issue!