Config in frontend - simon-norman/ui-forty-winks GitHub Wiki

How does config work in the UI app? IE, how does the app select the right url, for example, for the backend for different environments - dev, testing, production etc.

Basically, whenever the app is built, or the tests are run, the following happens:

1. The config file exports the correct config for the environment (you'll see in the config file that there are a few different configs, one for each of the environments) - it does this by getting the environment (development, test, or production) from the process.env.NODE_ENV variable. If it is the production build, React sets that NODE_ENV variable to production.

Important note - a production build is the one triggered by running the 'build' script in the package.json, which runs 'react-scripts build'. This build is run by all Heroku instances - both staging and production. This can be a little confusing, since it's called the production build, but it is used for both staging and production.

If it is the test build (which we are not using), the NODE_ENV will be set to test. If dev (which is when you run npm run start-dev in the package.json, which runs react-scripts start), it will be set to 'development'.

2. For some variables, the config file retrieves them from environment variables. For example, the fortywinksapi url is retrieved from the REACT_APP_FORTY_WINKS_API_URL. This environment variable can be set in Heroku in the config vars section within settings.

Any environment variables you use in a react app MUST be prefaced with REACT_APP - the react build pulls them out by default so you can use them in your app

The url in the heroku staging forty-winks-ui is set to the heroku staging forty-winks-api url. I'll set it up so that the production heroku instance of the ui points to the production forty-winks-api url.