From 6705e4c3f8be46e0eb197bc3c2fcc2ed8dfe5305 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Fri, 24 Aug 2018 17:41:23 -0400
Subject: [PATCH] load client-side environment variables at runtime

---
 client/modules/App/App.jsx                    |  4 +-
 client/modules/IDE/actions/assets.js          |  3 +-
 client/modules/IDE/actions/files.js           |  3 +-
 client/modules/IDE/actions/preferences.js     |  3 +-
 client/modules/IDE/actions/project.js         |  3 +-
 client/modules/IDE/actions/projects.js        |  3 +-
 client/modules/IDE/actions/uploader.js        |  7 ++--
 .../modules/IDE/components/FileUploader.jsx   |  5 ++-
 client/modules/User/actions.js                |  4 +-
 client/routes.jsx                             |  4 +-
 client/store.js                               |  4 +-
 docker-compose.yml                            |  7 ----
 kubernetes/app.yml                            |  2 +-
 server/server.js                              |  2 +-
 server/views/index.js                         | 37 +++++++++++++------
 webpack.config.dev.js                         | 10 +----
 webpack.config.prod.js                        |  9 +----
 17 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 6b11c262..e47e6454 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -4,6 +4,8 @@ import { connect } from 'react-redux';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 
+const __process = (typeof global !== 'undefined' ? global : window).process;
+
 class App extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -23,7 +25,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
+        {this.state.isMounted && !window.devToolsExtension && __process.env.NODE_ENV === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/client/modules/IDE/actions/assets.js b/client/modules/IDE/actions/assets.js
index 04de03bb..5b72791e 100644
--- a/client/modules/IDE/actions/assets.js
+++ b/client/modules/IDE/actions/assets.js
@@ -2,7 +2,8 @@ import axios from 'axios';
 
 import * as ActionTypes from '../../../constants';
 
-const ROOT_URL = process.env.API_URL;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
 function setAssets(assets) {
   return {
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index 2667c718..18762dd1 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -5,7 +5,8 @@ import { reset } from 'redux-form';
 import * as ActionTypes from '../../../constants';
 import { setUnsavedChanges } from './ide';
 
-const ROOT_URL = process.env.API_URL;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
 function appendToFilename(filename, string) {
   const dotIndex = filename.lastIndexOf('.');
diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js
index 46182fa5..3e26e45a 100644
--- a/client/modules/IDE/actions/preferences.js
+++ b/client/modules/IDE/actions/preferences.js
@@ -1,7 +1,8 @@
 import axios from 'axios';
 import * as ActionTypes from '../../../constants';
 
-const ROOT_URL = process.env.API_URL;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
 function updatePreferences(formParams, dispatch) {
   axios.put(`${ROOT_URL}/preferences`, formParams, { withCredentials: true })
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index eeb146dc..d2ff94b1 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -12,7 +12,8 @@ import { setUnsavedChanges,
 import { clearState, saveState } from '../../../persistState';
 import { redirectToProtocol, protocols } from '../../../components/forceProtocol';
 
-const ROOT_URL = process.env.API_URL;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
 export function setProject(project) {
   const targetProtocol = project.serveSecure === true ?
diff --git a/client/modules/IDE/actions/projects.js b/client/modules/IDE/actions/projects.js
index ee00e40b..5419f0fb 100644
--- a/client/modules/IDE/actions/projects.js
+++ b/client/modules/IDE/actions/projects.js
@@ -3,7 +3,8 @@ import * as ActionTypes from '../../../constants';
 import { showErrorModal, setPreviousPath } from './ide';
 import { resetProject } from './project';
 
-const ROOT_URL = process.env.API_URL;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
 export function getProjects(username) {
   return (dispatch) => {
diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js
index 8a5a3c23..913f3aa9 100644
--- a/client/modules/IDE/actions/uploader.js
+++ b/client/modules/IDE/actions/uploader.js
@@ -2,9 +2,10 @@ import axios from 'axios';
 import { createFile } from './files';
 import { TEXT_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
-const s3BucketHttps = process.env.S3_BUCKET_URL_BASE ||
-                      `https://s3-${process.env.AWS_REGION}.amazonaws.com/${process.env.S3_BUCKET}/`;
-const ROOT_URL = process.env.API_URL;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const s3BucketHttps = __process.env.S3_BUCKET_URL_BASE ||
+                      `https://s3-${__process.env.AWS_REGION}.amazonaws.com/${__process.env.S3_BUCKET}/`;
+const ROOT_URL = __process.env.API_URL;
 const MAX_LOCAL_FILE_SIZE = 80000; // bytes, aka 80 KB
 
 function localIntercept(file, options = {}) {
diff --git a/client/modules/IDE/components/FileUploader.jsx b/client/modules/IDE/components/FileUploader.jsx
index e229d191..50fe6062 100644
--- a/client/modules/IDE/components/FileUploader.jsx
+++ b/client/modules/IDE/components/FileUploader.jsx
@@ -6,8 +6,9 @@ import { connect } from 'react-redux';
 import * as UploaderActions from '../actions/uploader';
 import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
 
-const s3Bucket = process.env.S3_BUCKET_URL_BASE ||
-                 `https://s3-${process.env.AWS_REGION}.amazonaws.com/${process.env.S3_BUCKET}/`;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const s3Bucket = __process.env.S3_BUCKET_URL_BASE ||
+                 `https://s3-${__process.env.AWS_REGION}.amazonaws.com/${__process.env.S3_BUCKET}/`;
 
 class FileUploader extends React.Component {
   componentDidMount() {
diff --git a/client/modules/User/actions.js b/client/modules/User/actions.js
index 68602968..ec825cd2 100644
--- a/client/modules/User/actions.js
+++ b/client/modules/User/actions.js
@@ -3,8 +3,8 @@ import axios from 'axios';
 import * as ActionTypes from '../../constants';
 import { showErrorModal, justOpenedProject } from '../IDE/actions/ide';
 
-
-const ROOT_URL = process.env.API_URL;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const ROOT_URL = __process.env.API_URL;
 
 export function authError(error) {
   return {
diff --git a/client/routes.jsx b/client/routes.jsx
index f7d379a6..b255be3f 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -14,6 +14,8 @@ import AccountView from './modules/User/pages/AccountView';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 
+const __process = (typeof global !== 'undefined' ? global : window).process;
+
 const checkAuth = (store) => {
   store.dispatch(getUser());
 };
@@ -30,7 +32,7 @@ const routes = (store) => {
     targetProtocol: protocols.https,
     sourceProtocol,
     // prints debugging but does not reload page
-    disable: process.env.FORCE_TO_HTTPS === false,
+    disable: __process.env.FORCE_TO_HTTPS === false,
   });
 
   return (
diff --git a/client/store.js b/client/store.js
index 1fe11cc3..dbb3685e 100644
--- a/client/store.js
+++ b/client/store.js
@@ -4,12 +4,14 @@ import DevTools from './modules/App/components/DevTools';
 import rootReducer from './reducers';
 import { clearState, loadState } from './persistState';
 
+const __process = (typeof global !== 'undefined' ? global : window).process;
+
 export default function configureStore(initialState) {
   const enhancers = [
     applyMiddleware(thunk),
   ];
 
-  if (process.env.CLIENT && process.env.NODE_ENV === 'development') {
+  if (__process.env.CLIENT && __process.env.NODE_ENV === 'development') {
     // Enable DevTools only when rendering on client and during development.
     enhancers.push(window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument());
   }
diff --git a/docker-compose.yml b/docker-compose.yml
index fcbfb7e2..e9e50f5a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -33,13 +33,6 @@ services:
       context: .
       dockerfile: Dockerfile
       target: production
-      args:
-        - API_URL
-        - NODE_ENV
-        - S3_BUCKET
-        - AWS_REGION
-        - S3_BUCKET_URL_BASE
-        - FORCE_TO_HTTPS
     # image: index.docker.io/catarak/p5.js-web-editor:latest
     # env_file:
     #   - "$PWD/.env"
diff --git a/kubernetes/app.yml b/kubernetes/app.yml
index 9962a52d..3444e2fc 100644
--- a/kubernetes/app.yml
+++ b/kubernetes/app.yml
@@ -3,7 +3,7 @@ kind: Ingress
 metadata:
   name: editor-ingress
   annotations:
-    kubernetes.io/ingress.global-static-ip-name: "test-web-editor"
+    kubernetes.io/ingress.global-static-ip-name: "web-editor-ip"
 spec:
   backend:
     serviceName: web-editor-node
diff --git a/server/server.js b/server/server.js
index fb811b71..3462353e 100644
--- a/server/server.js
+++ b/server/server.js
@@ -59,7 +59,7 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 let mongoConnectionString;
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === 'production' && process.env.MONGO_RW_USERNAME && process.env.MONGO_RW_PASSWORD) {
   const {
     MONGO_RW_USERNAME,
     MONGO_RW_PASSWORD,
diff --git a/server/views/index.js b/server/views/index.js
index ace1df5a..213778f5 100644
--- a/server/views/index.js
+++ b/server/views/index.js
@@ -15,6 +15,21 @@ export function renderIndex() {
       <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
       <link rel='shortcut icon' href='https://raw.githubusercontent.com/processing/p5.js-website-OLD/master/favicon.ico' type='image/x-icon'/ >
+      <script>
+        if (!window.process) {
+          window.process = {};
+        }
+        if (!window.process.env) {
+          window.process.env = {};
+        }
+        window.process.env.API_URL = '${process.env.API_URL}';
+        window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
+        window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
+        window.process.env.S3_BUCKET_URL_BASE = '${process.env.S3_BUCKET_URL_BASE}';
+        window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
+        window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
+        window.process.env.CLIENT = true;
+      </script>
     </head>
     <body>
       <div id="root" class="root-app">
@@ -24,19 +39,19 @@ export function renderIndex() {
           `//<![CDATA[
           window.webpackManifest = ${JSON.stringify(chunkManifest)};
           //]]>` : ''}
-        </script>
-        <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/vendor.js']}` : '/vendor.js'}'></script>
-        <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
-        <script>
-          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      </script>
+      <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/vendor.js']}` : '/vendor.js'}'></script>
+      <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
+      <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-          ga('create', 'UA-53383000-1', 'auto');
-          ga('send', 'pageview');
+        ga('create', 'UA-53383000-1', 'auto');
+        ga('send', 'pageview');
 
-        </script>
+      </script>
     </body>
   </html>
   `;
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index a387523b..146d2823 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -39,15 +39,7 @@ module.exports = [{
     }),
     new webpack.DefinePlugin({
       'process.env': {
-        API_URL: process.env.API_URL ? `"${process.env.API_URL}"` : undefined,
-        CLIENT: JSON.stringify(true),
-        FORCE_TO_HTTPS: process.env.FORCE_TO_HTTPS === 'true' ?
-          JSON.stringify(true) :
-          JSON.stringify(false),
-        NODE_ENV: JSON.stringify('development'),
-        S3_BUCKET: process.env.S3_BUCKET ? `"${process.env.S3_BUCKET}"` : undefined,
-        S3_BUCKET_URL_BASE: process.env.S3_BUCKET_URL_BASE ? `"${process.env.S3_BUCKET_URL_BASE}"` : undefined,
-        AWS_REGION: process.env.AWS_REGION ? `"${process.env.AWS_REGION}"` : undefined
+        NODE_ENV: JSON.stringify('development')
       }
     })
   ],
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
index 2361769a..ff653b2a 100644
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -88,14 +88,7 @@ module.exports = [{
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
-        API_URL: process.env.API_URL ? `"${process.env.API_URL}"` : undefined,
-        NODE_ENV: JSON.stringify('production'),
-        S3_BUCKET: process.env.S3_BUCKET ? `"${process.env.S3_BUCKET}"` : undefined,
-        S3_BUCKET_URL_BASE: process.env.S3_BUCKET_URL_BASE ? `"${process.env.S3_BUCKET_URL_BASE}"` : undefined,
-        AWS_REGION: process.env.AWS_REGION ? `"${process.env.AWS_REGION}"` : undefined,
-        FORCE_TO_HTTPS: process.env.FORCE_TO_HTTPS === 'false' ?
-          JSON.stringify(false) :
-          undefined
+        NODE_ENV: JSON.stringify('production')
       }
     }),
     new webpack.optimize.CommonsChunkPlugin({