6bmygq
Last Updated: March 30, 2017
·
13.86K
· anthonator
576a2f51dff709f002e417b32c197edc

Heroku + Rails + Bower

1. Install nodejs and npm

I like to use nvm by creationix.

2. Install Bower

Make sure to install Bower into your projects local node_modules. This is a best practice encouraged by Heroku. You should add node_modules to source control.

npm install bower

3. Using .bowerrc tell Bower to install all assets into vendor/assets/components:

{
  "directory": "vendor/assets/components"
}

4. In application.rb tell Rails to add vendor/assets/components to the precompile load path:

config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

5. Added vendor/assets/components to .gitignore

6. Create a bower.json file and add your dependencies:

{
  "name": "my-project",
  "dependencies": {
    "bootstrap": "~> 3.0"
  }
}

7. Install dependencies using Bower:

bower install

8. Add your dependencies to your Rails asset manifest files:

// app/assets/javascripts/application.js
//
// ...
//= require bootstrap
// ...
/* app/assets/stylesheets/application.css
 *
 * ...
 *= require bootstrap
 * ...
*/

9. Register the extensions for the files that are meant to be precompiled in application.rb:

# via https://gist.github.com/afeld/5704079

# We don't want the default of everything that isn't js or css, because it pulls too many things in
config.assets.precompile.shift

# Explicitly register the extensions we are interested in compiling
config.assets.precompile.push(Proc.new do |path|
  File.extname(path).in? [
    '.html', '.erb', '.haml',                 # Templates
    '.png',  '.gif', '.jpg', '.jpeg', '.svg', # Images
    '.eot',  '.otf', '.svc', '.woff', '.ttf', # Fonts
  ]
end)

Note that I usually take out the template extensions. These generally compile things my app doesn't need from frontend dependencies. To each their own.

10. Make sure your assets precompile locally:

$ RAILS_ENV=production rake assets:precompile -v

11. Configure Heroku to use ddollar's multi-buildpack:

$ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

12. Add the heroku-nodejs buildpack and heroku-ruby buildpack to .buildpacks:

$ cat .buildpacks
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-ruby

Make sure that the ruby buildpack is the last one in the list. This will allow you to access the Rails console when running heroku run console.

13. Create package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "bower": "~1.2"
  },
  "engine": {
    "node": "0.10.x",
    "npm": "1.3.x"
  },
  "scripts": {
    "postinstall": "./node_modules/bower/bin/bower install"
  }
}

Note that the dependencies option is where you will add all your nodejs dependencies. Heroku will run npm install on deploy.

Also note the postinstall script. This will tell Bower to pull down your assets. This is important otherwise your rake assets:precompile won't have anything to compile.

14. Push to Heroku

git push heroku master

15. Sit back and marvel at how you will never have to manually manage your frontend dependencies again.

Say Thanks
Respond

13 Responses
Add your response

11894
Bf0c9c4aea3fd65f1b1d62c5699ebaf3

For the postinstall script, are you relying on the bower binary being present globally in the Heroku environment or should this be pointing to the binary in node_modules?

over 1 year ago ·
12537
200px ruby logo.svg

Agree with @hasghari - the postinstall component should be something like:

"postinstall": "./node_modules/bower/bin/bower install"

over 1 year ago ·
12538
576a2f51dff709f002e417b32c197edc

Thanks for the heads up. Fixed.

over 1 year ago ·
12863
0a8444d12bcfab2ea3491bd2019ef64a

Hi Anthony, thanks for sharing this useful tutorial.
I encountered a nasty error on Heroku (and according to Google I'm not the only one) : glyphicons not showing up (404s)

I had to update my application.css with this gist https://gist.github.com/EtienneDepaulis/9089678 (which is based on this solution http://rvg.me/2013/11/using-bootstrap-3-with-rails-4/)
How did you managed this on your side ?

I hope it can help others :)

over 1 year ago ·
12872
576a2f51dff709f002e417b32c197edc

@etiennedepaulis That's actually a really good question. The solutions you provided are similar to what I use.

@font-face {
  font-family: 'FontAwesome';
  src: font-url('components-font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: font-url('components-font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
  font-url('components-font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
  font-url('components-font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
  font-url('components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
over 1 year ago ·
14493
D9484079a853ae6091a7b3c8e1e92316

Thanks for this material!

over 1 year ago ·
14579
576a2f51dff709f002e417b32c197edc

@amedr Looks awesome! Does it work with Heroku?

over 1 year ago ·
15018
2e9d162353208c982aa5a650cd981245

I can confirm this works with Dokku 0.2.3, but there are two things that need to be changed before pushing to Dokku.

  1. Create a .npmrc file with unsafe-perm = true
  2. Change the package.json post-install script to run this command instead: ./node_modules/bower/bin/bower install --allow-root

This is due to Dokku using Docker containers with root users to run the apps.

over 1 year ago ·
15106
Da06eb3e2b022a45aeb0944a09a2134b

This can help, if you need to populate your dev environment with multiple ENV variables before doing a production rake

export $(cat .env | xargs) && RAILS_ENV=production && rake assets:precompile -v

the export $(cat .env | xargs) will do the populating

over 1 year ago ·
16756
Da79fa81e65a88ab3c89260b7a01d5e9

Locally precompiling doesn't work. It may be that file size is too large. No solutions on so or readme.

over 1 year ago ·
18802
None

Thanks for the article, it solved my Elixir with Brunch deployment problem (the multi-buildpack hint did it). I found a typo in your package.json, "engine" should read "engines"...

over 1 year ago ·
22136
D16c557ae30b90ed51ede778248020b0

Thank you!

over 1 year ago ·
28366

Give this man a beer. THANK YOU.

7 months ago ·