The biggest advantage of HTML5 game development is, without question, the ubiquity of the platform. I can easily see if a game I made works on Android by opening up Chrome on my cellphone and checking a url. But what if we want immeadiate feedback? What if we have many different devices to test?
###The old way
To be able to access your game, you’d need to start a server, discover your external url which you would then open from the browser on the devices being tested. When you changed things, you’d need to manually refresh the device. What are we? Cavemen?
###BrowserSync to the rescue!
BrowserSync is an amazing tool that allows us to easily test games and other web applications with a great deal of automation. Since it is not tied down to any particular editor or IDE it is easy to add it to a pre-existing toolset.
First step is installing it with npm (node’s package manager).
npm install -g browser-sync
Ok, done. What can we do next? Well, let’s use the command line and cd into the directory where we have our game
cd path/to/your/game
Cool. Now we can call it like this:
browser-sync start
###Automate the server
Starting a local server, manually opening the browser, typing in the url… Easy but let’s automate this, shall we?
#This command will start a server and automatically open the default browser
browser-sync start --server
Awesome. You will notice in the command line output that it will list two urls. One is the local url, which is what you use on your own computer to access the game. The other is the external url, which is the link you use to access the game from other devices.
###Live reloading
This is one of the coolest features of BrowserSync. You can set files to be watched (either specific files or types of files) and, upon change to those files, the browser will be instantly reloaded.
This means that if you have a tablet, a mobile and a desktop with your game open, it will instantly update on all three.
#This will watch for changes to the main.js file
browser-sync start --server --files "main.js"
#You can use asterisk as a wildcard
#This will watch for js files in the root folder
browser-sync start --server --files "*.js"
#This will watch for all js files, recursively
browser-sync start --server --files "**/*.js"
#This will watch for all files, recursively
browser-sync start --server --files "**/*.*"
#You can use commas to input different paths to watch
browser-sync start --server --files "**/*.js, **/*.png"
###Custom starting point
When using PandaJS, the entry point is dev.html instead of the usual index.html. How can we make it so BrowserSync automatically opens that page so that we don’t have to?
#Just add the startPath parameter
browser-sync start --server --startPath "dev.html"
###Ghosting
By default, BrowserSync uses ghosting. This means that if you scroll down on your mobile, the desktop and tablet site scrolls along. This doesn’t really affect games made with Phaser, PandaJS or the other HTML5 frameworks but you should be aware of it. You can disable it by passing the –no-ghost parameter
browser-sync start --server --no-ghost
###Tailor it to your needs
My suggestions is taking a quick look at their command line API - it is really clear and concise and allows you to further finetune the behaviour to what you want.