Add stream option flag (codesandbox#3290)

* Default to stream

* Make it a flag

* Rename env var

* Update cli login url to reflect stream

Author: CompuIves

package.json

@@ -50,6 +50,7 @@
     "start:dev_api": "concurrently --raw \"cd packages/app && yarn start:dev_api\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
     "start:fast": "concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
+    "start:fast:stream": "cross-env STAGING_API=1 concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:home": "yarn build:deps && yarn start:home:fast",
     "start:home:fast": "cd packages/homepage && yarn start",
     "start:overmind": "yarn build:deps && concurrently \"lerna run start --scope app --stream\" \"overmind-devtools\"",

packages/app/scripts/start.js

@@ -20,7 +20,9 @@ const { staticAssets } = require('../config/build');
 
 // Tools like Cloud9 rely on this.
 var DEFAULT_PORT = process.env.PORT || 3000;
-const PROXY_DOMAIN = 'https://codesandbox.io';
+const PROXY_DOMAIN = process.env.STAGING_API
+  ? 'https://codesandbox.stream'
+  : 'https://codesandbox.io';
 var compiler;
 var handleCompile;
 var compileStart;

packages/app/src/app/pages/DevAuth/index.tsx

@@ -44,22 +44,22 @@ export const DevAuthPage = () => {
       });
   };
 
+  const baseSignInDomain = process.env.STAGING_API
+    ? 'https://codesandbox.stream'
+    : 'https://codesandbox.io';
+  const cliLoginUrl = `${baseSignInDomain}/cli/login`;
   return (
     <Container>
       <Title>Developer Sign In</Title>
       <SubTitle style={{ width: 800 }}>
         Please enter the token you get from{' '}
         <a
-          href="https://codesandbox.io/cli/login"
+          href={cliLoginUrl}
           target="popup"
           rel="noreferrer noopener"
           onClick={e => {
             e.preventDefault();
-            window.open(
-              'https://codesandbox.io/cli/login',
-              'popup',
-              'width=600,height=600'
-            );
+            window.open(cliLoginUrl, 'popup', 'width=600,height=600');
             return false;
           }}
         >

packages/app/src/app/utils/executor-manager.ts

@@ -74,9 +74,14 @@ export class ExecutorsManager {
       this.executor = new ExecutorType();
     }
 
+    const sseHost = process.env.STAGING_API
+      ? 'https://codesandbox.stream'
+      : 'https://codesandbox.io';
+
     await this.executor.initialize({
       sandboxId: sandbox.id,
       files: getModulesToSend(sandbox),
+      host: sseHost,
     });
 
     return this.executor;

packages/common/src/components/Preview/index.tsx

@@ -64,10 +64,14 @@ type State = {
   useFallbackDomain: boolean;
 };
 
+const sseDomain = process.env.STAGING_API
+  ? 'codesandbox.stream'
+  : 'codesandbox.io';
+
 const getSSEUrl = (sandbox?: Sandbox, initialPath: string = '') =>
   `https://${sandbox ? `${sandbox.id}.` : ''}sse.${
     process.env.NODE_ENV === 'development' || process.env.STAGING
-      ? 'codesandbox.io'
+      ? sseDomain
       : host()
   }${initialPath}`;
 

packages/common/src/config/env.ts

@@ -5,6 +5,7 @@ import getHost from '../utils/host';
 const REACT_APP = /^REACT_APP_/i;
 const NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'development');
 const LOCAL_SERVER = Boolean(JSON.stringify(process.env.LOCAL_SERVER));
+const STAGING_API = Boolean(JSON.stringify(process.env.STAGING_API));
 
 export default Object.keys(process.env)
   .filter(key => REACT_APP.test(key))
@@ -15,6 +16,7 @@ export default Object.keys(process.env)
     },
     {
       'process.env.NODE_ENV': NODE_ENV,
+      'process.env.STAGING_API': STAGING_API,
       'process.env.CODESANDBOX_HOST': JSON.stringify(getHost()),
       'process.env.LOCAL_SERVER': Boolean(LOCAL_SERVER),
       'process.env.STAGING': 'STAGING_BRANCH' in process.env,

packages/executors/src/executor.ts

@@ -8,6 +8,10 @@ export interface IFiles {
 }
 
 export interface ISetupParams {
+  /**
+   * Eg. https://codesandbox.io
+   */
+  host: string;
   files: IFiles;
   sandboxId: string;
 }

packages/executors/src/serverExecutor.ts

@@ -63,6 +63,7 @@ export class ServerExecutor implements IExecutor {
   socket: SocketIOClient.Socket;
   connectTimeout: number | null = null;
   token: Promise<string | undefined>;
+  host?: string;
   sandboxId?: string;
   lastSent?: IFiles;
 
@@ -72,17 +73,21 @@ export class ServerExecutor implements IExecutor {
   }
 
   private initializeSocket() {
-    return io(`https://sse.codesandbox.io`, {
+    const usedHost = this.host || 'https://codesandbox.io';
+    const sseHost = usedHost.replace('https://', 'https://sse.');
+
+    return io(sseHost, {
       autoConnect: false,
       transports: ['websocket', 'polling'],
     });
   }
 
-  async initialize({ sandboxId, files }: ISetupParams) {
+  async initialize({ sandboxId, files, host }: ISetupParams) {
     if (this.sandboxId === sandboxId && this.socket.connected) {
       return;
     }
 
+    this.host = host;
     this.sandboxId = sandboxId;
     this.lastSent = files;