Nils Sommer

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.


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'


# Automatically runs `bower:install` during every deployment.
namespace :deploy do
  before 'deploy:compile_assets', 'bower:install'
Comments ( Feed)
  • David Fabreguette
    David Fabreguettevia

    Maybe this is a stupid question, but why would you have to do a "bower:install" server-side if you bower components folder is included in your git repo ?

  • Nils Sommer
    Nils Sommervia

    Hi David, thanks for the comment! Commiting the bower components to version control and still doing a bower:install on the server side would be stupid indeed. I added vendor/assets/bower_components to the .gitignore file. Not having to commit 3rd party frontend libs to VCS was one major benefit I wanted to achieve by using bower as a frontend package manager. Looks like I didn't mention that in my blog post :-P I will edit it to clarify this!

Write a comment