Rails and Bower for assets mangement

added on :: 18 December 2014

This is how to utilise Bower to install/add external JavaScript or CSS packages to a Rails applicatioin without using any Gems.

Firstly make sure you have Bower installed

npm install -g bower

Go to the root of your Rails app and say

bower init

[?] name: iamfree
[?] version: 0.0.0
[?] description: 
[?] main file: 
[?] what types of modules does this package expose? 
[?] keywords: 
[?] authors: anthony 
[?] license: MIT
[?] homepage: iamfree.app
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? No
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? YesN) y

{
  name: 'lexmedicus',
  version: '0.0.0',
  homepage: 'iamfree.app',
  authors: [
    'anthony '
  ],
  license: 'MIT',
  private: true
}

[?] Looks good? Yes

And then

Create .bowerrcfile and add the bellow to that as that is where all the files are stored

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

Then add your asset libraries to the bower.json  file (you would find this file in the Rails root. So all the libraries should be listed in the "dependencies" key. Also you can add a version number or point to a Github repository like below.

{
  "name": "iamfree",
  "version": "0.0.0",
  "homepage": "medicus.app",
  "authors": [
    "anthony "
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap-sass-official": "~3.3.1",
    "fontawesome" : "~4.2.0",
    "hi-there" : "git@github.com:iamfree-com/hi-there.git"
    "angular": "latest",
    "angular-route": "latest"
  }

}

Then install by calling

bower install

If all is good you would see all libraries stored inside "vendor/assets/components" directory.

Then you have tell Rails to look for the the newly added asset paths
 
Hightly recommend to use : gem 'sass-rails', this comes really handy to minify css.


For Stylesheets "app/assets/stylesheets"

Rename it to "application.css.scss"  or  "application.css.scss.erb"

If there is a css in the library, then you can directly require it like *= require fontawesome/css/font-awesome.css if it is a scss file with "_bootstrap" then @import it

 /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require helpers.css
 *= require fontawesome/css/font-awesome.css
 *= require_self
 */
 
 $icon-font-path: "bootstrap-sass-official/assets/fonts/bootstrap/";
 @import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
 @import "bootstrap-sass-official/assets/stylesheets/bootstrap";

And for Javascript you could have it like in your "application.js" file

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require bootstrap-sass-official/assets/javascripts/bootstrap-sprockets
//= require_self

$(function(){
   alert("you look nice today. Very good.");
});

  

In your application.rb file you may add bellow lines so Rails picks up the vendor assets path as well as icon paths for Bootstrap etc.

  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  
  config.assets.precompile << %r(bootstrap-sass-official/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff)$)
  config.assets.precompile << %r(fontawesome/fonts/[\w-]+\.(?:eot|svg|ttf|woff)$)

You might need to run bower cache clean first to get the latest versions.