Are you new to Phaser 3 and web development? The getting started guides probably make no sense to you.
You are reading about code editors, project files, and local web servers. That last one sounds particularly scary.
But fear not! It is not as difficult as it sounds and not understanding the guides and tutorials doesn't make you stupid.
We all don't know before we know. There is no other way.
In this article, we will give you 5 different ways to get a simple Phaser 3 project up and running so you can start learning from a course you bought on Udemy or a tutorial on YouTube.
First, let's set up your files.
Download Phaser from here. You'll want the
min.js version. If you download the
zip option then–aside from not following directions–you can find
phaser.min.js in the
Create a folder on your computer where you will put all your game-related files. Call it something like
my-game and put the
phaser.min.js file that you downloaded into that folder.
This is what your set up should look like:
my-game ├── index.html ├── main.js ├── phaser.min.js
index.html file will be the first file loaded by the web server and should look like this:
phaser.min.js is included before
main.js. Our Hello World example code will be in
main.js like this:
This example code will show the Phaser logo with an attached particle emitter bouncing around the screen.
Now that there is a project set up we can take a look at the options for launching a local server to run our code.
1. Visual Studio Code with Live Server
If you are using Visual Studio Code then a quick and simple option is to use the Live Server extension.
You can install it by going to the Extensions tab and searching for “Live Server” by ritwickdey or by opening the Command Palette (
cmd or ctrl + shift + p) and using the command:
ext install ritwickdey.liveserver.
After Live Server is installed you'll get a “Go Live” option in the bottom menu of VS Code. Click it to start your local server. 🎉
2. Brackets Live Preview
If you are using Brackets then it already comes with a way to launch a local server called Live Preview.
It is the rotated lightning bolt icon on the top right above the LEGO brick icon for Extension Manager.
Just click the Live Preview button to start your local server. A new Chrome window will automatically open. 🎉
3. Python SimpleHTTPServer
Open a new Terminal or Command Prompt and navigate to your project folder.
Then use this command to launch your local server:
python -m SimpleHTTPServer 8080
If that doesn't work then you probably have Python3 installed. Use this command instead:
python -m http.server 8080 # for python version 3
Go to http://localhost:8080 in your web browser to see your running project. 🎉
You can change the port number (
8080) by specifying a different number like
1337 in the
python command and at the end of the localhost URL.
4. Node http-server
If you have nodejs installed or don't mind doing so then there's an option almost as simple as the Python one above.
Install the http-server package by using this command in a Terminal window or Command Prompt:
npm install http-server -g
-g is important so don't leave it out. It tells
npm to install this package globally.
Then navigate to your project folder from within the Terminal or Command Prompt and run this command:
You'll get a message telling you the address and port at which you can see your running project. It'll be something like
5. MAMP as a Last Resort
If none of the above 4 options work for you then you may want to try MAMP.
Download MAMP here. It will include both the free and Pro versions.
Once installed open MAMP (not MAMP Pro) and open the Preferences or Settings window. You'll see a row of tabs at the top with options like “General”, “PHP”, “Web Server”, and “MySQL”.
Select “Web Server” and set the
Document Root or
Web Root field. This should be your project folder:
my-game. Press “Ok” to save and exit the Preferences screen.
From the main window, you'll see a “Start Servers” option with the power button icon. Click it to start your local server–it may take several seconds.
MAMP should automatically open the WebStart Page with information about your running server environment. You don't need to worry about any of that.
Click on the “My Website” tab at the top next to “Start” to see your running Phaser project. 🎉
Go continue with any Phaser course or tutorial you got stuck on now that you have a working local server.
When you are ready for a more advanced development environment check out this article on using Parcel.
Let us know in the comments below if you want more detailed steps for any of the 5 options in this article.
And don't forget to sign up for our newsletter so you don't miss any future Phaser 3 game development tips and techniques! Drop your email into the box below.
Don't miss any Phaser 3 game development content
Subscribers get exclusive tips & techniques not found on the blog!
Join our newsletter. It's free. We don't spam. Spamming is for jerks.