[WIP] Added staging environment for deployment (codesandbox#282)

* Added staging environment for deployment.

* Disable service worker for http.

Author: lbogdan

config/env.js

@@ -10,9 +10,15 @@ const getHost = () => {
     return 'http://localhost:3000';
   }
 
-  return process.env.NODE_ENV === 'development'
-    ? '*'
-    : 'https://codesandbox.io';
+  if (process.env.NODE_ENV === 'development') {
+    return '*';
+  }
+
+  if ('STAGING_BRANCH' in process.env) {
+    return `http://${process.env.STAGING_BRANCH}.cs.lbogdan.tk`;
+  }
+
+  return 'https://codesandbox.io';
 };
 
 module.exports = Object.keys(process.env)
@@ -26,5 +32,6 @@ module.exports = Object.keys(process.env)
       'process.env.NODE_ENV': NODE_ENV,
       'process.env.CODESANDBOX_HOST': JSON.stringify(getHost()),
       'process.env.LOCAL_SERVER': !!LOCAL_SERVER,
+      'process.env.STAGING': 'STAGING_BRANCH' in process.env,
     }
   );

src/app/utils/url-generator.js

@@ -9,7 +9,7 @@ const buildEncodedUri = (strings: Array<string>, ...values: Array<string>) =>
 
 export const host = () => {
   if (process.env.NODE_ENV === 'production') {
-    return 'codesandbox.io';
+    return process.env.CODESANDBOX_HOST.split('//')[1];
   }
   if (process.env.LOCAL_SERVER) {
     return 'localhost:3000';
@@ -53,13 +53,26 @@ export const embedUrl = (sandbox: Sandbox) => {
   return `/embed/${sandbox.id}`;
 };
 
+const stagingFrameUrl = (shortid: string, path: string) => {
+  const stagingHost = process.env.CODESANDBOX_HOST.split('//')[1];
+  const segments = stagingHost.split('.');
+  const first = segments.shift();
+  return `${location.protocol}//${first}-${shortid}.${segments.join(
+    '.'
+  )}/${path}`;
+};
+
 export const frameUrl = (shortid: string, append: string = '') => {
   const path = append.indexOf('/') === 0 ? append.substr(1) : append;
 
   if (process.env.LOCAL_SERVER) {
     return `http://localhost:3001/${path}`;
   }
 
+  if (process.env.STAGING) {
+    return stagingFrameUrl(shortid, path);
+  }
+
   return `${location.protocol}//${shortid}.${host()}/${path}`;
 };
 

src/common/registerServiceWorker.js

@@ -18,6 +18,8 @@ const isLocalhost = Boolean(
     )
 );
 
+const isHttp = Boolean(window.location.protocol === 'http:');
+
 export default function register(swUrl, sendNotification) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
@@ -30,10 +32,10 @@ export default function register(swUrl, sendNotification) {
     }
 
     window.addEventListener('load', () => {
-      if (!isLocalhost) {
-        // Is not local host. Just register service worker
+      if (!isLocalhost && !isHttp) {
+        // It's neither localhost nor http. Just register service worker
         registerValidSW(swUrl, sendNotification);
-      } else {
+      } else if (isLocalhost) {
         // This is running on localhost. Lets check if a service worker still exists or not.
         checkValidServiceWorker(swUrl);
       }

src/sandbox/index.js

@@ -5,18 +5,25 @@ import registerServiceWorker from 'common/registerServiceWorker';
 import requirePolyfills from 'common/load-dynamic-polyfills';
 import { findMainModule } from 'app/store/entities/sandboxes/modules/selectors';
 
-import host from './utils/host';
-
 import setupHistoryListeners from './url-listeners';
 import compile from './compile';
 import setupConsole from './console';
 import transformJSON from './console/transform-json';
 
+const host = process.env.CODESANDBOX_HOST;
+
 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];
+  }
+
   return document.location.host.match(/(.*)\.codesandbox/)[1];
 }