Merge pull request #753 from weaveworks/dev-mode-proxy-websockets

Also proxy Websockets through the dev server while in dev mode.

client/.eslintrc

@@ -1,8 +1,5 @@
 {
   "extends": "airbnb",
-  "globals": {
-    __WS_URL__: false
-  },
   "env": {
     "browser": true,
     "jest": true,

client/app/scripts/components/terminal.js

@@ -10,7 +10,7 @@ import { getPipeStatus, basePath } from '../utils/web-api-utils';
 import Term from '../vendor/term.js';
 
 const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
-const wsUrl = __WS_URL__ || wsProto + '://' + location.host + basePath(location.pathname);
+const wsUrl = wsProto + '://' + location.host + basePath(location.pathname);
 const log = debug('scope:terminal');
 
 const DEFAULT_COLS = 80;

client/app/scripts/utils/web-api-utils.js

@@ -7,7 +7,7 @@ import { clearControlError, closeWebsocket, openWebsocket, receiveError,
   receiveTopologies } from '../actions/app-actions';
 
 const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
-const wsUrl = __WS_URL__ || wsProto + '://' + location.host + location.pathname.replace(/\/$/, '');
+const wsUrl = wsProto + '://' + location.host + location.pathname.replace(/\/$/, '');
 const log = debug('scope:web-api-utils');
 
 const apiTimerInterval = 10000;

client/package.json

@@ -53,8 +53,7 @@
   },
   "optionalDependencies": {
     "express": "~4.13.3",
-    "express-http-proxy": "~0.6.0",
-    "proxy-middleware": "~0.15.0",
+    "http-proxy": "^1.12.0",
     "react-hot-loader": "~1.3.0",
     "webpack-dev-server": "~1.12.1"
   },
@@ -75,9 +74,6 @@
     "testPathDirs": [
       "<rootDir>/app/scripts"
     ],
-    "globals": {
-      "__WS_URL__": false
-    },
     "moduleFileExtensions": [
       "js",
       "json"

client/server.js

@@ -1,6 +1,5 @@
 var express = require('express');
-var proxy = require('proxy-middleware');
-var httpProxy = require('express-http-proxy');
+var httpProxy = require('http-proxy');
 var url = require('url');
 
 var app = express();
@@ -18,6 +17,7 @@ var app = express();
  *
  ************************************************************/
 
+
 // Serve application file depending on environment
 app.get(/(app|terminal-app).js/, function(req, res) {
   var filename = req.originalUrl;
@@ -32,18 +32,12 @@ app.get(/(app|terminal-app).js/, function(req, res) {
 
 var BACKEND_HOST = process.env.BACKEND_HOST || 'localhost:4040';
 
-// HACK need express-http-proxy, because proxy-middleware does
-// not proxy to /api itself
-app.use(httpProxy(BACKEND_HOST, {
-  filter: function(req) {
-    return url.parse(req.url).path === '/api';
-  },
-  forwardPath: function(req) {
-    return url.parse(req.url).path;
-  }
-}));
+var proxy = httpProxy.createProxy({
+  ws: true,
+  target: 'http://' + BACKEND_HOST
+});
 
-app.use('/api', proxy('http://' + BACKEND_HOST + '/api/'));
+app.all('/api*', proxy.web.bind(proxy));
 
 // Serve index page
 
@@ -90,3 +84,5 @@ var server = app.listen(port, function () {
 
   console.log('Scope UI listening at http://%s:%s', host, port);
 });
+
+server.on('upgrade', proxy.ws.bind(proxy));

client/webpack.local.config.js

@@ -15,9 +15,6 @@ var path = require('path');
 
  // Inject websocket url to dev backend
 var BACKEND_HOST = process.env.BACKEND_HOST || 'localhost:4040';
-var GLOBALS = {
-  __WS_URL__: JSON.stringify('ws://' + BACKEND_HOST)
-};
 
 module.exports = {
 
@@ -48,7 +45,6 @@ module.exports = {
 
   // Necessary plugins for hot load
   plugins: [
-    new webpack.DefinePlugin(GLOBALS),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],

client/webpack.production.config.js

@@ -3,7 +3,6 @@ var autoprefixer = require('autoprefixer');
 var path = require('path');
 
 var GLOBALS = {
-  __WS_URL__: 'false',
   'process.env': {NODE_ENV: '"production"'}
 };