From 6e378d4813fd88ccafed2057e1327098f9c190d2 Mon Sep 17 00:00:00 2001
From: Archie Lee <archielee@appier.com>
Date: Tue, 24 Jan 2017 23:19:23 +0800
Subject: [PATCH 1/7] Make all vars accessiable in index.html

---
 packages/react-scripts/config/env.js           | 18 ++++++++++++------
 .../react-scripts/config/webpack.config.dev.js |  6 ++----
 .../config/webpack.config.prod.js              |  6 ++----
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 66ba341b358..3f417304833 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -19,21 +19,27 @@ function getClientEnvironment(publicUrl) {
     .keys(process.env)
     .filter(key => REACT_APP.test(key))
     .reduce((env, key) => {
-      env[key] = JSON.stringify(process.env[key]);
+      env[key] = process.env[key];
       return env;
     }, {
       // Useful for determining whether we’re running in production mode.
       // Most importantly, it switches React into the correct mode.
-      'NODE_ENV': JSON.stringify(
-        process.env.NODE_ENV || 'development'
-      ),
+      'NODE_ENV': process.env.NODE_ENV || 'development',
       // Useful for resolving the correct path to static assets in `public`.
       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
       // This should only be used as an escape hatch. Normally you would put
       // images into the `src` and `import` them in code to get their paths.
-      'PUBLIC_URL': JSON.stringify(publicUrl)
+      'PUBLIC_URL': publicUrl
     });
-  return {'process.env': processEnv};
+
+  processEnv['process.env'] = Object
+    .keys(processEnv)
+    .reduce((env, key) => {
+      env[key] = JSON.stringify(processEnv[key]);
+      return env;
+    }, {});
+
+  return processEnv;
 }
 
 module.exports = getClientEnvironment;
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 96fd632b795..b890677cdc7 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -205,9 +205,7 @@ module.exports = {
     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In development, this will be an empty string.
-    new InterpolateHtmlPlugin({
-      PUBLIC_URL: publicUrl
-    }),
+    new InterpolateHtmlPlugin(env),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
@@ -215,7 +213,7 @@ module.exports = {
     }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env),
+    new webpack.DefinePlugin(env['process.env']),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 058db0d7921..5271ab2c1ad 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -218,9 +218,7 @@ module.exports = {
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In production, it will be an empty string unless you specify "homepage"
     // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin({
-      PUBLIC_URL: publicUrl
-    }),
+    new InterpolateHtmlPlugin(env),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
@@ -242,7 +240,7 @@ module.exports = {
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.
     // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env),
+    new webpack.DefinePlugin(env['process.env']),
     // This helps ensure the builds are consistent if source hasn't changed:
     new webpack.optimize.OccurrenceOrderPlugin(),
     // Try to dedupe duplicated modules, if any:

From f87873ea71e3842c78dd82848d8c0e34e4c37a14 Mon Sep 17 00:00:00 2001
From: Archie Lee <archielee@appier.com>
Date: Wed, 25 Jan 2017 14:16:01 +0800
Subject: [PATCH 2/7] Fix wrong env provieded to DefinePlugin

---
 packages/react-scripts/config/webpack.config.dev.js  | 2 +-
 packages/react-scripts/config/webpack.config.prod.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index b890677cdc7..969cfb0eb61 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -213,7 +213,7 @@ module.exports = {
     }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env['process.env']),
+    new webpack.DefinePlugin(env),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 5271ab2c1ad..20d6d16b8c1 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -240,7 +240,7 @@ module.exports = {
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.
     // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env['process.env']),
+    new webpack.DefinePlugin(env),
     // This helps ensure the builds are consistent if source hasn't changed:
     new webpack.optimize.OccurrenceOrderPlugin(),
     // Try to dedupe duplicated modules, if any:

From 5763d44d9971ebbfc896052fbc7597c02e9feb34 Mon Sep 17 00:00:00 2001
From: Archie Lee <archielee@appier.com>
Date: Thu, 9 Feb 2017 13:45:32 +0800
Subject: [PATCH 3/7] Separate results from getClientEnvironment

---
 packages/react-scripts/config/env.js              | 15 +++++++++------
 .../react-scripts/config/webpack.config.dev.js    |  7 ++++---
 .../react-scripts/config/webpack.config.prod.js   |  7 ++++---
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 3f417304833..9fe2cf2d551 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -15,7 +15,7 @@
 var REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  var processEnv = Object
+  var vars = Object
     .keys(process.env)
     .filter(key => REACT_APP.test(key))
     .reduce((env, key) => {
@@ -31,15 +31,18 @@ function getClientEnvironment(publicUrl) {
       // images into the `src` and `import` them in code to get their paths.
       'PUBLIC_URL': publicUrl
     });
-
-  processEnv['process.env'] = Object
-    .keys(processEnv)
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  var string = Object
+    .keys(vars)
     .reduce((env, key) => {
-      env[key] = JSON.stringify(processEnv[key]);
+      env[key] = JSON.stringify(vars[key]);
       return env;
     }, {});
 
-  return processEnv;
+  return {
+    vars: vars,
+    string: string,
+  };
 }
 
 module.exports = getClientEnvironment;
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 969cfb0eb61..7f3b26202e8 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -202,10 +202,11 @@ module.exports = {
     ];
   },
   plugins: [
-    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(env),
+    new InterpolateHtmlPlugin(env.vars),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
@@ -213,7 +214,7 @@ module.exports = {
     }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env),
+    new webpack.DefinePlugin(env.string),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 20d6d16b8c1..6ab80798af8 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -214,11 +214,12 @@ module.exports = {
     ];
   },
   plugins: [
-    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In production, it will be an empty string unless you specify "homepage"
     // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin(env),
+    new InterpolateHtmlPlugin(env.vars),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
@@ -240,7 +241,7 @@ module.exports = {
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.
     // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env),
+    new webpack.DefinePlugin(env.string),
     // This helps ensure the builds are consistent if source hasn't changed:
     new webpack.optimize.OccurrenceOrderPlugin(),
     // Try to dedupe duplicated modules, if any:

From 7c948a3444bf480bff8b63326b09a2c20feff6cd Mon Sep 17 00:00:00 2001
From: Archie Lee <archielee@appier.com>
Date: Thu, 9 Feb 2017 13:56:44 +0800
Subject: [PATCH 4/7] The `string` should be object instead of string

---
 packages/react-scripts/config/env.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 9fe2cf2d551..b9dc2da7b5c 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -32,12 +32,14 @@ function getClientEnvironment(publicUrl) {
       'PUBLIC_URL': publicUrl
     });
   // Stringify all values so we can feed into Webpack DefinePlugin
-  var string = Object
-    .keys(vars)
-    .reduce((env, key) => {
-      env[key] = JSON.stringify(vars[key]);
-      return env;
-    }, {});
+  var string = {
+    'process.env': Object
+      .keys(vars)
+      .reduce((env, key) => {
+        env[key] = JSON.stringify(vars[key]);
+        return env;
+      }, {}),
+  };
 
   return {
     vars: vars,

From 0e5fcdca1d95a161d63f18395acbfbd6782f3e5f Mon Sep 17 00:00:00 2001
From: Archie Lee <archielee@appier.com>
Date: Thu, 9 Feb 2017 14:09:40 +0800
Subject: [PATCH 5/7] Fix accessing wrong field

---
 packages/react-scripts/config/webpack.config.prod.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 6ab80798af8..39246128cd2 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -54,7 +54,7 @@ var env = getClientEnvironment(publicUrl);
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
-if (env['process.env'].NODE_ENV !== '"production"') {
+if (env.string['process.env'].NODE_ENV !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 

From 096f3c671838057b8e6aa292d5a9e11b454987b9 Mon Sep 17 00:00:00 2001
From: Archie Lee <archielee@appier.com>
Date: Fri, 10 Feb 2017 10:26:41 +0800
Subject: [PATCH 6/7] Changed variables naming to `raw` and `stringified`

---
 packages/react-scripts/config/env.js                 | 12 ++++++------
 packages/react-scripts/config/webpack.config.dev.js  |  4 ++--
 packages/react-scripts/config/webpack.config.prod.js |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index b9dc2da7b5c..82400688c94 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -15,7 +15,7 @@
 var REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  var vars = Object
+  var raw = Object
     .keys(process.env)
     .filter(key => REACT_APP.test(key))
     .reduce((env, key) => {
@@ -32,18 +32,18 @@ function getClientEnvironment(publicUrl) {
       'PUBLIC_URL': publicUrl
     });
   // Stringify all values so we can feed into Webpack DefinePlugin
-  var string = {
+  var stringified = {
     'process.env': Object
-      .keys(vars)
+      .keys(raw)
       .reduce((env, key) => {
-        env[key] = JSON.stringify(vars[key]);
+        env[key] = JSON.stringify(raw[key]);
         return env;
       }, {}),
   };
 
   return {
-    vars: vars,
-    string: string,
+    raw: raw,
+    stringified: stringified,
   };
 }
 
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 7f3b26202e8..cbac62595b1 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -206,7 +206,7 @@ module.exports = {
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(env.vars),
+    new InterpolateHtmlPlugin(env.raw),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
@@ -214,7 +214,7 @@ module.exports = {
     }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env.string),
+    new webpack.DefinePlugin(env.stringified),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 39246128cd2..544231bac34 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -54,7 +54,7 @@ var env = getClientEnvironment(publicUrl);
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
-if (env.string['process.env'].NODE_ENV !== '"production"') {
+if (env.stringified['process.env'].NODE_ENV !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 
@@ -219,7 +219,7 @@ module.exports = {
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In production, it will be an empty string unless you specify "homepage"
     // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin(env.vars),
+    new InterpolateHtmlPlugin(env.raw),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
@@ -241,7 +241,7 @@ module.exports = {
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.
     // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env.string),
+    new webpack.DefinePlugin(env.stringified),
     // This helps ensure the builds are consistent if source hasn't changed:
     new webpack.optimize.OccurrenceOrderPlugin(),
     // Try to dedupe duplicated modules, if any:

From c41e81bcf15a489b485f702d02acb4ec2a0e4b30 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 9 Feb 2017 22:30:41 -0500
Subject: [PATCH 7/7] Remove trailing commas

---
 packages/react-scripts/config/env.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 82400688c94..168e1e644f1 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -38,13 +38,10 @@ function getClientEnvironment(publicUrl) {
       .reduce((env, key) => {
         env[key] = JSON.stringify(raw[key]);
         return env;
-      }, {}),
+      }, {})
   };
 
-  return {
-    raw: raw,
-    stringified: stringified,
-  };
+  return { raw, stringified };
 }
 
 module.exports = getClientEnvironment;