support different env configs.

packages/react-scripts/config/loadEnv.js

@@ -0,0 +1,53 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+// @remove-on-eject-end
+'use strict';
+
+// 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.
+// https://github.com/motdotla/dotenv
+// Used .env* files - https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var fs = require('fs');
+var paths = require('./paths');
+
+var sequence = {
+  'development': [
+    paths.dotenvDevelopmentLocal,
+    paths.dotenvDevelopment,
+    paths.dotenvLocal,
+    paths.dotenv
+  ],
+  'test': [
+    paths.dotenvTestLocal,
+    paths.dotenvTest,
+    paths.dotenvLocal,
+    paths.dotenv
+  ],
+  'production': [
+    paths.dotenvProductionLocal,
+    paths.dotenvProduction,
+    paths.dotenvLocal,
+    paths.dotenv
+  ]
+};
+
+var envConfigs = sequence[process.env.NODE_ENV];
+
+if (envConfigs) {
+  envConfigs.forEach(envConfig => {
+    if (fs.existsSync(envConfig)) {
+      require('dotenv').config({
+        silent: true,
+        path: envConfig
+      });
+    }
+  });
+}

packages/react-scripts/config/paths.js

@@ -74,6 +74,14 @@ function getServedPath(appPackageJson) {
 
 // config after eject: we're in ./config/
 module.exports = {
+  dotenv: resolveApp('.env'),
+  dotenvLocal: resolveApp('.env.local'),
+  dotenvDevelopment: resolveApp('.env.development'),
+  dotenvDevelopmentLocal: resolveApp('.env.development.local'),
+  dotenvTest: resolveApp('.env.test'),
+  dotenvTestLocal: resolveApp('.env.test.local'),
+  dotenvProduction: resolveApp('.env.production'),
+  dotenvProductionLocal: resolveApp('.env.production.local'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
@@ -96,6 +104,14 @@ function resolveOwn(relativePath) {
 // config before eject: we're in ./node_modules/react-scripts/config/
 module.exports = {
   appPath: resolveApp('.'),
+  dotenv: resolveApp('.env'),
+  dotenvLocal: resolveApp('.env.local'),
+  dotenvDevelopment: resolveApp('.env.development'),
+  dotenvDevelopmentLocal: resolveApp('.env.development.local'),
+  dotenvTest: resolveApp('.env.test'),
+  dotenvTestLocal: resolveApp('.env.test.local'),
+  dotenvProduction: resolveApp('.env.production'),
+  dotenvProductionLocal: resolveApp('.env.production.local'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
@@ -125,6 +141,14 @@ if (
 ) {
   module.exports = {
     appPath: resolveApp('.'),
+    dotenv: resolveOwn('template/.env'),
+    dotenvLocal: resolveOwn('template/.env.local'),
+    dotenvDevelopment: resolveOwn('template/.env.development'),
+    dotenvDevelopmentLocal: resolveOwn('template/.env.development.local'),
+    dotenvTest: resolveOwn('template/.env.test'),
+    dotenvTestLocal: resolveOwn('template/.env.test.local'),
+    dotenvProduction: resolveOwn('template/.env.production'),
+    dotenvProductionLocal: resolveOwn('template/.env.production.local'),
     appBuild: resolveOwn('../../build'),
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),

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

@@ -1 +1,3 @@
-REACT_APP_FILE_ENV_MESSAGE=fromtheenvfile
+REACT_APP_X = x-from-original-env
+REACT_APP_ORIGINAL_1 = from-original-env-1
+REACT_APP_ORIGINAL_2 = from-original-env-2

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

@@ -0,0 +1,2 @@
+REACT_APP_X = x-from-development-env
+REACT_APP_DEVELOPMENT = development

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

@@ -0,0 +1,2 @@
+REACT_APP_X = x-from-original-local-env
+REACT_APP_ORIGINAL_2 = override-from-original-local-env-2

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

@@ -0,0 +1,2 @@
+REACT_APP_X = x-from-production-env
+REACT_APP_PRODUCTION = production

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

@@ -15,9 +15,16 @@ describe('Integration', () => {
     it('file env variables', async () => {
       const doc = await initDOM('file-env-variables');
 
-      expect(
-        doc.getElementById('feature-file-env-variables').textContent
-      ).to.equal('fromtheenvfile.');
+      expect(doc.getElementById('feature-file-env-original-1').textContent).to.equal('from-original-env-1');
+      expect(doc.getElementById('feature-file-env-original-2').textContent).to.equal('override-from-original-local-env-2');
+
+      if (process.env.NODE_ENV === 'production') {
+        expect(doc.getElementById('feature-file-env').textContent).to.equal('production')
+        expect(doc.getElementById('feature-file-env-x').textContent).to.equal('x-from-production-env')
+      } else {
+        expect(doc.getElementById('feature-file-env').textContent).to.equal('development')
+        expect(doc.getElementById('feature-file-env-x').textContent).to.equal('x-from-development-env')
+      }
     });
 
     it('NODE_PATH', async () => {

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

@@ -10,7 +10,10 @@
 import React from 'react';
 
 export default () => (
-  <span id="feature-file-env-variables">
-    {process.env.REACT_APP_FILE_ENV_MESSAGE}.
+  <span>
+    <span id="feature-file-env-original-1">{process.env.REACT_APP_ORIGINAL_1}</span>
+    <span id="feature-file-env-original-2">{process.env.REACT_APP_ORIGINAL_2}</span>
+    <span id="feature-file-env">{process.env.REACT_APP_DEVELOPMENT}{process.env.REACT_APP_PRODUCTION}</span>
+    <span id="feature-file-env-x">{process.env.REACT_APP_X}</span>
   </span>
 );

packages/react-scripts/scripts/build.js

@@ -20,11 +20,7 @@ process.on('unhandledRejection', err => {
   throw err;
 });
 
-// Load environment variables from .env file. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.
-// https://github.com/motdotla/dotenv
-require('dotenv').config({ silent: true });
+require('../config/loadEnv');
 
 const chalk = require('chalk');
 const fs = require('fs-extra');

packages/react-scripts/scripts/start.js

@@ -19,11 +19,7 @@ process.on('unhandledRejection', err => {
 
 process.env.NODE_ENV = 'development';
 
-// Load environment variables from .env file. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.
-// https://github.com/motdotla/dotenv
-require('dotenv').config({ silent: true });
+require('../config/loadEnv');
 
 const fs = require('fs');
 const chalk = require('chalk');

packages/react-scripts/scripts/test.js

@@ -20,11 +20,7 @@ process.on('unhandledRejection', err => {
   throw err;
 });
 
-// Load environment variables from .env file. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.
-// https://github.com/motdotla/dotenv
-require('dotenv').config({ silent: true });
+require('../config/loadEnv');
 
 const jest = require('jest');
 const argv = process.argv.slice(2);

packages/react-scripts/template/.env

@@ -0,0 +1 @@
+REACT_APP_X = 1

packages/react-scripts/template/README.md

@@ -752,6 +752,21 @@ To define permanent environment variables, create a file called `.env` in the ro
 REACT_APP_SECRET_CODE=abcdef
 ```
 
+What .env* files are used?
+
+* `.env` - Default
+* `.env.development`, `.env.test`, `.env.production` - Environment-specific settings.
+* `.env.local` - Local overrides. This file is loaded for all environments except test.
+* `.env.development.local`, `.env.test.local`, `.env.production.local` - Local overrides of environment-specific settings.
+
+Files priority (file is skipped if does not exist):
+
+* npm test - `.env.test.local`, `env.test`, `.env.local`, `.env`
+* npm run build - `.env.production.local`, `env.production`, `.env.local`, `.env`
+* npm start - `.env.development.local`, `env.development`, `.env.local`, `.env`
+
+Priority from left to right.
+
 These variables will act as the defaults if the machine does not explicitly set them.<br>
 Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
 

packages/react-scripts/template/gitignore

@@ -11,8 +11,11 @@
 
 # misc
 .DS_Store
-.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-