Setting up a Backbone.js Webapp with Yeoman, Grunt and Bower

A lot of things have changed in the JavaScript developer’s workflow over the past year. There are some new tools out there that make things a lot easier, so I thought I would dust off the old blog and do a write up on one of these tools called Yeoman.

Yeoman is “a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications”. I find that not only is Yeoman awesome for helping you build webapps, it is a great way to build mock applications as well.

Yeoman requires node.js and can be installed via npm. You can find the installation details in the documentation, not to mention the homepage, so I won’t go into that here. Installing Yeoman gives you a set of tools which will give you the ability to scaffold out a new web application, build, preview and test your project, and easily manage dependencies.

To set up a new webapp with Yeoman, I make sure I have the latest version of node.js by going to the homepage and getting the most recent install package. I then make sure all the npm packages I have installed are up to date by running the update command: npm update -g. The -g tells npm to update all the globally installed packages. This is a good time to mention all the tools mentioned in this article are command line. If you are a developer or an aspiring one, I suggest getting as familiar with command line as much as possible, if you aren’t already.

I create a new directory for the app called webapp and cd into the new directory. To scaffold out a new webapp with Yeoman, run the command yo webapp. This actually uses a Yeoman generator called generator-webapp to install the webapp scaffolding in addition to Bower dependencies, npm dependencies and Grunt tasks. If you don’t have the webapp generator installed, you can install it by running npm install -g generator-webapp. Once you answer a few set up questions you are ready to go. Bootstrap from Twitter is a good way to easily scaffold webapps, so I always let Yeoman install that as well.

If I look in the bower_components folder of my new app, I can see that Yeoman installed jQuery, Modernizr and Bootstrap already. I want to use Backbone.js in my new webapp as well. Yeoman makes it easy to manage these dependencies and install new ones via Bower. To install Backbone.js with Bower, simply run the command bower install backbone --save. The --save on the end automatically updates the bower.json file. This file shows you what dependencies have been installed in your app via Bower. You should be aware that Underscore.js is a dependency of Backbone, so we can install that via Bower as well by running bower install underscore --save.

That’s it! Once you have everything in place, you can test your new app with Grunt by running grunt server. Just make sure that you include your new dependencies in your app so that they are available. If you want them to be minified via the build tasks available with Grunt, you need to include them inside the special build comments.

If you want to go further with Backbone.js in Yeoman, there are 2 officially maintained generators for Backbone. One is generator-backbone and the other one is called generator-bbb and uses Backbone Boilerplate.

Here is a recap of all the commands I used above to set up my new webapp.

npm update -g
cd webapp
npm install -g generator-webapp
yo webapp
grunt server
bower install backbone --save
bower install underscore --save