Skip to main content

Environments

Three environments are supported by FrontHub: production, staging, and development. It is possible to define distinct variables for each stage in these contexts.

warning

IN THE FINAL BUILD, THESE VARIABLES WILL BE EXPOSED. Don't include values that can’t be shown there. For example, PRIVATE KEYS.

Config​

The files supported are .env.development, .env.staging, .env.production. Additionally, each one of them must be located in the micro frontend's root in a folder called env. Every micro frontend must own a distinct env folder containing unique .env files.

Inside each own MFE folder
├── my-monorepo/
│   ├── packages/
│     └── my-microfrontend/
│       └── env/
│         └── .env.development
│         └── .env.staging
│         └── .env.production
│       └── src/

They will be automatically deployed in each environment. Simply ensure that the build command is used as specified by the monorepo standard: the micro frontend must have a command in the script section of the package.json called build, not build:prod.

React custom environments variables​

We recommend the following Create React App docs on how to declare a custom environment. That is, create all custom environments with the name REACT_APP_.

warning

As previously stated, FrontHub uses the NODE_ENV and .env files in their own priority and sequence.

./env/.env.development
REACT_APP_NOT_SECRET_VALUE=qwer
./env/.env.staging
REACT_APP_NOT_SECRET_VALUE=asdf
./env/.env.production
REACT_APP_NOT_SECRET_VALUE=zxcv
<form>
  <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_VALUE} />
</form>

Development​

When the app is started locally (yarn start), the one file to be used locally is .env.development. If you don't have the .env.development, FrontHub won't utilize any other .env file.