Using Rails+Bower on Heroku

gistfile1.md

Updated for Rails 4.0.0+

Bower

1. Set up the bower gem.

2. Follow the Bower instructions and list your dependencies in your bower.json, e.g.

   // bower.json
   {
     // ...
     "dependencies": {
       "d3": "~3.1.0",
       "underscore": "~1.4.4",
     }
   }

3. Include them in your JavaScript:

   // app/assets/javascripts/application.js
   //
   // Bower packages
   //= require d3/d3
   //= require underscore/underscore
   //
   //= require jquery
   //= require jquery_ujs
   // ...

4. Ignore the components in your repo. If you prefer to "vendor" your dependencies, skip this step.

   # .gitignore
   /bower_components/
   

5. Install the components.

   npm install -g bower
   bower install

At this point, make sure your app runs and the JS libs installed by Bower are loading on the page.

Heroku

To have Heroku deploys (Cedar stack only) install and compile Bower components on push:

1. Add the rails_12factor gem.

2. Use a custom Heroku buildpack that includes Node.js and Bower (see heroku/heroku-buildpack-ruby#67). If you vendored your components (skipping the .gitignore step above), you can skip this step and use the regular Ruby buildpack.

   heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'

Try a deploy: it should successfully compile assets.

---

Additional resources:

• http://dev.af83.com/2013/01/02/managing-rails-assets-with-bower.html
• http://kaeff.net/posts/sprockets-bower-better-component-packaging-for-rails-asset-pipeline.html
• rails/rails#7968