Scaffold a phaser.js app with Yeoman- 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.
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.
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.
- Bower – package management for dependencies
You can find out more about these by following the links above.
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.
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!
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.