diff --git a/packages/app/package.json b/packages/app/package.json index fc2caafbee7..aa02e169357 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/scripts/start.js b/packages/app/scripts/start.js index c8f06c9434a..f8a206e835d 100644 --- a/packages/app/scripts/start.js +++ b/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) { diff --git a/packages/app/src/app/overmind/effects/live/index.ts b/packages/app/src/app/overmind/effects/live/index.ts index 0482365f766..8b8c1ad06fb 100755 --- a/packages/app/src/app/overmind/effects/live/index.ts +++ b/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(), }, diff --git a/yarn.lock b/yarn.lock index 6dfd1a979f9..6cd176541e4 100644 --- a/yarn.lock +++ b/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"