Taking advantage of Bower in your Rails 4 App

Easily manage your javascript and css libraries with Bower.

DoTWell.io
, in 13 April 2014

If you haven't heard about it yet, Bower is a powerful "package manager for the web" created by non other than the great peeps over at Twitter. But what can Bower actually do for you and why would you want it inside your Rails app?

Since you are already using Rails, you are familiar with the whole adding gem to your Gemfile and firing off bundle install. If you want to update a gem or all of them you simple run bundle update or bundle update <gem name> and you are good to go. But what if you want to upgrade Bootstrap, Angular, Jquery or any other client side libraries or frameworks? Well shit.

Bower, through its command line interface enables you to search, install, update and uninstall web assets like JavaScript, HTML and CSS. It also has it's own Gemfile & Gemfile.lock called bower.json.

Why you should use Bower

If you are not yet convince by now, here's my 8 reasons why I love using Bower.

If all of the above sounds great to you, lets see how does Bower fit into Rails.tall Bower and Rare BFFails

Bower and Rails are BFF

After reading terms like CSS, Javascript and HTML, you are already having nightmares thinking at the idea of bringing a 3rd party tool into the dreaded asset pipeline but fear not as Bower and the asset pipeline actually play very well together. Without further ado, here's how to set the whole thing up.

1. Install Bower

Since you are already running Rails 4, you've already got Node and NPM up and running on your machine. If not, Google is your friend.

To install Bower simply run:

npm install -g bower

We are using -g to install it globally so you can continue using it in all of your future projects.

2. Configuring Bower

By default Bower install the components (what it calls JS/CSS libraries) in your current directory which doesn't really play with the standard Rails folder hierarchy. To change that, simply create a .bowerrc (bower's config file. Read more about it here) file at the root of your Rails app and add this:

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

This will tell Bower to save all of the component files in that directory which follow Rails' convention on storing assets.

3. Your first package.json

From the root of your Rails app, run bower init to create your bower.json file. This will ask you a couple of questions about your apps so go ahead and enter it.

If you want to learn more about the what types of modules does this package expose? question, you can read this helpful StackOverflow answer but you should select globals in most cases.

Depending on your answers, your bower.json should looks something like this:

{
  name: 'BowerAndRails',
  version: '0.0.1',
  authors: [
    'Syl <nop@nope.com>'
  ],
  description: 'Tutorial about Bower and Rails',
  license: 'MIT',
  homepage: 'http://mycoolhomepage.com',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  "dependencies": {
    "angular": "~1.2.16"
  }
}

Now if I run bower install, it will pull Angular 1.2.16 from the Github repo into vendor/assets/components, nifty!

4. Configuring Rails

Now that Bower is installed and working, we just need to make sure that Rails play nice with it. To do so, head to your /config/application.rb file so we can let the asset pipeline about it. Simple add the following line to your file and save it.

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

Finally, to require the freshly downloaded components, open up application.js in /app/assets/javascripts and require the necessary JS file like you would usually do. In my example with Angular, I do so by adding this one line to it.

//= require angular/angular

Similar, for CSS frameworks and libraries like Bootstrap you can pop in the following line to application.css in /app/assets/css.

*= require bootstrap/dist/css/bootstrap

That's it! You can now use Bower to manage all of the 3rd party CSS & Javascript libraries you wan to use in your project and Rails' asset pipeline will take care of the rest for you.

Final Thoughts

Thanks Bower component management, you can now list, search, install and update your front end dependencies like you would do for your ruby gems. You will now:

If you have any questions, you can contact me on Twitter @Copypastaa.

TL;DR:

If you liked this post, you can share it with your followers or follow me on Twitter!