Heroku + Rails + Bower

1. Install nodejs and npm

I like to use nvm by creationix.

2. Install Bower

Make sure to install Bower into your projects local node_modules. This is a best practice encouraged by Heroku. You should add node_modules to source control.

npm install bower

3. Using .bowerrc tell Bower to install all assets into vendor/assets/components:

{
  "directory": "vendor/assets/components"
}

4. In application.rb tell Rails to add vendor/assets/components to the precompile load path:

config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

5. Added vendor/assets/components to .gitignore

6. Create a bower.json file and add your dependencies:

{
  "name": "my-project",
  "dependencies": {
    "bootstrap": "~> 3.0"
  }
}

7. Install dependencies using Bower:

bower install

8. Add your dependencies to your Rails asset manifest files:

// app/assets/javascripts/application.js
//
// ...
//= require bootstrap
// ...

/* app/assets/stylesheets/application.css
 *
 * ...
 *= require bootstrap
 * ...
*/

9. Register the extensions for the files that are meant to be precompiled in application.rb:

# via https://gist.github.com/afeld/5704079

# We don't want the default of everything that isn't js or css, because it pulls too many things in
config.assets.precompile.shift

# Explicitly register the extensions we are interested in compiling
config.assets.precompile.push(Proc.new do |path|
  File.extname(path).in? [
    '.html', '.erb', '.haml',                 # Templates
    '.png',  '.gif', '.jpg', '.jpeg', '.svg', # Images
    '.eot',  '.otf', '.svc', '.woff', '.ttf', # Fonts
  ]
end)

Note that I usually take out the template extensions. These generally compile things my app doesn't need from frontend dependencies. To each their own.

10. Make sure your assets precompile locally:

$ RAILS_ENV=production rake assets:precompile -v

11. Configure Heroku to use ddollar's multi-buildpack:

$ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

12. Add the heroku-nodejs buildpack and heroku-ruby buildpack to .buildpacks:

$ cat .buildpacks
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-ruby

Make sure that the ruby buildpack is the last one in the list. This will allow you to access the Rails console when running heroku run console.

13. Create package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "bower": "~1.2"
  },
  "engine": {
    "node": "0.10.x",
    "npm": "1.3.x"
  },
  "scripts": {
    "postinstall": "./node_modules/bower/bin/bower install"
  }
}

Note that the dependencies option is where you will add all your nodejs dependencies. Heroku will run npm install on deploy.

Also note the postinstall script. This will tell Bower to pull down your assets. This is important otherwise your rake assets:precompile won't have anything to compile.

14. Push to Heroku

git push heroku master

15. Sit back and marvel at how you will never have to manually manage your frontend dependencies again.

@font-face {
  font-family: 'FontAwesome';
  src: font-url('components-font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: font-url('components-font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
  font-url('components-font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
  font-url('components-font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
  font-url('components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}