Making Bower work with Rails 4

TL;DR: Bower is super easy to use with Rails, and here’s how to do it.

Every huge product literally starts off with an empty Sublime project. We started off the same way, and just two months into building the product, we ran into a situation where managing the font-end matter got very daunting. Well, being warriors ourselves, we kept figuring out a way to manage the Rails Asset Pipeline the right way, and also tossing in the new version of the JS libraries into the project.

But now, we’ve reached a point where the libraries we use are huge, and managing their versions are consuming a lot of time than it should. We were frustrated of downloading the new library, copying it into the corresponding JS in the Asset Pipeline, and get the project up and running. That’s when the Golden Egg came into the picture. And that was nothing other than Bower. A package manager for the web.

What is Bower?

We all love package managers. And until we pushed ourselves into using Bower, we underestimated it. Bower, as the definition goes, it is a package manager for the web.

Bower is more like Gems and Bundler for Rails. You specify what library you want to use in your project, and run a command, and you’re done.

How Bower will be useful for you

Bower has already been praised by a lot of brilliant web developers across the world, and we are not ashamed of joining them in giving a huge applause for Bower.

Here are a few things Bower can do, with Rails.

• You don’t have to worry about managing library versions. Just run a command, and you get the current version in your project
• You don’t have to wait for the Gems to get updated with the latest version of CSS or JS libraries.
• You don’t have to ever reference a Javascript or CSS library from an external source. Which means, Bower gives your the freedom of working completely offline with your assets, since it stores all the assets locally on your machine
• Huge database of libraries are already available to you with Bower
• Creating your own Bower is super damn simple
• Above all, Bower is what you need to get some good sleep

Use Bower with Rails 4

Now that we have heard enough about Bower, here’s a quick tutorial on how you could use Bower with Rails 4.

#1 Install Bower

Installing Bower is super simple. All you have to do is, just install Bower from NPM, globally:

#2 Initialize Bower

Now that you have Bower installed in your machine, navigate to your Rails Project directory and initialize Bower proceed with the following:

2.1. Create a .bowerrc file — This is the file that tells Bower the location in which it can store the downloaded libraries:

touch .bowerrc

We store the assets in our app/assets/components directory, and go ahead and edit the .bowerrc file with the following code:

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

2.2. Bower loads all of its configurations from bower.json which should be placed in the root directory of your project. Let’s go ahead and create one.

This will ask your a couple of questions, which are self explanatory. But if you are stuck at a question asking what types of modules does this package expose?, you can just choose globals. This will create a JSON file which would look something like this:

{
  "name": "BOWER_DEMO",
  "version": "1.0.4",
  "homepage": "https://github.com/skcript/skubot",
  "authors": [
    "Minion B <bello@skcript.com>"
  ],
  "description": "Bower - You beauty",
  "moduleType": [
    "globals"
  ],
  "keywords": [
    "Skcript"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "app/assets/components",
    "test",
    "tests"
  ]
}

Note: You might not have the dependencies block initially. Don’t freak out, we can automatically add it later.

#3 Using Bower with Rails

Now that we have a .bowerrc and bower.json file created and initialized, you can now go ahead and add libraries that you ever wanted in your Rails project. Let’s take the example of bootstrap here. We will be using Bower to install Bootstrap and its dependency, jquery into the project’s application.js and application.css.

bower install bootstrap --save

This will download bootstrap and its dependencies into your app/assets/components/bootstrap directory. If you are wondering what the — save option is doing here, it will automatically add the dependencies that you install into your bower.json file. This will help you circulate your bower.json to your team mates across the company for easier setup.

#4 Configure Rails

Now that we have bower installed and bootstrap added to the project, let’s go ahead and configure Rails to take advantage of our new workflow. Doing that is just simple. Just go ahead and open up config/application.rb in your Rails project, and add the following line:

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

This tells Rails to look into the Components folder for any assets that are references from the default asset files.

#5 Making use of Bower components in Rails

Now let’s go ahead and reference the newly installed bootstrap and jquery into the Rails project. Just open up app/assets/css/application.css and include bootstrap like below:

*= require bootstrap/dist/css/bootstrap.min

And to include jQuery into your asset pipeline, open up app/assets/javascript/application.js and add the following line before tree .

//= require jquery/dist/jquery.min

Preparing Rails Asset Pipeline for Production

Everything will work just fine till you push the code to production. We recently missed to notice this, but Rails is so innocent that it will not know what types of files to process when compiling the assets. To have a smooth ride, open up config/application.rb and paste the following code inside class Application < Rails::Application:

# We don't want the default of everything that isn't js or css, because it pulls too many things in
config.assets.precompile.shift

# Explicitly register the extensions we are interested in compiling
config.assets.precompile.push(Proc.new do |path|
  File.extname(path).in? [
    '.html', '.erb', '.haml',                 # Templates
    '.png',  '.gif', '.jpg', '.jpeg', '.svg', # Images
    '.eot',  '.otf', '.svc', '.woff', '.ttf', # Fonts
  ]
end)

Once you’re done with this. You won’t face errors like:

Sprockets::EncodingError: /home/ubuntu/skcript/app/assets/components/angular/angular.min.js.gzip has a invalid UTF-8 byte sequence

That is it

Using Bower has improved the way we work at Skcript everyday, and above all, it has helped us modularize and update the libraries with ease. With our new Bower workflow with Rails, we managed to remove almost 7 Ruby Gems which were Gemified versions of JS libraries.

That’s it for now. And you can expect more posts like this from our engineering team. Next up will be about DevOps and the art of monitoring your application. Feel free to tweet us at @SkcriptHQ

Originally published at blog.skcript.com.