Create-react-app: Define custom .env files for custom development stages.

[Baldeep]

I think it would be useful to be able to define a custom .env file.

I have three different environments my app will run on: dev, staging, and production. dev and production are covered, but right now it doesn't seem like there's any easy way to have separate environment variables for other stages.

It would be handy if an additional environment variable could be specified to select the custom .env file, and use the default .env files if the additional variable is undefined.

e.g. (in Windows)

start: react-scripts start - uses .env.development
start: "set REACT_APP_ENV=devstaging & react-scripts start" - uses .env.devstaging
build_staging: "set REACT_APP_ENV=staging & react-scripts build" - uses .env.staging
build: "react-scripts build" - uses .env.production

The custom .env file would be overriden by the .local version, just how it works currently with development, production, and test.

I'm not confident enough to make the change myself, but it seems like adding this would require a change in the react-scripts -> config -> jest -> env.js file, where the dotenvFiles variable is set (react-scripts v1.0.11).

Creating this from my comment on Issue 102 A way to define custom environment variables.

[iansu]

This seems like a reasonable proposal to me. I'd be happy to implement this if it's something we want to go ahead with.

[andriijas]

I agree.

I have solved it in my appveyor.yml with some dirty tricks

  branches:
    only:
      - /^(?!^master$).*$/ # all branches except master
  before_build:
    # Some magic to be able to run app in a dir with branch name
    - ps: $env:PUBLIC_URL="/$($env:APPVEYOR_REPO_BRANCH)"
    - ps: Copy-Item "./.env.development" "./.env.production.local"
    - ps: (Get-Content package.json).replace("https://myapp.com", "https://myapp-develop.azurewebsites.net/$($env:APPVEYOR_REPO_BRANCH)") | Set-Content package.json

[mandajoan]

I believe there is an existing merge request for this issue.. #3178
Regardless, I would love a staging/production-staging build in addition to a production build.

[iansu]

There's also this PR: https://github.com/facebook/create-react-app/pull/3875

They both solve the problem in the same way, just with slightly different naming. I like the name suggested in this issue: REACT_APP_ENV.

[iansu]

I reached out to both of the authors of the existing PRs but neither of them have responded. Is someone else interested in taking this on?

[iansu]

It looks like there's an existing package called env-cmd that solves this issue: https://github.com/toddbluhm/env-cmd

Using this package you could create an env file for your environment (like .env.staging) and then run env-cmd .env.staging react-scripts start.

The settings in .env.staging will override the settings in .env.development.

[ekryski]

@iansu I don't think this works if you are trying to deploy a static build to a staging environment that is similar to production but has different ENV vars.

Unless I'm mistaken it just overrides .env.development and not .env.production when running react-scripts build.

[mauroporras]

@ekryski It goes like this env-cmd .env.stage react-scripts build

It does override .env.production

[iansu]

@ekryski Internally we use dotenv and it will never overwrite an environment variable that's already been set. So if you do something like MY_ENV=123 yarn start then MY_ENV will always be 123 regardless of what's in any of the CRA env files.

env-cmd works the same way, it just allows you to put the environment variables in a file instead of listing them all on the command line. So anything you specify in that file via env-cmd will take precedence over any of the env files that CRA uses.

[erisanolasheni]

With custom-env, this is possible. Just install with npm i custom-env. Docs: https://www.npmjs.com/package/custom-env