Create-react-app: [feature] Implement dotenv-expand to accept variable expansion in dot env files

[andrewmclagan]

Currently we use the dotenv library to parse a .env file in the project root and populate process.env. Great!

Although there exists scenarios in large scale deployments where the same environment variables are used accross many "app" or "services" or "containers"... For example

We have websites, API services and databases consuming a base set of environment variables such as:

bash CDN STRIPE_KEY API_HOST VERSION_TAG

We don't want to have to add another set to this simply with the leading key REACT_APP_XXX. Dotenv has a has a sister project / plugin called dotenv-expand that allows, wait for it.... variable expansion in the file! e.g.

bash REACT_APP_CDN=${CDN} REACT_APP_STRIPE_KEY=${STRIPE_KEY} REACT_APP_API_HOST=${API_HOST} REACT_APP_VERSION_TAG=${VERSION_TAG}

[FDiskas]

:no_pedestrians: Keep in mind
.env

DB_PASSWORD=test1234

```js
console.log(process.env.NODE_ENV);

Result will be
```js
console.log({"DB_PASSWORD":"test1234", "NODE_ENV":"production"}.NODE_ENV)

[moos]

Also particularly useful for accessing properties in package.json, which are exposed as npm_package_* environment variables. For examples, npm_package_version or npm_package_name. For a more complete list, see this gist.

[FDiskas]

Json loader will do this

[moos]

Sure - they are many ways to load a json file, however, most will expose the entirety of the file to the build bundle (see #2466). Method requested here and fulfilled by linked PR will allow cherry picking which vars get exposed.

[gaearon]

This looks neat. I wouldn't mind taking a PR for this, but I'll close this issue since we likely won't add this ourselves.

[gaearon]

I merged https://github.com/facebookincubator/create-react-app/pull/3387.

[gaearon]

This is out in [email protected]! Please let us know if something doesn’t quite work.
https://github.com/facebookincubator/create-react-app/releases/tag/v1.1.0

[moos]

FYI, to include an underscore in your expression use the ${ } format in your .env:

// bad
FOO_BAR=$npm_package_dependencies_foo_$npm_package_dependencies_bar
// 2.0

// good
FOO_BAR=${npm_package_dependencies_foo}_${npm_package_dependencies_bar}
// 1.0_2.0

where

// package.json
  "dependencies" : {
    "foo": "1.0",
    "bar": "2.0"
   }