Bower integration with your Rails 4 app

First take a look to this post making a basic NodeJS installation on Ubuntu. You will need npm and bower installed.

If you want more details about this process take a look to this post.

Configure Bower to place libraries in our vendor directory’.bowerrc’:

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

Asset pipeline should know where to locate these libraries in order to process them. so write in your ‘config/application.rb’:

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

With `bower init` you would create ‘bower.json’ file which should have the following aspect:

{
  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": {
    "intl-tel-input": "~6.0.6"
  }
}

With the command `bower install` all dependencies will be installed at ‘vendor/assets/components’.

After that you can import the files in your assets. At ‘application.js’:

//= require intl-tel-input
//= require intl-tel-input/lib/libphonenumber/build/utils

At ‘application.sass’:

@import intl-tel-input/src/css/intlTelInput
.iti-flag
  background-image: url('intl-tel-input/build/img/flags.png')

On `rails s` assets will be taken from bower components.

Integrating in Capistrano flow

Add `gem ‘capistrano-bower’` to your Gemfile. And call the library from your Capfile: `require ‘capistrano/bower’`.

Then you can call the action in deploy command. At `config/deploy.rb` :

namespace :deploy do
  before :compile_assets, 'bower:install'
end