Deploying Rails + Bower on Heroku
Note: This post is targeted at those familiar with Ruby on Rails and Bower, but having trouble deploying on Heroku.
During my recent work with mRelief, a nonprofit that modernizes public benefits through web tools and an unprecedented use of text messaging in social services, my team member Genevieve and I came across some undocumented issues involving Bower in the context of Rails when deploying to Heroku. This post briefly outlines what issues we faced and how we solved them.
For those who need a Bower refresher, Bower is a package manager for the web that hosts many useful packages used by thousands of web developers daily.
Some Background
When building a Rails app, there is a package manager called Bundler that manages Ruby dependencies in the form of Ruby gems. While Bundler is great for managing ruby libraries, Bower has become the go to source for front end packages, so it’s only natural that one would want to integrate Bower into a Rails app. Thanks to the hard work of Github user rharriso and his gem bower-rails, doing so is fairly simple. You even can use Bower in a Ruby DSL managed Bowerfile.
The Problem
Issues arise when one attempts to deploy to Heroku, specifically when git-ignoring the “vendor/assets/bower_components” folder, a common practice employed to prevent the external dependencies Bower installs from being stored in Git version control.
Simply put: Bower is installed via npm, a package manager for node, thus two non-ruby dependencies (npm and node) are needed before one can successful install and utilize bower-rails and Bower. There are many great, up-to-date tutorials for installing Node and npm in one’s local development environment, but the same cannot be said for doing so on Heroku.
The issue stems from the way Heroku manages their deploy and build process. Heroku uses Buildpacks, which are language specific packages that run during the Heroku Build/Deploy process and configure each Dyno’s environment. The default Buildpack for a Rails app is Heroku’s official Ruby Buildpack, which does not include Node, which as we know, is required for installing npm and Bower.
The Solution(s)
My team member and I found a custom Buildpack that was built to solve this issue. The Buildpack managed to install Node, npm and Bower but was incompatible with the worflow of the bower-rails gem, running “bower install” to an absent bower.json, causing the build to fail. This happened before bower-rails was able to run it’s own “bower install” command, so the desired packages were never able to be installed.
After more research, the first part of a solution appeared: Multiple Buildpacks. In May 2015, Heroku added first-class support for multiple Buildpacks in their CLI toolbelt. Before then, the process of adding multiple buildpacks was poorly documented and hard to figure out, which added to the difficulty in finding this solution. Using the newly supported CLI command is much simpler. To begin the setup one needs for using bower-rails on Heroku, one must first explicitly set the Ruby buildpack:
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-ruby.gitThen, using the following command in the root directory of your app, a Node Buildpack can be set to run before the Ruby BuildPack:
heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-nodejs.gitSetting the Node Buildpack prior to the Ruby one allows Node and npm to be installed before the Bower Rails gem runs it’s “bower install” command, right before assets precompilation.
There’s only one step left: Setting a command to install bower using “npm install bower”.
Luckily, all we need is the following package.json file at the root of our app, which gives Node details about it’s needed dependencies (currently just bower).
{ “name”: “app-name”, “version”: “1.0.0”, “dependencies”: { “bower”: “1.3.8” }, “engine”: { “node”: “0.12.x”, “npm”: “3.1.0” }}
Note: the version numbers listed are the latest as of July 6th, 2015, but may be different in the future.
After much trial and error, those are the simple settings that helped our deploys succeed on Heroku, while not keeping bower_components in our Git repository. If you have any questions on the process, feel free to reach out on Twitter: @heyellieday.
