Make studio auto-detect backend's URL in playground

packages/playground/package.json

@@ -33,6 +33,7 @@
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "dotenv": "^16.3.1",
     "fast-glob": "^3.3.0",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",

packages/playground/vite.config.ts

@@ -4,13 +4,55 @@ import path from 'path'
 import fg from 'fast-glob'
 import {getAliasesFromTsConfigForRollup} from '../../devEnv/getAliasesFromTsConfig'
 import {definedGlobals} from '../../theatre/devEnv/definedGlobals'
+import * as dotenv from 'dotenv'
+import * as fs from 'fs'
 
 const fromPlaygroundDir = (folder: string) => path.resolve(__dirname, folder)
 const srcDir = fromPlaygroundDir('src')
 const sharedDir = fromPlaygroundDir('src/shared')
 const personalDir = fromPlaygroundDir('src/personal')
 const testDir = fromPlaygroundDir('src/tests')
 
+const repoRoot = path.resolve(__dirname, '../..')
+
+function findAppUrl() {
+  const defaultUrl = 'https://app.theatrejs.com'
+
+  function validateURL(url: string) {
+    const pattern = new RegExp('^https?:\\/\\/[^\\s/$.?#].[^\\s]*$', 'i')
+    return pattern.test(url)
+  }
+
+  const pathToAppEnv = path.resolve(repoRoot, 'packages/app/.env')
+
+  const relativePath = path.relative(repoRoot, pathToAppEnv)
+
+  if (!fs.existsSync(pathToAppEnv)) {
+    console.warn(
+      `WARNING: the .env file at ${relativePath} does not exist, so we'll assume the web app's url is at https://app.theatrejs.com`,
+    )
+  } else {
+    const envFileContent = fs.readFileSync(pathToAppEnv, {encoding: 'utf-8'})
+    try {
+      const webAppEnv = dotenv.parse(envFileContent)
+      const url = 'http://' + webAppEnv.HOST + ':' + webAppEnv.PORT
+      if (validateURL(url)) {
+        console.info(`Using ${url} as the app url, read from ${relativePath}`)
+        return url
+      } else {
+        console.warn(
+          `WARNING: HOST/PORT values in ${relativePath} don't form a correct URL. Defaulting to ${defaultUrl}`,
+        )
+        return defaultUrl
+      }
+    } catch (err) {
+      console.warn(`WARNING: Could not read ${relativePath}`)
+    }
+  }
+
+  return defaultUrl
+}
+
 // https://vitejs.dev/config/
 const config = defineConfig(async ({command}) => {
   const dev = command === 'serve'
@@ -59,6 +101,7 @@ const config = defineConfig(async ({command}) => {
     define: {
       ...definedGlobals,
       'window.__IS_VISUAL_REGRESSION_TESTING': 'false',
+      'process.env.BACKEND_URL': JSON.stringify(findAppUrl()),
     },
     optimizeDeps: {
       exclude: dev ? ['@theatre/core', '@theatre/studio'] : [],

theatre/devEnv/definedGlobals.ts

@@ -10,4 +10,5 @@ export const definedGlobals = {
   // this is only used in `@theatre/studio`, which only supports evergreen browsers
   'global.Set': 'Set',
   'process.env.BUILT_FOR_PLAYGROUND': JSON.stringify('false'),
+  'process.env.BACKEND_URL': JSON.stringify(`https://app.theatrejs.com`),
 }

theatre/globals.d.ts

@@ -13,6 +13,7 @@ declare namespace NodeJS {
     THEATRE_VERSION: string
     // This is set to 'true' when building the playground
     BUILT_FOR_PLAYGROUND: 'true' | 'false'
+    BACKEND_URL?: string // defaults to https://app.theatrejs.com
   }
 }
 

theatre/studio/src/Studio.ts

@@ -195,7 +195,7 @@ export class Studio {
     const storeOpts: Parameters<StudioStore['initialize']>[0] = {
       persistenceKey: DEFAULT_PERSISTENCE_KEY,
       usePersistentStorage: true,
-      serverUrl: 'https://app.theatrejs.com',
+      serverUrl: process.env.BACKEND_URL ?? 'https://app.theatrejs.com',
     }
 
     if (typeof opts?.serverUrl == 'string') {

yarn.lock

@@ -27891,6 +27891,7 @@ fsevents@^1.2.7:
     "@types/styled-components": ^5.1.26
     "@vitejs/plugin-react": ^4.0.0
     "@vitejs/plugin-react-swc": ^3.3.2
+    dotenv: ^16.3.1
     fast-glob: ^3.3.0
     lodash-es: ^4.17.21
     react: ^18.2.0