feat(all) Use a new URL for deploying and testing branches (#4796)

editor/package.json

@@ -40,6 +40,8 @@
     "production-print-json": "pnpm run production -- --json=lib/production-stats.json",
     "staging": "REACT_APP_ENVIRONMENT_CONFIG=staging REACT_APP_AUTH0_CLIENT_ID=$AUTH0_CLIENT_ID REACT_APP_AUTH0_ENDPOINT=$AUTH0_ENDPOINT REACT_APP_AUTH0_REDIRECT_URI=$AUTH0_REDIRECT_URI REACT_APP_COMMIT_HASH=$UTOPIA_SHA WEBPACK_MODE='staging' NODE_OPTIONS=\"--max_old_space_size=6656 $NODE_OPENSSL_OPTION\" webpack",
     "staging-print-json": "pnpm run staging --  --json=lib/staging-stats.json",
+    "branches": "REACT_APP_ENVIRONMENT_CONFIG=branches REACT_APP_AUTH0_CLIENT_ID=$AUTH0_CLIENT_ID REACT_APP_AUTH0_ENDPOINT=$AUTH0_ENDPOINT REACT_APP_AUTH0_REDIRECT_URI=$AUTH0_REDIRECT_URI REACT_APP_COMMIT_HASH=$UTOPIA_SHA WEBPACK_MODE='staging' NODE_OPTIONS=\"--max_old_space_size=6656 $NODE_OPENSSL_OPTION\" webpack",
+    "branches-print-json": "pnpm run branches --  --json=lib/branches-stats.json",
     "preinstall": "npx only-allow pnpm",
     "eslint-check": "eslint --quiet --ignore-path ./.eslintignore --config ./.eslintrc.js --ext .ts --ext .tsx src ../utopia-api/src ../utopia-vscode-extension/src ../utopia-vscode-common/src ../puppeteer-tests/src ../website-next/",
     "prettier-check": "prettier --ignore-path ../.prettierignore --config ../prettier.config.js --check src/** ../utopia-api/src/**/* ../utopia-vscode-common/src/** ../utopia-vscode-extension/src/** ../puppeteer-tests/src/** ../website-next/pages/** ../website-next/components/**",

editor/webpack.config.js

@@ -11,6 +11,7 @@ const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent')
 
 const Production = 'production'
 const Staging = 'staging'
+const Branches = 'branches'
 const Development = 'development'
 
 const verbose = process.env.VERBOSE === 'true'
@@ -20,8 +21,9 @@ const mode = process.env.WEBPACK_MODE ?? (performance ? Production : Development
 const actualMode = mode === Staging ? Production : mode
 const isDev = mode === Development || performance
 const isStaging = mode === Staging
-const isProd = !(isDev || isStaging)
-const isProdOrStaging = isProd || isStaging
+const isBranches = mode === Branches
+const isProd = !(isDev || isStaging || isBranches)
+const isProdOrStaging = isProd || isStaging || isBranches
 
 const runCompiler = isDev && process.env.RUN_COMPILER !== 'false' // For when you want to run the compiler in a separate tab
 
@@ -43,7 +45,13 @@ function srcPath(subdir) {
 //                    using the ExtractedTextPlugin - https://v4.webpack.js.org/plugins/extract-text-webpack-plugin/
 const hashPattern = hot ? '[contenthash]' : '[chunkhash]' // I changed [hash] to [contenthash] as per https://webpack.js.org/migrate/5/#clean-up-configuration
 
-const BaseDomain = isProd ? 'https://cdn.utopia.app' : isStaging ? 'https://cdn.utopia.pizza' : ''
+const BaseDomain = isProd
+  ? 'https://cdn.utopia.app'
+  : isStaging
+  ? 'https://cdn.utopia.pizza'
+  : isBranches
+  ? 'https://cdn.utopia.fish'
+  : ''
 const VSCodeBaseDomain = BaseDomain === '' ? '${window.location.origin}' : BaseDomain
 
 const htmlTemplateParameters = {

website-next/components/common/env-vars.ts

@@ -8,11 +8,14 @@ export const BASE_URL: string = `${SCHEME}//${HOST}/`
 export const PRODUCTION_ENV: boolean = process.env.NODE_ENV === 'production'
 export const PRODUCTION_CONFIG: boolean = process.env.REACT_APP_ENVIRONMENT_CONFIG === 'production'
 const STAGING_CONFIG: boolean = process.env.REACT_APP_ENVIRONMENT_CONFIG === 'staging'
-const PRODUCTION_OR_STAGING_CONFIG = PRODUCTION_CONFIG || STAGING_CONFIG
+const BRANCHES_CONFIG: boolean = process.env.REACT_APP_ENVIRONMENT_CONFIG === 'branches'
+const PRODUCTION_OR_STAGING_CONFIG = PRODUCTION_CONFIG || STAGING_CONFIG || BRANCHES_CONFIG
 const SECONDARY_BASE_URL: string = PRODUCTION_CONFIG
   ? `https://utopia.fm/`
   : STAGING_CONFIG
   ? 'https://utopia95.com/'
+  : BRANCHES_CONFIG
+  ? 'https://momentumworks.co/'
   : BARE_HOST === 'localhost:8000'
   ? 'http://localhost:8001'
   : BASE_URL
@@ -50,6 +53,8 @@ export const VSCODE_EDITOR_IFRAME_BASE_URL: string = PRODUCTION_CONFIG
   ? `https://utopia.app/`
   : STAGING_CONFIG
   ? 'https://utopia.pizza/'
+  : BRANCHES_CONFIG
+  ? 'https://momentumworks.co/'
   : BARE_HOST === 'localhost:8000' || BARE_HOST === 'localhost:8001'
   ? 'http://localhost:8000'
   : BASE_URL

website-next/components/hosted-image.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
-
-const cdnUrl = process.env.UTOPIA_CDN_URL ?? ''
+import { STATIC_BASE_URL } from './common/env-vars'
 
 export function srcToCdn(src: string): string {
-  return `${cdnUrl}${src}`
+  return `${STATIC_BASE_URL}${src}`
 }
 
 type HostedImageProps = React.DetailedHTMLProps<