Adding Javascript Libraries to a Rails Project

December 12, 2015

Image 8

Alternative ways of adding JavaScript libraries to a Ruby on Rail's project

This blog post will examine three common ways of adding JavaScript libraries to a Rails project, and why I come out in favour of using rails-assets RubyGems.

Option 1 – Adding the JavaScript file to the Vendor Directory

The JavaScript file is copied into the vendor directory with the file name and path included in the mainifest.js . The files listed, in the manifest.js file, by default, are compressed, uglified and concatenated using Rail's Asset Pipeline.

Advantages and Disadvantages

This provides a quick and easy way of adding JavaScript libraries to your project. The disadvantage is that you don't have any dependency management , nor is it obvious which version has been installed.

Upgrading to a later version of a library can be a time consuming process as you have to manually check that the correct dependencies have been included, while simultaneously ensuring that you are not breaking other library's dependencies.

Setup vendor

Option 2- Using RubyGems to add JavaScript libraries to Rails

Ruby uses RubyGems for package management. For each RubyGem, the name, version, operating system and any dependencies are specified. To add a RubyGem to your Rail’s project, the RubyGem’s name is added to the Gemfile and the command bundle install is entered into Terminal. This will install the RubyGem along with any dependencies into your Rail’s project.

To update a RubyGem, or possibly revert to an older version, the required version is specified in the Gemfile file and the command bundle installis entered into Terminal. This will remove the previous RubyGem and add the newly specified RubyGem along with any dependencies to your Rail’s project

Not just Ruby files but any other type of files can be added to a project using RubyGems. RubyGems is not just for Ruby files! A number of RubyGems developers have used this to add JavaScript libraries to Rail projects. The most famous example is jquery-rails gem which adds the jQuery JavaScript library to Rails.

The big problem is that you are reliant on the RubyGem's maintainers to keep up-to-date with new releases of the JavaScript library.

Option-3 Using Bower JavaScript Libraries in Rails (

Using rails-assets has all of the advantages of using RubyGems to add JavaScript libraries, but without having to rely on a RubyGem maintainer to keep up to-date with the latest version.

It works by automatically converting a Bower project to a RubyGem so that it can be included and treated like any other RubyGem.

What is Bower?

What RubyGems is to Ruby, Bower is to JavaScript. It is an easy and lightweight solution to specifying dependencies and sharing open source libraries. It has the same benefits as RubyGems with version control and dependency management.

The magic of Rails Asset is that it automatically converts the Bower package into a RubyGem with the JavaScript and CSS being made available to Rail’s Asset Pipeline.

To understand what is going on lets go through an example:

Creating a Bower package

Once you have installed NPM type the following into Terminal. npm install -g bower.

In order to install NPM - a package manager for Node - requires that you first install Node. There are a number of posts that show you how to install Node - see appendix

Create your Bower package by typing into the Terminal the following:

bower init

This takes you through a couple of steps to define your Bower Package. You will need to specify a unique project name and the location of the git repository.

Once the Bower package has been created then it can be registered so that it is listed in the Bower’s directory.

To register, type the following into Terminal. My dummy project is called cezDemoBower

bower register  cezDemoBower

You can use the following command in Terminal to check that the package has been correctly setup

bower info cezDemoBower

Using Asset-Rails

To use this Bower Library in your rails application

Include the following in your Gemfile

source '' do
  gem "rails-assets-cezDemoBower"

This will make a request from for the RubyGem rails-assets-cezDemoBower which it will then fetch from the Bower Library cezDemoBower Bower Project and convert it in to a RubyGem. The JavaScript and CSS files, included in the Bower project, will become available to the Rail’s Asset Pipeline and available to your project. Note: if a Bower project has any dependencies then they will be included in as a rails asset gem . Neat hey!

In Summary

Using rails-assets allows you to include any of Bower’s JavaScript libraries directly into your Rails applications. It is a clever way of leveraging existing packages in Bower with all of the advantages of using RubyGems.