5 Ways to Manage Front-End Assets in Rails

Ready to have the latest and greatest HTML5, JavaScript and CSS3 components like Angular and Ember in your Ruby on Rails application?

Choose one of these five strategies to ensure that you successfully have up-to-date, third-party code included in your app.

Strategy One: Download from Source

Just download the code from each website and put it in the vendor/assets/ directory. This is a simple strategy that is easy to implement right away. It also is somewhat naïve. It’s not automated. Updating the code will be a a slow point-and-click process that is hard to duplicate when you have a new developer on board. You may have to hand-code and copy particular assets to the correct file paths, which is error-prone and time consuming.

Strategy Two: Use a Ruby Gem Including a Rails Engine

There are many Ruby gems that package front-end assets into a convenient and easy-to-use gem. Bundler is great at managing gems and keeping them up-to-date. But that’s only if the gem’s maintainer keeps the front-end assets current. Unfortunately, that doesn’t happen very often and frequently takes a long time. And even worse, each ruby gem packages front-end assets in a slightly different way.

Strategy Three: Use Bower and Configure Rails

Bower is a package manager for front-end assets. It can help you install and keep your Javascript and CSS assets up to date very easily and efficiently. Bower depends on Node, npm, and git and can be installed via npm install -g bower. You’ll have to configure both Bower and Rails to know about each other and install things to the right directory. There are a couple of great guides (1, 2) on coderwall for this already.

Strategy Four: Use the Bower-Rails gem

Luckily, coders at a company called 42dev created the bower-rails gem. It makes installing and updating Bower packages quite a bit easier. It includes rake tasks for the above, and also has a nice Ruby Domain Specific Language (DSL) for specifying which packages you want included, via a Bowerfile. As of today, the README for the gem is missing a few small steps, so I wrote up an overview of the process for a lightning talk that I gave at the recent Seattle.js meetup at Facebook here in Seattle.

Strategy Five: Use Rails-Assets.org

Last, but most certainly not least, there is an even newer, slicker way to manage your front-end assets in Ruby projects: RailsAssets.org.

Add https://rails-assets.org as an additional, new Ruby gem source in your Gemfile, and reference any Bower components as gem 'rails-assets-BOWER_PACKAGE_NAME'. For example, to pull in Twitter bootstrap, you would use gem 'rails-assets-bootstrap'. Don’t forget to also reference the Bower package name in your asset pipeline (application.js and application.css)

Want to Learn the Professional Tools That the Top Ruby on Rails Developers Use?

Sign up for one of our workshops, classes, or Development Accelerators and learn from us in person!