Setting-up your Dev Environment
Want to help work on Phaser 3? Or just get a headstart in how its all put together? Then this evolving guide is for you. It isn't a tutorial on how to use Phaser 3 to make games, but it will take you through the process of setting up your dev environment, running the Examples and learning how its all structured.
All of the following is subject to change as V3 evolves, but is correct as of 1st June 2017.
I'm assuming you already have a recent version of Node installed locally and can run npm. This guide is tested and works on both Windows 10 and OS X.
1. Checkout the repos
Check-out both the Phaser repo and the Phaser 3 Examples Repo. Make sure the Phaser 3 Examples repo is saved locally in a folder called phaser3-examples, which will be the default for most Git clients.
2. Matching Directory Levels
Ensure that both repos live at the same depth in your directory structure. For example: /usr/home/web/phaser and /usr/home/web/phaser3-examples. This is so the dev build scripts in the Phaser repo can safely copy files to ../phaser3-examples and have them end up in the correct place.
3. Install dependencies
Using your console, run npm install or yarn install as we've configs for both. This process will install a local copy of webpack and a handful of small support scripts. Note that Yarn on Windows seems to have issues making some packages global, so stick with npm if this is the case.
4. Webpack
Making sure you've got both repos checked out, and at the same directory level in your filesystem, issue the command webpack. If you can't issue the command then webpack may need installing globally. You should see the following output (truncated for brevity):
and at the end, after all the files have been packed:
If there are any errors in the code they'll be flagged during the build process.
What you need is the ability to issue the command webpack within the v3 folder and have it work.
5. ESLint
There is an ESLint configuration and an Editor Configuration in the v3 folder. Please adhere to them! Although not enforced in the build process yet, I will be adding that at a later point. There are lots of tools you can install so your editor of choice will check the ESLint config during development.
Later in this guide I'll explain how Webpack is configured.