Deploying React on Rails on Heroku

EDIT: TL;DR I fixed this, silly error on my part…if you run into the same error, it’s because the buildpacks aren’t set correctly. In my case, I had set the buildpack on the wrong Heroku app. More at https://github.com/shakacode/react_on_rails/blob/master/docs/tutorial.md#deploying-to-heroku


Hats off to everyone that’s involved in React on Rails - I’m setting it up for a project and digging it big time! So far I have Hello World working locally but the old push to Heroku fails with the following error:

remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        /tmp/build_8ea5df0fb3e8548cbb57c315cd6668c0/vendor/bundle/ruby/2.2.0/gems/fog-1.23.0/lib/fog/rackspace/mock_data.rb:42: warning: duplicated key at line 80 ignored: "name"
remote:        cd client && npm run build:client
remote:        sh: 1: npm: not found
remote:        rake aborted!
remote:        Command failed with status (127): [cd client && npm run build:client...]
remote:        /tmp/build_8ea5df0fb3e8548cbb57c315cd6668c0/lib/tasks/assets.rake:17:in 'block (2 levels) in <top (required)>'
remote:        Tasks: TOP => assets:precompile => assets:compile_environment => assets:webpack
remote:        (See full trace by running task with --trace)
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote: 
remote:  !     Push rejected, failed to compile Ruby app

Seems error code 127 relates to NPM not being installed - but I haven’t touched package.json so I’m not sure why Heroku might have missed installing it.

Has anyone run into this or have any suggestions on what’s being done wrong?

1 Like

See the heroku.md readme file in React on Rails.

It explains how you need to set the buildpacks.

Thanks for the kind words on the project!

Hmm, I have buildpacks configured correctly I think, and deploy to heroku “succeeds” but resulted in “application-e469c16….js:42 Uncaught Error: Cannot find module “./app/bundles/reports/startup/registration”” in the console when hitting a react page… I have //= require webpack-bundle at the top of application.js and it works fine locally using foreman start -f Procfile.dev -p 3000, any thoughts on what might be wrong on Heroku? not totally sure how to debug that’s not wild guessing with 5+ minutes builds to test each guess :slight_smile: A non-webpack version using react-rails works just fine on heroku FWIW. My postinstall npm config in package.json is "cd ./vendor/assets && ../../node_modules/bower/bin/bower install && cd ../../client && npm install" which looks funny but I think is right because of needing both bower and npm, and needing to undo the first cd, and again, works locally… welcome any thoughts or questions!

@Brian_Glusman This definitely works for us, but we’re not using bower.

Don’t think bower has anything to do with it, as it uses that and works fine locally… I suppose I could test that theory by removing the bower stuff and pushing to heroku to try again, but I’ve mainly been trying to reproduce the problem locally so far (only spent an hour or so trying yet) by precompiling assets and making rails dev look more like rails production (our staging runs as production), but didn’t get very far yet. Probably some piece of wiring is missing or wrong, will try and update here if/when I figure out, but any suggestions or ideas to double check are welcome.