Using Rails+Bower on Heroku

gistfile1.md

Updated for Rails 4.0.0+

Bower

1. Set up the bower gem.

2. Follow the Bower instructions and list your dependencies in your bower.json, e.g.

   // bower.json
   {
     // ...
     "dependencies": {
       "d3": "~3.1.0",
       "underscore": "~1.4.4",
     }
   }

3. Include them in your JavaScript:

   // app/assets/javascripts/application.js
   //
   // Bower packages
   //= require d3/d3
   //= require underscore/underscore
   //
   //= require jquery
   //= require jquery_ujs
   // ...

4. Ignore the components in your repo. If you prefer to "vendor" your dependencies, skip this step.

   # .gitignore
   /bower_components/
   

5. Install the components.

   npm install -g bower
   bower install

At this point, make sure your app runs and the JS libs installed by Bower are loading on the page.

Heroku

To have Heroku deploys (Cedar stack only) install and compile Bower components on push:

1. Add the rails_12factor gem.

2. Use a custom Heroku buildpack that includes Node.js and Bower (see heroku/heroku-buildpack-ruby#67). If you vendored your components (skipping the .gitignore step above), you can skip this step and use the regular Ruby buildpack.

   heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'

Try a deploy: it should successfully compile assets.

---

Additional resources:

• http://dev.af83.com/2013/01/02/managing-rails-assets-with-bower.html
• http://kaeff.net/posts/sprockets-bower-better-component-packaging-for-rails-asset-pipeline.html
• rails/rails#7968

@afeld (I am new to bower) so I can point bower to my app/assets directory rather than vendor/assets/components? Is there an advantage to doing it that way?

@mrtriangle Putting external code in the vendor folder is a good convention because it separates your code from their code, making it really clear what you wrote/maintain and what you pulled in from an external source. It also makes it easier to find things in your app folder when you don't have to sort through all the vendor code.

I'm getting the following error when compile:

rake aborted!
ExecJS::ProgramError: Unexpected token: eof (undefined) (line: 46, col: 0, pos: 1406)

Error
at new JS_Parse_Error (/tmp/execjs20140911-16645-4awaq7js:2357:10623)
at js_error (/tmp/execjs20140911-16645-4awaq7js:2357:10842)
at croak (/tmp/execjs20140911-16645-4awaq7js:2357:19067)
at token_error (/tmp/execjs20140911-16645-4awaq7js:2357:19204)
at unexpected (/tmp/execjs20140911-16645-4awaq7js:2357:19292)
at block_ (/tmp/execjs20140911-16645-4awaq7js:2357:24537)
at ctor.body (/tmp/execjs20140911-16645-4awaq7js:2357:24191)
at function_ (/tmp/execjs20140911-16645-4awaq7js:2357:24256)
at expr_atom (/tmp/execjs20140911-16645-4awaq7js:2357:27308)
at maybe_unary (/tmp/execjs20140911-16645-4awaq7js:2357:29977)

@aarkerio I got mine automatically generated in the /vendor/assets/ folder when I ran rake bower:install So that's where it goes.

thanks for this!
I was able to leave config.assets.compile = false and still have this work.

Some improvements I made:

• From Rails 4, assets configuration go in config/initializers/assets.rb
• Use of rails_12factor gem to replace the production compilation configuration
• Add a package.json to install Bower as a Node.js dependency
• Use "postinstall": "bower install" in the scripts part of package.json
• Use of the heroku-buildpack-multi with Node.js and Ruby support

Why can't you just use https://rails-assets.org/ ?

Updated the gist – much simpler now.

Use of rails_12factor gem to replace the production compilation configuration

Good call – updated.

Use of the heroku-buildpack-multi with Node.js and Ruby support

@caedes Mind sharing instructions for this? Though multi-buildpacks are more flexible, it seems like a fair number of extra setup steps.

Why can't you just use https://rails-assets.org/ ?

I didn't know about that site, actually. You could, but I am hesitant to reluctant to add yet another deploy-time external dependency, especially since (from their site) "For new components you'll need bundle install two times because Rubygems index update is asynchronous." My approach here is trying to stay as close to the standard (not-Rails-specific) Bower workflow as possible.

I use Bowerfile not bower.json

ENOENT No bower.json present

On Heroku,
I did as described and skipped the .gitIgnore part (used rails_12factor gem).
Everything works fine other than the "fonts" folder that is added to the package and now is not recognized.
Any idea?

I have an error when run bower install: ENOENT No bower.json present.... How to fix it?

yah. I fixed it. We need to edit .bowerrc file.

{
   "directory": "bower_components"
}

To change the buildpack run:

$ heroku buildpacks:set 'git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'

Hi I have a problem when deploy to heroku,

remote: rake aborted! remote: Sprockets::FileNotFound: couldn't find file 'jquery' with type 'application/javascript

in the local environment all is done, can someone help me please?

Bower is now deprecated, and Rails 5.1+ introduced first-class support for Yarn, so I wouldn't use this anymore.