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.
To make life easier for yourself in the future and turn this directory into a git repository by running the following command.
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
Save and commit that to git.
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.
Once you’ve saved it you’ll want to stage it and commit to git.
We are going to use use npm to install Express to handle requests on the server.
--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.
Now create a
server.js in the root of the directory. Inside the server.js add the following.
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!
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.
Now just one more commit before we test our server is working.
To start the server run this command from the root of the project.
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.
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
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.
Add this new file to the head of the
index.html. Make sure you add it after Phaser!
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.
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!