Add separate sandbox host (codesandbox#2083)

* Fix getId() to also check the sandbox host.

* Update frameUrl() to use the sandbox host.

* Refactor: move get(sandbox)Id() to common.

* frameUrl(): fix checking for sandbox host.

Author: lbogdan

packages/app/src/sandbox/index.js

@@ -7,6 +7,7 @@ import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker
 import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import { generateFileFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
+import { getSandboxId } from '@codesandbox/common/lib/utils/url-generator';
 import setupConsole from 'sandbox-hooks/console';
 import setupHistoryListeners from 'sandbox-hooks/url-listeners';
 
@@ -20,23 +21,6 @@ export const SCRIPT_VERSION =
 
 debug('Booting sandbox');
 
-function getId() {
-  if (process.env.LOCAL_SERVER) {
-    return document.location.hash.replace('#', '');
-  }
-
-  if (process.env.STAGING) {
-    const segments = host.split('//')[1].split('.');
-    const first = segments.shift();
-    const re = RegExp(`${first}-(.*)\\.${segments.join('\\.')}`);
-    return document.location.host.match(re)[1];
-  }
-
-  const hostRegex = host.replace(/https?:\/\//, '').replace(/\./g, '\\.');
-  const sandboxRegex = new RegExp(`(.*)\\.${hostRegex}`);
-  return document.location.host.match(sandboxRegex)[1];
-}
-
 requirePolyfills().then(() => {
   registerServiceWorker('/sandbox-service-worker.js', {});
 
@@ -86,7 +70,7 @@ requirePolyfills().then(() => {
 
   if (process.env.NODE_ENV === 'test' || isStandalone) {
     // We need to fetch the sandbox ourselves...
-    const id = getId();
+    const id = getSandboxId();
     window
       .fetch(host + `/api/v1/sandboxes/${id}`, {
         credentials: 'include',

packages/common/src/utils/url-generator.ts

@@ -4,6 +4,11 @@ export const gitHubRepoPattern = /(https?:\/\/)?((www.)?)github.com(\/[\w-]+){2,
 const gitHubPrefix = /(https?:\/\/)?((www.)?)github.com/;
 const dotGit = /(\.git)$/;
 
+const sandboxHost = {
+  'https://codesandbox.io': 'https://csb.dev',
+  'https://codesandbox.stream': 'https://codesandbox.dev',
+};
+
 const buildEncodedUri = (
   strings: TemplateStringsArray,
   ...values: Array<string>
@@ -99,7 +104,11 @@ export const frameUrl = (sandbox: Sandbox, append: string = '') => {
     return stagingFrameUrl(sandbox.id, path);
   }
 
-  return `${location.protocol}//${sandbox.id}.${host()}/${path}`;
+  let sHost = host();
+  if (`https://${sHost}` in sandboxHost) {
+    sHost = sandboxHost[`https://${sHost}`].split('//')[1];
+  }
+  return `${location.protocol}//${sandbox.id}.${sHost}/${path}`;
 };
 
 export const forkSandboxUrl = (sandbox: Sandbox) =>
@@ -153,3 +162,34 @@ export const patronUrl = () => `/patron`;
 export const curatorUrl = () => `/curator`;
 export const tosUrl = () => `/legal/terms`;
 export const privacyUrl = () => `/legal/privacy`;
+
+export function getSandboxId() {
+  const host = process.env.CODESANDBOX_HOST;
+
+  if (process.env.LOCAL_SERVER) {
+    return document.location.hash.replace('#', '');
+  }
+
+  if (process.env.STAGING) {
+    const segments = host.split('//')[1].split('.');
+    const first = segments.shift();
+    const re = RegExp(`${first}-(.*)\\.${segments.join('\\.')}`);
+    return document.location.host.match(re)[1];
+  }
+
+  let result: string;
+  [host, sandboxHost[host]].filter(Boolean).forEach(tryHost => {
+    const hostRegex = tryHost.replace(/https?:\/\//, '').replace(/\./g, '\\.');
+    const sandboxRegex = new RegExp(`(.*)\\.${hostRegex}`);
+    const matches = document.location.host.match(sandboxRegex);
+    if (matches) {
+      result = matches[1];
+    }
+  });
+
+  if (!result) {
+    throw new Error(`Can't detect sandbox ID from the current URL`);
+  }
+
+  return result;
+}