Software Engineering

Objective

Describe the use of react-with-zero-configuration to deploy to heroku

Target Audience

Developers new to react

Source Documents

react-with-zero-configuration
heroku react-with-zero-configuration
heroku react buildpack

Summary

Facebook release a build environment for react that abstracts away the lower level configuration and dependency management.

Result

This is a good thing until you run npm run eject

Discussion

I ran into this when attempting to deploy a react app to Heroku. I was able to get react to deploy and build on Heroku with the following

• Remove the dev dependencies section from package.json

• Use simple build and start scripts, combining like this below failed

  npm run build:client && npm run build:server

• Adding the build pack like

  `heroku create -a <appname> -b https://github.com/mars/create-react-app-buildpack.git`
  

To be clear this approach is not zero configuration, I am specifically declaring the dependencies in the package.json, however it did get the dependencies for heroku in production which previously I was unable to do.

From the repo w.r.t npm run eject
this is a one-way operation. Once you eject, you can’t go back!’

However it’s worth it to npm run eject and have a look at how they set up everything to realise just how far you can go with javascript tooling.

More Details

Demo app