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
.bowerrc tell Bower to install all assets into
application.rb tell Rails to add
vendor/assets/components to the precompile load path:
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
6. Create a
bower.json file and add your dependencies:
"bootstrap": "~> 3.0"
7. Install dependencies using Bower:
8. Add your dependencies to your Rails asset manifest files:
//= require bootstrap
*= require bootstrap
9. Register the extensions for the files that are meant to be precompiled in
# 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
# Explicitly register the extensions we are interested in compiling
config.assets.precompile.push(Proc.new do |path|
'.html', '.erb', '.haml', # Templates
'.png', '.gif', '.jpg', '.jpeg', '.svg', # Images
'.eot', '.otf', '.svc', '.woff', '.ttf', # Fonts
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
$ cat .buildpacks
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.
"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.