feat: env config for on-prem support (#7989)

* style(Onboarding): update role options

* feat(utils): do not track outside of codesandbox.io

* install sentry browser analytics

* remove gtm + ga page tracking

* refactor(analytics): initialize sentry and amplitude at app startup

* fix build

* env config setup

* refactor(app): simplify initialization of analytics and sentry

* undo changes

* static preview url

* undo earlier "fix"

* refactor(package.json): refactor start scripts for faster local and stream starts

* refactor(package.json): update start:fast with prescript

* refactor(package.json): update start:fast script to include NODE_ENV=development

* refactor(effects): update protocol for socket connection

* Pass config path as argument

* Add env.sh and .env.prod|dev to docker imager

* Add WORKDIR to docker. Copy env.sh in copy-assets.js

* Another try

* Change env.sh script type

* Update env.sh to support sh

* refactor(url-generator): simplify code and add support for custom preview domain

* refactor(Preview): change getSSEUrl logic to use static preview URL if specified

---------

Co-authored-by: Filipe Lima <[email protected]>
Co-authored-by: Utwo <[email protected]>
Co-authored-by: codesandbox-bot <[email protected]>

Author: 4 people

.env

@@ -0,0 +1,5 @@
+AMPLITUDE_API_KEY=a205ed9b06a7baf5a594bdd30293aa80
+SENTRY_DSN=https://[email protected]/2071895
+IS_ONPREM=false
+USE_STATIC_PREVIEW=false
+PREVIEW_DOMAIN=csb.app

.gitignore

@@ -31,3 +31,5 @@ standalone-packages/monaco-editor-core
 
 .next
 .cache-loader
+
+packages/app/static/js/env-config.js

Dockerfile

@@ -1,3 +1,4 @@
 FROM nginx:1.16.1-alpine
 
-COPY www /var/www/codesandbox
+WORKDIR /var/www/codesandbox
+COPY www ./

env.sh

@@ -0,0 +1,27 @@
+#!/bin/sh
+
+# Recreate config file
+envConfigFilePath=$1
+
+rm -rf $envConfigFilePath
+touch $envConfigFilePath
+
+# Add assignment 
+echo "window._env_ = {" >> $envConfigFilePath
+
+
+while IFS='=' read -r varname varvalue || [ -n "$varname" ]; do
+  value=""
+  if [ -n "$varname" ]; then
+    eval "value=\"\${$varname}\""
+  fi
+
+  # Otherwise use value from .env file
+  if [ -z "$value" ]; then
+    value="$varvalue"
+  fi
+  
+  echo "  $varname: \"$value\"," >> "$envConfigFilePath"
+done < ".env"
+
+echo "}" >> "$envConfigFilePath"

package.json

@@ -53,10 +53,13 @@
     "start:common": "lerna run start --scope @codesandbox/common --stream",
     "start:components": "lerna run start --scope @codesandbox/components --stream",
     "start:dev_api": "(tmux new-session -d -s csb \"NODE_OPTIONS=--max_old_space_size=8192 concurrently --raw 'cd packages/app && yarn start:dev_api' 'cd packages/common && yarn start' 'cd packages/components && yarn start'\" || tmux attach -t csb) && tmux attach -t csb",
+    "prestart:fast": "chmod +x ./env.sh && ./env.sh ./packages/app/static/js/env-config.js",
     "start:fast": "cross-env ENDPOINT=https://codesandbox.io NODE_ENV=development concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:csb-dev": "cross-env NODE_ENV=development stmux -w always -e ERROR -m beep,system -- [ \"cd packages/app && sleep 15 && yarn start:dev_api\" : [ \"cd packages/common && yarn start\" .. \"cd packages/components && yarn start\" ] ]",
     "start:profiling": "cross-env NODE_ENV=production PROFILING=true concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:hot": "cross-env NODE_ENV=development APP_ONLY=true concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
+    "prestart:fast:stream": "chmod +x ./env.sh && ./env.sh ./packages/app/static/js/env-config.js",
+    "prestart:fast:local": "chmod +x ./env.sh && ./env.sh ./packages/app/static/js/env-config.js",
     "start:fast:stream": "cross-env ENDPOINT=https://codesandbox.stream NODE_ENV=development concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:fast:local": "cross-env ENDPOINT=http://localhost:4000 NODE_ENV=development concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:storybook": "lerna run start:storybook --scope=@codesandbox/common --stream",

packages/app/scripts/copy-assets.js

@@ -24,6 +24,14 @@ const assets = [
     from: 'packages/app/public',
     to: '',
   },
+  {
+    from: '.env',
+    to: '.env',
+  },
+  {
+    from: 'env.sh',
+    to: 'env.sh',
+  },
 ].filter(Boolean);
 
 const rootPath = path.resolve(__dirname, '../../..');

packages/app/src/app/index.html

@@ -41,6 +41,7 @@
 />
   <link rel="mask-icon" href="/csb-ios.svg" color="#000">
   <link rel="manifest" href="/manifest.json">
+  <script src="/static/js/env-config.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
   <script>
     WebFont.load({

packages/app/src/app/index.js

@@ -95,8 +95,8 @@ if (process.env.NODE_ENV === 'production') {
 
   try {
     initializeAnalytics({
-      sentryDSN: 'https://[email protected]/2071895',
-      amplitudeApiKey: 'a205ed9b06a7baf5a594bdd30293aa80',
+      sentryDSN: window._env_?.SENTRY_DSN,
+      amplitudeApiKey: window._env_?.AMPLITUDE_API_KEY,
     });
 
     overmind.eventHub.on('action:start', event => {

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

@@ -173,8 +173,8 @@ class Live {
   private connectionPromise: Promise<Socket>;
   private async connect(): Promise<Socket> {
     if (!this.socket) {
-      const protocol =
-        process.env.LOCAL_SERVER && !process.env.CSB ? 'ws' : 'wss';
+      const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss';
+
       let jwt = await this.provideJwtCached();
       const params = () => ({
         guardian_token: jwt,

packages/app/src/embed/index.html

@@ -52,6 +52,7 @@
     rel="icon"
   />
     <title>Embed - CodeSandbox</title>
+    <script src="/static/js/env-config.js"></script>
     <script src="<%= webpackConfig.output.publicPath %>static/browserfs12/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
       type="text/javascript"></script>

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

@@ -82,12 +82,22 @@ const sseDomain = process.env.STAGING_API
   ? 'codesandbox.stream'
   : 'codesandbox.io';
 
-const getSSEUrl = (sandbox?: Sandbox, initialPath: string = '') =>
-  `https://${sandbox ? `${sandbox.id}.` : ''}sse.${
+const getSSEUrl = (sandbox?: Sandbox, initialPath: string = '') => {
+  // @ts-ignore
+  const usesStaticPreviewURL = window._env_?.USE_STATIC_PREVIEW === 'true';
+  // @ts-ignore
+  const previewDomain = window._env_?.PREVIEW_DOMAIN;
+
+  if (usesStaticPreviewURL && previewDomain) {
+    return previewDomain;
+  }
+
+  return `https://${sandbox ? `${sandbox.id}.` : ''}sse.${
     process.env.NODE_ENV === 'development' || process.env.STAGING
       ? sseDomain
       : host()
   }${initialPath}`;
+};
 
 interface IModulesByPath {
   [path: string]: { path: string; code: null | string; isBinary?: boolean };

packages/common/src/utils/analytics/amplitude.ts

@@ -5,7 +5,13 @@ import { debug } from './utils';
 // After 30min no event we mark a session
 const NEW_SESSION_TIME = 1000 * 60 * 30;
 
+let amplitudeInitialized = false;
+
 export const init = (apiKey: string) => {
+  if (!apiKey) {
+    return;
+  }
+
   amplitude.init(apiKey, undefined, {
     serverUrl: 'https://stats.codesandbox.io/2/httpapi',
     appVersion: VERSION,
@@ -15,11 +21,13 @@ export const init = (apiKey: string) => {
       pageViews: false, // We have custom logic for pageview tracking
     },
   });
+
+  amplitudeInitialized = true;
 };
 
 export const identify = async (key: string, value: any) => {
-  if (!amplitude) {
-    debug('[Amplitude] NOT identifying because Amplitude is not loaded');
+  if (!amplitudeInitialized) {
+    return;
   }
 
   const identity = new amplitude.Identify();
@@ -29,8 +37,8 @@ export const identify = async (key: string, value: any) => {
 };
 
 export const identifyOnce = async (key: string, value: any) => {
-  if (!amplitude) {
-    debug('[Amplitude] NOT identifying because Amplitude is not loaded');
+  if (!amplitudeInitialized) {
+    return;
   }
 
   const identity = new amplitude.Identify();
@@ -40,8 +48,8 @@ export const identifyOnce = async (key: string, value: any) => {
 };
 
 export const setUserId = async (userId: string) => {
-  if (!amplitude) {
-    debug('[Amplitude] NOT setting userid because Amplitude is not loaded');
+  if (!amplitudeInitialized) {
+    return;
   }
 
   identify('userId', userId);
@@ -50,20 +58,17 @@ export const setUserId = async (userId: string) => {
 };
 
 export const resetUserId = async () => {
-  if (!amplitude) {
-    debug('[Amplitude] NOT resetting user id because Amplitude is not loaded');
+  if (!amplitudeInitialized) {
+    return;
   }
 
   amplitude.reset();
   debug('[Amplitude] Resetting session');
 };
 
 export const track = async (eventName: string, data: any) => {
-  if (!amplitude) {
-    debug(
-      '[Amplitude] NOT tracking because Amplitude is not loaded',
-      eventName
-    );
+  if (!amplitudeInitialized) {
+    return;
   }
 
   const currentTime = Date.now();
@@ -78,6 +83,10 @@ export const track = async (eventName: string, data: any) => {
 };
 
 export const setGroup = async (group: string, value: string | string[]) => {
+  if (!amplitudeInitialized) {
+    return;
+  }
+
   amplitude.setGroup(group, value);
   debug('[Amplitude] Grouping', group, value);
 };

packages/common/src/utils/analytics/sentry.ts

@@ -9,6 +9,7 @@ function getSentry(): Promise<typeof import('@sentry/browser')> {
   return import(/* webpackChunkName: 'sentry' */ '@sentry/browser');
 }
 
+let sentryInitialized = false;
 let latestVersionPromise: Promise<string>;
 const versionTimeout = 1 * 60 * 1000;
 function getLatestVersion() {
@@ -35,6 +36,8 @@ export async function initialize(dsn: string) {
       return Promise.resolve();
     }
 
+    sentryInitialized = true;
+
     return _Sentry.init({
       dsn,
       release: VERSION,
@@ -142,34 +145,34 @@ export async function initialize(dsn: string) {
 }
 
 export const logBreadcrumb = (breadcrumb: Breadcrumb) => {
-  if (_Sentry) {
+  if (_Sentry && sentryInitialized) {
     _Sentry.addBreadcrumb(breadcrumb);
   }
 };
 
 export const captureException = (err: Error) => {
-  if (_Sentry) {
+  if (_Sentry && sentryInitialized) {
     return _Sentry.captureException(err);
   }
   return null;
 };
 
 export const configureScope = cb => {
-  if (_Sentry) {
+  if (_Sentry && sentryInitialized) {
     _Sentry.configureScope(cb);
   }
 };
 
 export const setUserId = userId => {
-  if (_Sentry) {
+  if (_Sentry && sentryInitialized) {
     _Sentry.configureScope(scope => {
       scope.setUser({ id: userId });
     });
   }
 };
 
 export const resetUserId = () => {
-  if (_Sentry) {
+  if (_Sentry && sentryInitialized) {
     _Sentry.configureScope(scope => {
       scope.setUser({ id: undefined });
     });

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

@@ -162,6 +162,15 @@ export const frameUrl = (
     port = undefined,
   }: { useFallbackDomain?: boolean; port?: number } = {}
 ) => {
+  // @ts-ignore
+  const usesStaticPreviewURL = window._env_?.USE_STATIC_PREVIEW === 'true';
+  // @ts-ignore
+  const previewDomain = window._env_?.PREVIEW_DOMAIN;
+
+  if (usesStaticPreviewURL && previewDomain) {
+    return previewDomain;
+  }
+
   const path = append.indexOf('/') === 0 ? append.substr(1) : append;
 
   const templateIsServer = isServer(sandbox.template);