5 Local Web Server Options to Get Started with Phaser

Simple and easy solutions for beginners on Mac or Windows

by Tommy Leung on February 24, 2020 6 minute read

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.

This is called setting up a development environment and you didn't have to do any of that if you came from learning JavaScript through Codecademy, Kahn Academy, or SoloLearn.

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.

Setting Up

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 dist folder.

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.

Next, create an index.html and a main.js file in the my-game folder. You may want to consider installing either Visual Studio Code or Brackets to create those files.

This is what your set up should look like:

my-game
├── index.html
├── main.js
├── phaser.min.js

Your index.html file will be the first file loaded by the web server and should look like this:

1
2
3
4
5
6
7
8
9


<html>
	<head>
		<title>My Phaser Game</title>
		<script src="phaser.min.js"></script>
		<script src="main.js"></script>
	</head>
	<body>	
	</body>
</html>

Notice that phaser.min.js is included before main.js. Our Hello World example code will be in main.js like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


var config = {
	type: Phaser.AUTO,
	width: 800,
	height: 600,
	physics: {
		default: 'arcade',
		arcade: {
			gravity: { y: 200 }
		}
	},
	scene: {
		preload: preload,
		create: create
	}
};

var game = new Phaser.Game(config);

function preload ()
{
	this.load.setBaseURL('http://labs.phaser.io');

	this.load.image('sky', 'assets/skies/space3.png');
	this.load.image('logo', 'assets/sprites/phaser3-logo.png');
	this.load.image('red', 'assets/particles/red.png');
}

function create ()
{
	this.add.image(400, 300, 'sky');

	var particles = this.add.particles('red');

	var emitter = particles.createEmitter({
		speed: 100,
		scale: { start: 1, end: 0 },
		blendMode: 'ADD'
	});

	var logo = this.physics.add.image(400, 100, 'logo');

	logo.setVelocity(100, 200);
	logo.setBounce(1, 1);
	logo.setCollideWorldBounds(true);

	emitter.startFollow(logo);
}

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. 🎉

Check out this article if Live Preview isn't working.

3. Python SimpleHTTPServer

If you have Python installed on your computer–it is preinstalled on Macs–from doing data science or a Python coding course then you can use the built-in SimpleHTTPServer module.

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 7000, 9000, or 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

The -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:

http-server

You'll get a message telling you the address and port at which you can see your running project. It'll be something like http://127.0.0.1:8080. 🎉

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. 🎉

You can get more information from the official MAMP documentation.

Next Steps

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.