Fix WS proxy

Author: CompuIves

packages/app/package.json

@@ -160,7 +160,7 @@
     "overmind": "^20.1.0-1572182984474",
     "overmind-devtools": "^19.0.0",
     "overmind-react": "^21.1.0-1572182984474",
-    "phoenix": "^1.3.0",
+    "phoenix": "^1.4.11",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",
     "posthtml": "^0.11.3",

packages/app/scripts/start.js

@@ -20,6 +20,7 @@ const { staticAssets } = require('../config/build');
 
 // Tools like Cloud9 rely on this.
 var DEFAULT_PORT = process.env.PORT || 3000;
+const PROXY_DOMAIN = 'https://codesandbox.io';
 var compiler;
 var handleCompile;
 var compileStart;
@@ -214,6 +215,7 @@ function addMiddleware(devServer, index) {
       rewrites: [{ from: /\/embed/, to: '/embed.html' }],
     })
   );
+  let wsProxy;
   if (process.env.LOCAL_SERVER) {
     devServer.use(
       cors({
@@ -226,10 +228,21 @@ function addMiddleware(devServer, index) {
         credentials: true,
       })
     );
+    wsProxy = proxy({
+      target: PROXY_DOMAIN.replace('https', 'wss'),
+      changeOrigin: true,
+      ws: true,
+      autoRewrite: true,
+      protocolRewrite: true,
+      onProxyReqWs(proxyReq, req, socket, options, head) {
+        proxyReq.setHeader('Origin', PROXY_DOMAIN);
+      },
+    });
+    devServer.use('/socket', wsProxy);
     devServer.use(
       '/api',
       proxy({
-        target: 'https://codesandbox.io',
+        target: PROXY_DOMAIN,
         changeOrigin: true,
       })
     );
@@ -246,6 +259,8 @@ function addMiddleware(devServer, index) {
   // Finally, by now we have certainly resolved the URL.
   // It may be /index.html, so let the dev server try serving it again.
   devServer.use(devServer.middleware);
+
+  return { wsProxy };
 }
 
 function runDevServer(port, protocol, index) {
@@ -273,7 +288,7 @@ function runDevServer(port, protocol, index) {
   });
 
   // Our custom middleware proxies requests to /index.html or a remote API.
-  addMiddleware(devServer, index);
+  const { wsProxy } = addMiddleware(devServer, index);
 
   // Launch WebpackDevServer.
   devServer.listen(port, err => {
@@ -285,6 +300,10 @@ function runDevServer(port, protocol, index) {
     console.log(chalk.cyan('Starting the development server...'));
     openBrowser(port, protocol);
   });
+
+  if (wsProxy) {
+    devServer.listeningApp.on('upgrade', wsProxy.upgrade);
+  }
 }
 
 function run(port) {

packages/app/src/app/overmind/effects/live/index.ts

@@ -74,7 +74,8 @@ export default {
   },
   connect() {
     if (!_socket) {
-      _socket = new Socket(`wss://${location.host}/socket`, {
+      const protocol = process.env.LOCAL_SERVER ? 'ws' : 'wss';
+      _socket = new Socket(`${protocol}://${location.host}/socket`, {
         params: {
           guardian_token: provideJwtToken(),
         },

yarn.lock

@@ -19651,9 +19651,10 @@ phin@^2.9.1:
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
   integrity sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==
 
-phoenix@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.3.0.tgz#1df2c27f986ee295e37c9983ec28ebac1d7f4a3e"
+phoenix@^1.4.11:
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.4.11.tgz#3e70cd2461600ef3b0d4308e8fef7d2005fe000a"
+  integrity sha512-UkuqKB/+Uy9LNt15v1PpPeoLizcYwF4cFTi1wiMZ2TVX5+2Pj7MbRDFmoUFPc+Z1jsOE/TdQ6kzZohErWMiYlQ==
 
 physical-cpu-count@^2.0.0:
   version "2.0.0"