How to manage Javascript dependencies with Bower in Rails apps?

bower, ruby-on-rails, sprockets

Solution

One way is using a version of Sprockets which allows your `application.js` to require packages defined by Bower. This feature was added in Sprockets 2.6, which Rails 3.x won't allow you to bundle due to a version restriction. To get that feature, you can bundle `gem "sprockets", "2.2.2.backport1"`.

That will make Sprockets start looking for assets in `vendor/assets/components` too. The path is vendor/components because Bower packages could contain CSS or image assets too, not just Javascript. The way Sprockets knows what Javascript to include when you require the package is by reading the `bower.json` file for the `main` property, which says which files the pipeline should include. A gotcha here is that many Bower packages don't supply this property or supply main sources that assume RequireJS is available (e.g. d3). You can see what source main are defined with `bower list --map`.

When the `main` doesn't suit you, you can simply use Bower to manage a single remote JS file instead of a package. Josh Peek has a gist that demonstrates this. The latest version of Bower expects `bower.json` instead of `component.json` so I've updated the steps:

$ npm install -g bower
$ mkdir -p vendor/assets
$ cd vendor/assets/
$ curl https://raw.github.com/gist/3667224/component.json > bower.json
$ bower install

That particular `bower.json` loads jQuery. Then in your `application.js` you can simply `//= require jquery` and Sprockets will find it in your `vendor/assets/components`. To add new dependencies, just include them in your `bower.json` and run `bower install` again, for example:

{
  "dependencies": {
    "jquery": "http://code.jquery.com/jquery-1.8.1.js",
    "d3": "http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.js"
  }
}

If you want to manage your `lib` and `vendor` assets in one configuration file, you could use bower-rails, but there's not much point in using `lib`. That gem also provides some Rake tasks, but they don't do anything more than the basic Bower commands.

To my knowledge, there is no way yet to have Bower install as necessary during asset compilation. So if you're using a deploy environment like Heroku, you'll need to commit your `vendor/assets/components` directory and update it through the `bower` command.

It would be nice if could you require your whole Bower dependency set with one directive in `application.js`. A gist from kaeff illustrates how to create a `require_bower_dependencies` directive. There's no gem that does this for you yet. Until then, you have to declare each dependency in both `bower.json` and `application.js`.

Problem

The Javascript dependencies are growing in my Rails app and it's leading to some problems. For one, with so many it becomes difficult to track and update versions of different Javascript libraries. At first I tried turning them into gems, but then I have to manage those. Some are already gems (like backbone-rails) but I would like to have one consistent package manager. So I'm looking into Bower, "a package manager for the web". Some blog posts from kaeff and from af83 have been helpful, but I still run into problems. I hope this question can lead to a variety of answers people can use to find the best solution for their projects. I'd particularly like to see advice for managing assets through Bower in a Heroku deploy.

Original source