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 .bowerrc
file and add the bellow to that as that is where all the files are stored
{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.
"directory": "vendor/assets/components"
}
{
"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"
}
}
bower install
/*
* 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";
// 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.");
});
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)$)
bower cache clean
first to get the latest versions.