Consistent environment variables for the front end build

[jonkafton]

Description/Context

We're currently using both the Webpack DefinePlugin and the Webpack EvironmentPlugin to supply variables to the front end build.

The DefinePlugin is being used to set values on an APP_SETTINGS object, which appears in the code as a global (requiring a TypeScript declaration). The environment variables are stringified and mapped onto the object properties in the Webpack config, e.g.

APP_SETTINGS: {
    axios_base_path: JSON.stringify(process.env.MITOPEN_AXIOS_BASE_PATH),
    ...
}

The EnvironmentPlugin does a similar job and is a shorthand for the Define plugin (if used to create explicit process.env globals), though will force us to always use process.env instead of arbitrary globals. This is a more common approach and the default approach used (minimal config) in both the Jest test and Storybook config and would avoid the need for us to set globals in the config.

The EnvironmentPlugin is configured in the following form, with a string providing the default value where not set on the environment, null where there is no default and undefined where there is no default and the build should fail if not supplied, e.g.:

{
    ENVIRONMENT: "production",
    MITOPEN_AXIOS_BASE_PATH: undefined,
}

The environment values from the host or configured on CI are made available with the usual mechanisms to export to the process or with .env files.

Let's also straighten out the API urls. We have API_BASE_URL in the code and MITOPEN_AXIOS_BASE_PATH. These can be better named to distinguish the URL to the API for the front end build and the dev server URL for proxying requests dependent on environment and where we're running the dev server (on host or in Docker).

Plan/Design

• Replace the DefinePlugin with the EnvironmentPlugin.
• Distinguish the API_BASE_URL from when is it intended to provide a different API URL from the origin and when it is intended for the dev server to reach the backend. Perhaps API_BASE_URL and API_PROXY_URL.