fix #2223 - [feature] Implement dotenv-expand to accept variable expa… (#3387)

* fix #2223 - [feature] Implement dotenv-expand to accept variable expansion in dot env files

* add to README TOC

* fix readme

* Update README.md

packages/react-scripts/config/env.js

@@ -35,13 +35,16 @@ var dotenvFiles = [
 
 // Load environment variables from .env* files. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables
-// that have already been set.
+// that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach(dotenvFile => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv').config({
-      path: dotenvFile,
-    });
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
   }
 });
 

packages/react-scripts/fixtures/kitchensink/.env

 REACT_APP_X = x-from-original-env
 REACT_APP_ORIGINAL_1 = from-original-env-1
 REACT_APP_ORIGINAL_2 = from-original-env-2
+REACT_APP_BASIC = basic
+REACT_APP_BASIC_EXPAND = ${REACT_APP_BASIC}
+REACT_APP_BASIC_EXPAND_SIMPLE = $REACT_APP_BASIC
+REACT_APP_EXPAND_EXISTING = $REACT_APP_SHELL_ENV_MESSAGE

packages/react-scripts/fixtures/kitchensink/integration/env.test.js

@@ -67,5 +67,22 @@ describe('Integration', () => {
         doc.getElementById('feature-shell-env-variables').textContent
       ).to.equal('fromtheshell.');
     });
+
+    it('expand .env variables', async () => {
+      const doc = await initDOM('expand-env-variables');
+
+      expect(doc.getElementById('feature-expand-env-1').textContent).to.equal(
+        'basic'
+      );
+      expect(doc.getElementById('feature-expand-env-2').textContent).to.equal(
+        'basic'
+      );
+      expect(doc.getElementById('feature-expand-env-3').textContent).to.equal(
+        'basic'
+      );
+      expect(
+        doc.getElementById('feature-expand-env-existing').textContent
+      ).to.equal('fromtheshell');
+    });
   });
 });

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -179,6 +179,11 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
+      case 'expand-env-variables':
+        import('./features/env/ExpandEnvVariables').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
       default:
         throw new Error(`Missing feature "${feature}"`);
     }

packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.js

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export default () => (
+  <span>
+    <span id="feature-expand-env-1">{process.env.REACT_APP_BASIC}</span>
+    <span id="feature-expand-env-2">{process.env.REACT_APP_BASIC_EXPAND}</span>
+    <span id="feature-expand-env-3">
+      {process.env.REACT_APP_BASIC_EXPAND_SIMPLE}
+    </span>
+    <span id="feature-expand-env-existing">
+      {process.env.REACT_APP_EXPAND_EXISTING}
+    </span>
+  </span>
+);

packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.test.js

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ExpandEnvVariables from './ExpandEnvVariables';
+
+describe('expand .env variables', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ExpandEnvVariables />, div);
+  });
+});

packages/react-scripts/package.json

@@ -32,6 +32,7 @@
     "chalk": "1.1.3",
     "css-loader": "0.28.7",
     "dotenv": "4.0.0",
+    "dotenv-expand": "4.0.1",
     "eslint": "4.10.0",
     "eslint-config-react-app": "^2.0.1",
     "eslint-loader": "1.9.0",

packages/react-scripts/template/README.md

@@ -978,6 +978,25 @@ Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) f
 >Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
 these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
 
+#### Expanding Environment Variables In `.env`
+
+>Note: this feature is available with `react-scripts@1.0.18` and higher.
+
+Expand variables already on your machine for use in your .env file (using [dotenv-expand](https://github.com/motdotla/dotenv-expand)).  See [#2223](https://github.com/facebookincubator/create-react-app/issues/2223).
+
+For example, to get the environment variable `npm_package_version`:
+```
+REACT_APP_VERSION=$npm_package_version
+# also works:
+# REACT_APP_VERSION=${npm_package_version}
+```
+Or expand variables local to the current `.env` file:
+```
+DOMAIN=www.example.com
+REACT_APP_FOO=$DOMAIN/foo
+REACT_APP_BAR=$DOMAIN/bar
+```
+
 ## Can I Use Decorators?
 
 Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>