Create-React-App + Heroku: Development, Staging and Production environments

4
votes

I'm developing an app (front-end app that consumes an API) based on the create-react-app package. I'm using Heroku to deploy and currently have two deployments based on the same codebase, staging and production. These deployments should use different development/staging/production APIs that have different databases.

Is it possible to tell create-react-app to use different env variables based on how I run react-scripts start?

  • env.development
    • REACT_API: https://localhost/react_api
  • env.staging
    • REACT_API: https://myappstagingapi.heroku.com
  • env.production
    • REACT_API: https://myappproductionapi.heroku.com

How would I do this? And is this a good workflow?

Thank you very much!

1
reactjscreate-react-app

1 Answers

3
votes

I had the similar situation having more environments than production and development while deployment was done automatically from Github.

First of all, make sure you are using the deployment buildpack i.e. https://github.com/mars/create-react-app-buildpack.git

You can add this URL in Settings in your project on Heroku, replacing NodeJS default buildpack for instance.

Full documentation is here: https://elements.heroku.com/buildpacks/nhutphuongit/create-react-app-buildpack

If you follow the link above, you can see the chapter Environment variables. So, in order that your React App can process custom variables:

  1. Add a one that suits you with REACT_APP_ prefix to your Heroku project environment variables (through Settings in Heroku Dashboard) Note that only the envs with this prefix will be visible in your process.env later so you should amend your code accordingly
  2. Redeploy the application.

This should make the things work. I am sure it is also possible to keep .env file but I prefer to have more control via Heroku Dashboard.