brew install node npm install bower
Now that you have Bower installed, we'll install the
bower-rails gem, which will bridge our Rails application with Bower. Add
bower-rails to our Gemfile and bundle install:
Bower works similarly to Bundler, and the Gem we just installed gives us a few handy tasks:
rake -T bower
Our dependencies go in a file called Bowerfile, located in the root directory of your project, that looks very much like a Gemfile. The dependencies we want to bring in first will be Angular and Twitter Bootstrap. Bootstrap isn't required, but we're going to use it here to keep the CSS we have to write to a minimum while still resulting in a pleasant-enough interface.
asset 'angular' asset 'bootstrap-sass-official'
Now, we can install our dependencies via the bower:install Rake task:
Bower installs dependencies in
vendor/assets/bower_components, which you should check into your repository.
This location may seem strange, but it allows you to separate Bower-managed third-party libraries from non-Bower-managed ones, if you should find the need for a library that isn't available via Bower (although that would be highly unusual).
vendor/assets/bower_components isn't Rails standard, you'll need to add it to the asset path so these files get picked up. While we're here, we'll also add a few lines of configuration to get the glyphicons working while we're at it.
We'll do this in
config/application.rb, like so:
config.assets.paths << Rails.root.join("vendor","assets","bower_components") config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts") config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)
Lastly, you'll need to reference these files in application.js and application.css.scss, respectively (we'll also remove the reference to Turbolinks while we're here). First, rename application.css to application.css.scss, because we'll need to use SASS directives to get everything to work for Bootstrap's latest version (note that they frequently break things on minor versions, so please let me know if this no longer works).