Bower with Sprockets and Capistrano

Some frontend libraries provide ruby gems that can be listed in a Gemfile and installed with bundler. Most of the time, they integrate well with sprockets, the asset pipeline used by Rails. Integrating other package managers like bower brings some difficulties.

Today, I added anchor.js to my blog. I installed it using the popular bower package manager for the web. To integrate bower and the packages installed with it properly into the Rails app that powers my blog, there were two things to do.

Bower and Sprockets

Integrating bower into the asset pipeline of Rails was rather simple. As described in this really great blog post, this can be done easily in 3 steps.

1. Changing the installation location

Rails has the directory vendor/assets/ for 3rd party frontend libraries. Therefore, it only makes sense to install bower packages to this path. The following .bowerrc file configures bower to install any packages to vendor/assets/bower_components:

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

2. Notify Sprockets

Next, Rails needs to be configured to include vendor/assets/bower_components/ into the Sprockets injected paths via this oneliner in config/application.rb:

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

3. Include the libraries

Finally, including the libraries into your application's Sass/CoffeeScript bundles works just like including any other files. (@import in Sass, //= require in CoffeeScript/JS).

Bower and Capistrano

Of course, using bower as a package manager brings more advantages than just simpler downloading and dependency management. It also frees us from the need to commit vendor libraries to version control (Hallelujah!). To automate fetching libraries during deployments in the production environment, I wrote a simple rake task which integrates this workflow into Capistrano. You can check it out at the at GitHub or below.

bower.rake

namespace :bower do
  %w[install list].each do |command|
    desc "#{command} bower packages"
    task command do
      on roles(:web) do
        within release_path do
          execute 'bower', 'install'
        end
      end
    end
  end
end

deploy.rake

# Automatically runs `bower:install` during every deployment.
namespace :deploy do
  before 'deploy:compile_assets', 'bower:install'
end