load client-side environment variables at runtime

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>
     );

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 {

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('.');

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 })

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 ?

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) => {

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 = {}) {

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() {

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 {

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 (

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());
   }

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"

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

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,

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>
   `;

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')
       }
     })
   ],

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({