Bower integration with your Rails 4 app

by about , ,

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

 

7 thoughts on “Bower integration with your Rails 4 app”

  1. 逆向直销，震撼来袭：

    优势①：逆向网赚，真正实现就算什么不干都赚钱
    优势②：十级提成，下线年年续费，上线年年收钱
    优势③：静态分红，每日签到就有钱，封顶一百元
    优势④：百万资源，每日更新，一键转存无限下载
    优势⑤：强大网站，八个栏目，无限发布产品广告

    免费注册地址：

    http://www.629494567.9489988.com/

  3. Excellent post. I used too be checking continuously this blog
    and I’m inspired! Extremely useful info specially the final part
    🙂 I handle such info a lot. I was seeking this certain information for a long time.
    Thanks and best of luck.

  4. I got this web page from my pal who told me about
    this web site and at the moment this time I am visiting this website and reading very informative articles
    or reviews here.

  5. I’m amazed, I must say. Seldom do I come across a blog that’s both educative and amusing, and
    let me tell you, you’ve hit the nail on the head. The problem
    is something which not enough people are speaking intelligently about.
    I’m very happy I found this in my search for something concerning this.

  6. Oh my goodness! Impressive article dude! Many thanks, However
    I am experiencing problems with your RSS. I don’t understand the reason why I can’t join it.
    Is there anyone else having similar RSS problems? Anyone who knows the solution can you kindly respond?
    Thanx!!

Leave a Reply

Your email address will not be published. Required fields are marked *