Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Rails+Bower on Heroku

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:

@railsnerd

This comment has been minimized.

Show comment
Hide comment
@railsnerd

railsnerd Jun 14, 2013

Thanks for this.

Do you know if anything has changed with rc2?

When I push to heroku, even with you gist, I see this:

Preparing app for Rails asset pipeline
Running: rake assets:precompile
I, [2013-06-14T13:56:51.511389 #1830]  INFO -- : Writing /tmp/build_1c1lussslsbet/public/assets/bower-a7406553fea1ea2173cc264291743e1c.json
rake aborted!
Is a directory - read

Thanks for this.

Do you know if anything has changed with rc2?

When I push to heroku, even with you gist, I see this:

Preparing app for Rails asset pipeline
Running: rake assets:precompile
I, [2013-06-14T13:56:51.511389 #1830]  INFO -- : Writing /tmp/build_1c1lussslsbet/public/assets/bower-a7406553fea1ea2173cc264291743e1c.json
rake aborted!
Is a directory - read
@oivoodoo

This comment has been minimized.

Show comment
Hide comment
@oivoodoo

oivoodoo Aug 20, 2013

@afeld Have you tried your solution with images in the components?

@afeld Have you tried your solution with images in the components?

@nathankot

This comment has been minimized.

Show comment
Hide comment
@nathankot

nathankot Sep 23, 2013

Thanks so much for this :)

Thanks so much for this :)

@afeld

This comment has been minimized.

Show comment
Hide comment
@afeld

afeld Oct 2, 2013

@oivoodoo I haven't, though I think it should work?

Owner

afeld commented Oct 2, 2013

@oivoodoo I haven't, though I think it should work?

@stiebitzhofer

This comment has been minimized.

Show comment
Hide comment
@stiebitzhofer

stiebitzhofer Oct 22, 2013

@afeld Hi, I built a sample application over the last days based on your gist and some other postings on the net. Let me ask a question:

Why to you specify "app/assets/components" in .bowerrc? I did so too and it added basically all packages to Git. So I could deploy it actually without the specific heroku build pack.

I later on changed the directory to "vendor/assets/components", removed everything from "app/assets/components" and the deployment on Heroku failed. After configuring the custom build pack installation went very smooth. That's how it should be, shouldn't it?

@afeld Hi, I built a sample application over the last days based on your gist and some other postings on the net. Let me ask a question:

Why to you specify "app/assets/components" in .bowerrc? I did so too and it added basically all packages to Git. So I could deploy it actually without the specific heroku build pack.

I later on changed the directory to "vendor/assets/components", removed everything from "app/assets/components" and the deployment on Heroku failed. After configuring the custom build pack installation went very smooth. That's how it should be, shouldn't it?

@aarkerio

This comment has been minimized.

Show comment
Hide comment
@aarkerio

aarkerio Oct 25, 2013

Where .bowerrc and bower.json should be saved?

Where .bowerrc and bower.json should be saved?

@afeld

This comment has been minimized.

Show comment
Hide comment
@afeld

afeld Oct 26, 2013

@stiebitzhofer The "directory" in the .bowerrc just specifies where the components should be installed - you can change this to wherever you like, if you update the other references to match. Modified the gist to use vendor/ instead.

@aarkerio All the file paths I listed should be relative to the Rails root, meaning the top level directory of your project.

Owner

afeld commented Oct 26, 2013

@stiebitzhofer The "directory" in the .bowerrc just specifies where the components should be installed - you can change this to wherever you like, if you update the other references to match. Modified the gist to use vendor/ instead.

@aarkerio All the file paths I listed should be relative to the Rails root, meaning the top level directory of your project.

@zquintana

This comment has been minimized.

Show comment
Hide comment
@zquintana

zquintana Oct 30, 2013

Someone have a gem for this yet?

Someone have a gem for this yet?

@anthonator

This comment has been minimized.

Show comment
Hide comment
@anthonator

anthonator Nov 11, 2013

Check out this protip that uses a slightly different approach that will allow you to use the official Heroku ruby and nodejs buildpacks. This way you're not beholden to a custom buildpack. This approach also adheres to 12 factor principles so you won't have to commit assets to source control. You also won't have to compile assets in production so you should gain a performance bump.

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

Check out this protip that uses a slightly different approach that will allow you to use the official Heroku ruby and nodejs buildpacks. This way you're not beholden to a custom buildpack. This approach also adheres to 12 factor principles so you won't have to commit assets to source control. You also won't have to compile assets in production so you should gain a performance bump.

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

@juniorjp

This comment has been minimized.

Show comment
Hide comment
@juniorjp

juniorjp Feb 9, 2014

I got a conflict: ECONFLICT Unable to find suitable version for jquery

Heroku does not display a screen to solve it. What whould I do ?

juniorjp commented Feb 9, 2014

I got a conflict: ECONFLICT Unable to find suitable version for jquery

Heroku does not display a screen to solve it. What whould I do ?

@afeld

This comment has been minimized.

Show comment
Hide comment
@afeld

afeld Apr 22, 2014

@anthonator Niiice, didn't know about multi-buildpack. Will give that a try when I get a chance.

@juniorjp1989 That sounds like a problem between your Bower dependencies, which is not specific to this solution. Basically it isn't able to find a version of jQuery that works for whatever other dependencies you have that use jQuery.

Owner

afeld commented Apr 22, 2014

@anthonator Niiice, didn't know about multi-buildpack. Will give that a try when I get a chance.

@juniorjp1989 That sounds like a problem between your Bower dependencies, which is not specific to this solution. Basically it isn't able to find a version of jQuery that works for whatever other dependencies you have that use jQuery.

@mrtriangle

This comment has been minimized.

Show comment
Hide comment
@mrtriangle

mrtriangle Jul 8, 2014

@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?

@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?

@gdiggs

This comment has been minimized.

Show comment
Hide comment
@gdiggs

gdiggs Aug 16, 2014

@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.

gdiggs commented Aug 16, 2014

@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.

@AugustoPedraza

This comment has been minimized.

Show comment
Hide comment
@AugustoPedraza

AugustoPedraza Sep 11, 2014

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)

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)

@ahnbizcad

This comment has been minimized.

Show comment
Hide comment
@ahnbizcad

ahnbizcad Sep 15, 2014

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

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

@philwilt

This comment has been minimized.

Show comment
Hide comment
@philwilt

philwilt Oct 29, 2014

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

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

@caedes

This comment has been minimized.

Show comment
Hide comment
@caedes

caedes Oct 30, 2014

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

caedes commented Oct 30, 2014

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
@zakelfassi

This comment has been minimized.

Show comment
Hide comment

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

@afeld

This comment has been minimized.

Show comment
Hide comment
@afeld

afeld Dec 27, 2014

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.

Owner

afeld commented Dec 27, 2014

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.

@paulomcnally

This comment has been minimized.

Show comment
Hide comment
@paulomcnally

paulomcnally Jan 5, 2015

I use Bowerfile not bower.json

ENOENT No bower.json present

I use Bowerfile not bower.json

ENOENT No bower.json present

@dovfrank

This comment has been minimized.

Show comment
Hide comment
@dovfrank

dovfrank Feb 25, 2015

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?

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?

@vinhnglx

This comment has been minimized.

Show comment
Hide comment
@vinhnglx

vinhnglx Mar 4, 2015

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

vinhnglx commented Mar 4, 2015

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

@vinhnglx

This comment has been minimized.

Show comment
Hide comment
@vinhnglx

vinhnglx Mar 4, 2015

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

{
   "directory": "bower_components"
}

vinhnglx commented Mar 4, 2015

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

{
   "directory": "bower_components"
}
@dukex

This comment has been minimized.

Show comment
Hide comment
@dukex

dukex Nov 8, 2015

To change the buildpack run:

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

dukex commented Nov 8, 2015

To change the buildpack run:

$ heroku buildpacks:set 'git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment