Bower is a front-end package manager from Twitter. It allows you to specify versions for packages and will resolve any dependencies that package may have automagically. While not perfect, it's certainly better than copying and pasting assets into your project and can help bring some control to your dependencies, especially when upgrading packages to newer versions.

Please note this has been tested in Rails 3.2 and up but not older versions of Rails. You will also need Node and NPM installed, we're using 0.10.28 and 1.4.14 respectively.

To start with Bower in your Rails project create a package.json file that specifies a development dependency on bower as follows:

Next you'll want to run npm install to install the new dependency on Bower.

The next step is to create a .bowerrc file that tells bower where to place the downloaded assets, we're going to use vendor/assets/components but you could put this somewhere else if you wanted.

Now we need a bower.json file that specifies our front-end dependencies for Bower to install. We're just going to specify the excellent Normalize CSS from @necolas that we use in every project.

Don't forget to change the name of your app!

You can specify components directly from github directories like username/repo or specify SHAs to use via username/repo#sha. For all of the options see the Bower documentation.

We need to tell Rails to use this new vendor/assets/components folder in the asset pipeline, we can do that by adding the following to our config/application.rb file.

We can now run bower install which will tell bower to go and fetch the components that have changed, or been added. The last step is to include the Normalize CSS package we've added via Bower to our application.css. Depending on whether you're using Sass or vanilla CSS this may look different, both are provided in the Gist below.

You'll notice that the structure is always package-name/file-to-include. We don't need to add the full path as we added the line earlier to our application.rb file that lets Sprockets know that the vendor/assets/components folder is a location to search for assets in. The same format applies for Javascript packages as well.

To get to grips with more Bower commands, such as upgrading packages and resolving conflicts with versions definitely look at the documentation.

We've been adding the vendor/assets/components folder to our .gitignore file for quite some time and still do on a lot of projects, however one of the problems I've personally experienced recently has been with Bower + Heroku.

While you can use multi-buildpacks like this one to get them to play nicely we we're finding that running a Bower install on every single Heroku deploy was unreliable and causing our deploys to break about 1/4 of the time. Therefore I took the decision to check-in our components; after-all they don't change very frequently and it saved us a lot of headaches with our deploys. Addy Osmani wrote an extensive look at whether you should or shouldn't check in components last year; it's definitely worth a read.

Personally, I think do whatever is easiest for you and your setup, but I'd love to hear your opinion on this subject.

All this Gists for this article can be found here.