This guide is for Phaser 2 / Phaser CE. If you're using Phaser 3 then please go here.
In this tutorial we're going to cover setting-up a development environment with which you can build your Phaser games. This will include running a local web server, picking an IDE, getting the latest version of Phaser and checking it all works together.
If you trust us that you do need a local web server for development, then you can skip the explanation below and head directly to part 2.
If you'd like to know the reasoning why, please read on ...
A web server? But I want to make games!
"Why do I need a local web server? Can't I just drag the html files onto my browser?"A. Sane, Developer
Not these days, no. I appreciate that it's a bit confusing, even contradictory at times, but it all boils down to browser security. If you're making a static html web page then you can happily drag this file into your browser and see the end results. You can also "Save As" entire web pages locally and re-open them with most the contents intact. If both of these things work why can't you drag an HTML5 game into a browser and run it?
It's to do with the protocol used to access the files. When you request anything over the web you're using http, and the server level security is enough to ensure you can only access files you're meant to. But when you drag a file in it's loaded via the local file system (technically file://) and that is massively restricted, for obvious reasons. Under file:// there's no concept of domains, no server level security, just a raw file system.
do you really want JavaScript to have the ability to load files from anywhere in your file system?
Ask yourself this: do you really want JavaScript to have the ability to load files from anywhere on your local file system?
Your immediate answer should of course be "not in a million years!". If JavaScript had free reign while operating under file:// there would be nothing stopping it loading pretty much any file, and sending it off who knows where.
Because this is so dangerous browsers lock themselves down tighter than Alcatraz when running under file://. Every single page becomes treated as a unique local domain. That is why "Save Web page" works, to a degree. It opens under the same cross-site restrictions as if they were on a live server.
There's a detailed post about it on the Chromium blog that is well worth a read if you'd like to learn more.
Your game is going to need to load resources: images, audio files, JSON data, maybe other JavaScript files. And in order to do this it needs to run unhindered by the browser security shackles. It needs http:// access to the game files. And for that we need a web server.