Posted on 02/07/2013. By Pete Otaqui.
Yeoman is a fantastic tool for giving you a standardised, thought out, useful project structure for html and javascript applications.
The only thing I think it lacks is a really straightforward quickstart guide for new users, hence this blog post.
Step 0: Requirements
Yeoman may not work or have more trouble running in Windows. Get yourself a Linux Virtual Machine, at once, and do all the following steps inside there.
Step 1: Get Node / NPM
You will need to install NodeJS in a manner suitable for your platform. This should (hopefully) come with NPM as well, or if you not you will also need to install that.
Step 2: Install yeoman, grunt and bower
Note that the yeoman package is called “yo” and the grunt package is called “grunt-cli”.
$ npm install -g yo grunt-cli bower
Step 3: Get the generator(s) of your choice
Yeoman uses “generators” to actually create project setups. The “standard” one is called “generator-webapp” but there are many others you may want to look at.
Find project generators like this (unfortunately not necessarily namespaced in any way with “yeoman”, so you will get false positives):
$ npm search generator
Note that throughout 2013, yeoman underwent significant changes, so if a generator package hasn’t been updated since March or April of 2013, you may want to avoid it.
To get the standard “webapp” generator you want to do this:
$ npm install -g generator-webapp
You can always install another generator, for example for Backbone or AngularJS, if you want to start a project with those frameworks.
Step 4: Create your project
Create your project directory, and then run the generator to create all the files and folders you need to get started. In this case I’ve used the standard webapp-generator, which is invoked with the name “webapp”.
$ mkdir ~/projects/frabulator $ cd ~/projects/frabulator $ yo webapp
Lots of the generators will ask you some questions about exactly what features you want or need. You can always tweak this stuff later, but it’s worth getting it right if you can, this is all about making things quick and easy!
Step 5 … there is no Step 5
That’s it. You should see lots of stuff is created in the directory, and your project is set up and ready to go. But what does that mean?
From here on in, you will be using grunt (mostly) and bower (occasionally). You can use bower to install any new dependencies you might want, for example “howler” if you want to use that for web audio.
$ bower install howler
Far more often though, you will be using grunt to serve (with live reload!), test and build your application. The following three commands are the most common things you will do from here on in:
$ grunt server # ... this will launch a webserver on port 9000 (by default), # ... it will launch the index in your browser, and will live # ... reload if you save changes to some project files $ grunt test # ... this will run your test suite. Exactly what this # ... means depends on your app, and the generator you # ... used, but generally it will run in a headless webkit # ... "phantom" browser $ grunt build # ... run the tests and package your app for distribution, # ... in 'dist/'
There are more grunt commands built in. To get an idea, you can refer to the Gruntfile.js that your generator created for you, and obviously the Grunt.js documentation.