Bower and Rails. Friends forever.

Bower is an uber-trendy package manager supplying a huge range of Javascript and CSS frameworks and plugins, which runs via Node. I find it really useful when prototyping because I can just burn through any number of things until I find exactly what I am looking for, and recently I thought "How could I use that with the Rails pipeline". Thankfully the answer is quite simple, but, as with most things, there are levels of integration, starting with the simple (but less efficient), going to more complicated, I will cover my preferred method.

The first thing to do is to ensure you have everything set up that you need, so get Node and NPM setup (Google is your friend) and then install Bower:

npm install -g bower

Next you need get Bower to play nicely with the Rails directory structure. To do that you have to modify Bowers main configuration file .bowerrc which needs to be in your user folder (it doesn't exist by default). Make it look like this

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

You can set it up to where you feel suits your way of working, like the vendor folder for example, but I find it easiest in a specified folder within assets. The next step is to define what you want Bower to install into your project, so start off by looking up what you need in the component list and then you can build your bower.json file, which will sit in your project root

{
  "name": "my-project",
    "dependencies": {
    "underscore": "~1.4.4"
  }
}

You can add whatever packages you want at this point, you can also use the Bower command line tools to search for packages:

bower search moment

Which will return results like this

Search results:

moment git://github.com/timrwood/moment.git
momentjs git://github.com/moment/moment
angular-moment git://github.com/urish/angular-moment.git
momentjs-web-lang git://github.com/vperron/momentjs-web-lang.git
moment-range git://github.com/gf3/moment-range.git
moment-timezone git://github.com/moment/moment-timezone.git
angular-momentum-scroll git://github.com/wzr1337/bower-angular-momentum-scroll.git
momentum-css git://github.com/edgincvg/momentum-css.git
moment-jalaali git://github.com/behrang/moment-jalaali.git
moment-fromNowUpdate git://github.com/garethadavies/moment.fromNowUpdate.git

You can then install the package

bower install moment --save

Adding the save parameter ensures that Bower adds the dependancy to your bower.json file. You can leave this out if you just want to try things out, and then you can add them to your dependancy file yourself later. You can also uninstall packages

bower uninstall moment

You also would also have to remove it from your bower.json file as well.

The final step is to get Rails to work nicely with your Bower components directory, as well as including them within the relevant CSS and JS files. Starting with getting Rails to add it to the asset pipeline, you will need to modify the application.rb file in the /config/ dir, and add the following within the *'Application' class:

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

Make sure you modify this if not using the components folder.

Then it is just a case of calling the packages into your main asset code, for Javascript files it is as simple as adding

//= require underscore/underscore-min

For the Bower component you want to add, where it is just the path relative to the components directory and then the JS file within it. And for CSS (SASS in this case):

@import "normalize-css/normalize";

Again where the path is relative to the components directory.