Scaffold a phaser.js app with Yeoman

Monday. January 12, 2015 - 2 mins

Yeoman is a scaffolding tool for creating modern web apps that uses the npm package manager. At the time of writing there are over 1300 generators for various web application stacks. I’d read allot about it in .Net magazine and in various blog posts, but never felt the need to include it in my workflow.

Until now.

On my first day back at University after the Christmas break I started a new module titled ‘The Design Process’. The core of the module is creating a mobile game using Phaser.js. This rang a bell in my head as one of the libraries I’d read about where Yeoman was mentioned. I thought this was a great opportunity to try it out.

To use Yeoman you need to have Node.js and the npm package manager on your system. If you don’t have them already, go ahead and install them now.

Installing Yeoman

As you can probably guess, Yeoman is a command line tool. Fire up the node.js command prompt (or the command line tool of choice) and enter the following.

npm install -g yo bower grunt-cli gulp

This installs four things.

Yeoman
Bower – package management for dependencies
Grunt – a task-based command-line tool for JavaScript projects
Gulp – a task-based command-line tool for JavaScript projects

You can find out more about these by following the links above.

Installing Phaser

Now that Yeoman is installed, it’s time to install the Phaser.js generator. There are several variations depending on how you want to code your web app. We’re going to use the vanilla generator for the purposes of this tutorial. In the command prompt enter the following.

npm install -g generator-phaser-official

This pulls the Phaser.js generator onto your system and registers it with Yeoman. We’re now ready to scaffold our web app.

Scaffolding the application

It’s time to create the directory our application is going to live in. In the command prompt navigate to the desired parent directory then create a new one for the application with the following commands.

mkdir my-phaser-project cd my-phaser-project

Now we’re in the new directory and ready to rock. Now we scaffold the project using Yeoman. Within the command prompt type the following.

yo phaser-official

That’s it! You will be asked some questions during setup for various setting within the project. Bower will run to download any dependencies the project may have.

Your now ready to create your game. Have fun!

Final thoughts

We’ve just seen how easy it is to create modern web app using Yeoman. From here I’d suggest you have a look through the generator directory to get an idea of what’s possible. If you can’t find something suitable why not create your own and add it to the directory. Open source FTW!

For your next web app project you just need to install the required generator and scaffold the project. Simple.