Can I use Bower and Rails on Heroku and still keep the bower_components directory out of GIT?

Question

I've just started working with bower for managing client-side dependencies. I've set Bower up to install all files into /vendor/assets/components.

I then run bower install to evaluate the bower.json file and install all dependencies

#/bower.json

{
  "name": "My-App",
  "dependencies": {
    "angular": "1.0.8",
    "bootstrap": "3.0.0"
  }
}

Finally, as instructed by the tutorials I've read, I've removed the components directory from GIT.

#.gitignore

#...
# Ignore all stuff manged by bower
/vendor/assets/components

The project does not therefore include any of these assets in the slug and requires bower install to be run in order to install them.

This seems sensible to me in the same way that decoupling actual gems from a project is sensible. It also abides by the principles of the 12-factor app and explicitly declares and isolate dependencies.

However, excluding dependencies causes asset compilation to choke...

However when I push to Heroku, asset precompilation fails because the asssets haven't been added yet and so when sprockets tries to evaluate:

#application.css.scss
/* ...
*= require bootstrap/dist/css/bootstrap
*= require_self
*= require_tree .
*/

it finds that there's nothing to be found in bootstrap/dist/css/bootstrap because bower hasn't installed anything yet.

A possible solution - use package.json to run a post-install script

I've followed this tutorial which suggests adding a package.json file with the following contents:

"dependencies": {
    "bower": "0.6.x"
},
"scripts": {
    "postinstall": "./node_modules/bower/bin/bower install"
}

However bower install needs to be run not as a post-install script but a post-push, pre-asset-compilation script. It's also not clear to me whether Heroku will run an npm pre-processor for a Rails app

Is it better to figure out how to run bower install or just include files in GIT?

There are two solutions to this. The first and simplest is to simply run bower install locally and include the files in GIT. This is no biggie but I'd like to stick to the principles of the 12 Factor App.

The second solution is to figure out how to fire up npm and run bower install on Heroku before asset precompilation occurs.

Is this viable in any simple way or is it better to simply compile bower assets locally?

Postscript

My conclusion in the end was simply to run bower install locally and to include the files in GIT. Although the 12-factor principles suggest that this may not be the correct route, I haven't found it to have any cost to it in practice and preferred that rather than getting into the compounding complexities of a custom buildpack.

Answer 1

You should try using ddollar's multi-buildpack. When installing two buildpacks you get the added benefit of being able to run a postinstall script after nodejs is installed but before the ruby buildpack is installed. This will allow you to pull down your assets with a bower install before they are precompiled.

I've put together a protip that goes over how to handle a Heroku + Rails + Bower scenario.

https://coderwall.com/p/6bmygq