Load environment file via dotenv if .env file is present

Author: ayrton

packages/react-scripts/package.json

@@ -34,6 +34,7 @@
     "cross-spawn": "4.0.0",
     "css-loader": "0.24.0",
     "detect-port": "1.0.0",
+    "dotenv": "2.0.0",
     "eslint": "3.5.0",
     "eslint-config-react-app": "0.2.0",
     "eslint-loader": "1.5.0",

packages/react-scripts/scripts/build.js

@@ -12,6 +12,12 @@
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.NODE_ENV = 'production';
 
+// Load environment variables from .env file. Surpress 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});
+
 var chalk = require('chalk');
 var fs = require('fs-extra');
 var path = require('path');

packages/react-scripts/scripts/start.js

@@ -11,6 +11,12 @@
 
 process.env.NODE_ENV = 'development';
 
+// Load environment variables from .env file. Surpress 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});
+
 var path = require('path');
 var chalk = require('chalk');
 var webpack = require('webpack');

packages/react-scripts/scripts/test.js

@@ -10,6 +10,12 @@
 process.env.NODE_ENV = 'test';
 process.env.PUBLIC_URL = '';
 
+// Load environment variables from .env file. Surpress 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});
+
 const createJestConfig = require('./utils/createJestConfig');
 const jest = require('jest');
 const path = require('path');

packages/react-scripts/template/README.md

@@ -434,7 +434,8 @@ REACT_APP_SECRET_CODE=abcdef npm start
 ```
 
 > Note: Defining environment variables in this manner is temporary for the life of the shell session. Setting
-permanent environment variables is outside the scope of these docs.
+permanent environment variables in development can be done in a `.env` file in the root of your project.
+[dotenv](https://github.com/motdotla/dotenv) takes care of loading these for you.
 
 With our environment variable defined, we start the app and consume the values. Remember that the `NODE_ENV`
 variable will be set for you automatically. When you load the app in the browser and inspect the `<input>`, you will see

packages/react-scripts/template/gitignore

@@ -11,4 +11,5 @@ build
 
 # misc
 .DS_Store
+.env
 npm-debug.log