Allow configuring the API host

Configure host for legacy API calls

README.md

@@ -22,11 +22,12 @@ Once running, open `http://localhost:8333` in your browser. If you wish to have
 
 `npm start` and `npm run watch` can be configured with the following environment variables
 
-| Variable      | Default                           | Description                                    |
-| ------------- | --------------------------------- | ---------------------------------------------- |
-| `NODE_ENV`    | `null`                            | If not `production`, app acts like development |
-| `PORT`        | `8333`                            | Port for devserver (http://localhost:XXXX)     |
-| `PROXY_HOST`  | `https://staging.scratch.mit.edu` | Pass-through location for scratchr2            |
+| Variable      | Default                               | Description                                    |
+| ------------- | ------------------------------------- | ---------------------------------------------- |
+| `API_HOST`    | `https://api-staging.scratch.mit.edu` | Hostname for API requests                      |
+| `NODE_ENV`    | `null`                                | If not `production`, app acts like development |
+| `PORT`        | `8333`                                | Port for devserver (http://localhost:XXXX)     |
+| `PROXY_HOST`  | `https://staging.scratch.mit.edu`     | Pass-through location for scratchr2            |
 
 ### To Test
 ```bash

src/components/navigation/navigation.jsx

@@ -37,6 +37,7 @@ module.exports = React.createClass({
         this.setState({'loginError': null});
         this.api({
             method: 'post',
+            host: '',
             uri: '/accounts/login/',
             json: formData,
             useCsrf: true
@@ -54,6 +55,7 @@ module.exports = React.createClass({
     },
     handleLogOut: function () {
         xhr({
+            host: '',
             uri: '/accounts/logout/'
         }, function (err) {
             if (err) {

src/env.json

@@ -1 +0,0 @@
-{}

src/environment.js

@@ -0,0 +1,3 @@
+module.exports = {
+    API_HOST: JSON.stringify(process.env.API_HOST || 'http://staging.scratch.mit.edu')
+};

src/mixins/api.jsx

@@ -25,6 +25,7 @@ module.exports = {
     },
     api: function (opts, callback) {
         defaults(opts, {
+            host: process.env.API_HOST,
             headers: {},
             json: {},
             useCsrf: false
@@ -34,6 +35,8 @@ module.exports = {
             'X-Requested-With': 'XMLHttpRequest'
         });
 
+        opts.uri = opts.host + opts.uri;
+
         var apiRequest = function (opts) {
             xhr(opts, function (err, res, body) {
                 if (err) log.error(err);

src/session.js

@@ -11,6 +11,7 @@ window.updateSession = function (session) {
 
 window.refreshSession = function () {
     api({
+        host: '',
         uri: '/session/'
     }, function (err, body) {
         window.updateSession(body);

webpack.config.js

@@ -1,7 +1,7 @@
 var path = require('path');
 var webpack = require('webpack');
 var routes = require('./server/routes.json');
-var buildEnv = require('./src/env.json');
+var buildEnv = require('./src/environment.js');
 
 // Prepare all entry points
 var entry = {
@@ -53,10 +53,7 @@ module.exports = {
     },
     plugins: [
         new webpack.DefinePlugin({
-            'process.env': Object.keys(buildEnv).reduce(function (env, key) {
-                env[key] = JSON.stringify(process.env[key] || env[key]);
-                return env;
-            }, buildEnv)
+            'process.env': buildEnv
         }),
         new webpack.optimize.UglifyJsPlugin({
             compress: {