Exposes API endpoint URL to client via env variable (#323)

Author: andrewn

README.md

@@ -13,6 +13,7 @@ This project is currently in development! It will be announced when there is a (
 5. Create a file called `.env` in the root of this directory that looks like
 
   ```
+  API_URL=/api
   MONGO_URL=mongodb://localhost:27017/p5js-web-editor
   PORT=8000
   SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
@@ -36,6 +37,7 @@ This project is currently in development! It will be announced when there is a (
 5. Create a file called `.env` in the root of this directory that looks like
 
   ```
+  API_URL=/api
   MONGO_URL=mongodb://localhost:27017/p5js-web-editor
   PORT=8000
   SESSION_SECRET=make_this_a_long-random_string_like_maybe_126_characters_long

client/modules/IDE/actions/files.js

@@ -5,7 +5,7 @@ import { reset } from 'redux-form';
 import * as ActionTypes from '../../../constants';
 import { setUnsavedChanges } from './ide';
 
-const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+const ROOT_URL = process.env.API_URL;
 
 function appendToFilename(filename, string) {
   const dotIndex = filename.lastIndexOf('.');

client/modules/IDE/actions/preferences.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import * as ActionTypes from '../../../constants';
 
-const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+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

@@ -8,7 +8,7 @@ import { setUnsavedChanges,
   resetJustOpenedProject,
   showErrorModal } from './ide';
 
-const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+const ROOT_URL = process.env.API_URL;
 
 export function setProject(project) {
   return {

client/modules/IDE/actions/projects.js

@@ -3,7 +3,7 @@ import * as ActionTypes from '../../../constants';
 import { showErrorModal, setPreviousPath } from './ide';
 import { resetProject } from './project';
 
-const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+const ROOT_URL = process.env.API_URL;
 
 export function getProjects(username) {
   return (dispatch) => {

client/modules/IDE/actions/uploader.js

@@ -3,7 +3,7 @@ import { createFile } from './files';
 
 const textFileRegex = /(text\/|application\/json)/;
 const s3BucketHttps = `https://s3-us-west-2.amazonaws.com/${process.env.S3_BUCKET}/`;
-const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+const ROOT_URL = process.env.API_URL;
 const MAX_LOCAL_FILE_SIZE = 80000; // bytes, aka 80 KB
 
 function localIntercept(file, options = {}) {

client/modules/User/actions.js

@@ -4,7 +4,7 @@ import * as ActionTypes from '../../constants';
 import { showErrorModal, justOpenedProject } from '../IDE/actions/ide';
 
 
-const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+const ROOT_URL = process.env.API_URL;
 
 export function authError(error) {
   return {

webpack.config.dev.js

@@ -34,6 +34,7 @@ module.exports = {
     }),
     new webpack.DefinePlugin({
       'process.env': {
+        API_URL: '"' + process.env.API_URL + '"',
         CLIENT: JSON.stringify(true),
         'NODE_ENV': JSON.stringify('development'),
         'S3_BUCKET': '"' + process.env.S3_BUCKET + '"'

webpack.config.prod.js

@@ -76,6 +76,7 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
+        'API_URL': '"' + process.env.API_URL + '"',
         'NODE_ENV': JSON.stringify('production'),
         'S3_BUCKET': '"' + process.env.S3_BUCKET + '"'
       }
@@ -112,4 +113,4 @@ module.exports = {
       clearMessages: true
     })
   ]
-};
+};