Bundle app ID inside apps, rather than trying to find it dynamically

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -30,6 +30,7 @@
   }
   $: selectedComponentId = $store.selectedComponentId ?? ""
   $: previewData = {
+    appId: $store.appId,
     layout,
     screen,
     selectedComponentId,

packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html

@@ -22,10 +22,11 @@
         }
 
         // Extract data from message
-        const { selectedComponentId, layout, screen, previewType } = JSON.parse(event.data)
+        const { selectedComponentId, layout, screen, previewType, appId } = JSON.parse(event.data)
 
         // Set some flags so the app knows we're in the builder
         window["##BUDIBASE_IN_BUILDER##"] = true
+        window["##BUDIBASE_APP_ID##"] = appId
         window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
         window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId

packages/client/src/api/api.js

@@ -1,5 +1,3 @@
-import { getAppId } from "../utils/getAppId"
-
 /**
  * API cache for cached request responses.
  */
@@ -30,7 +28,7 @@ const makeApiCall = async ({ method, url, body, json = true }) => {
     let headers = {
       Accept: "application/json",
       "Content-Type": "application/json",
-      "x-budibase-app-id": getAppId(),
+      "x-budibase-app-id": window["##BUDIBASE_APP_ID##"],
     }
     if (!window["##BUDIBASE_IN_BUILDER##"]) {
       headers["x-budibase-type"] = "client"

packages/client/src/index.js

@@ -7,6 +7,7 @@ const loadBudibase = () => {
   // Update builder store with any builder flags
   builderStore.set({
     inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
+    appId: window["##BUDIBASE_APP_ID##"],
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],

packages/client/src/sdk.js

@@ -2,7 +2,6 @@ import * as API from "./api"
 import { authStore, routeStore, screenStore, bindingStore } from "./store"
 import { styleable } from "./utils/styleable"
 import { linkable } from "./utils/linkable"
-import { getAppId } from "./utils/getAppId"
 import DataProvider from "./components/DataProvider.svelte"
 
 export default {
@@ -12,7 +11,6 @@ export default {
   screenStore,
   styleable,
   linkable,
-  getAppId,
   DataProvider,
   setBindableValue: bindingStore.actions.setBindableValue,
 }

packages/client/src/store/auth.js

@@ -1,8 +1,8 @@
 import * as API from "../api"
-import { getAppId } from "../utils/getAppId"
+import { writable, get } from "svelte/store"
-import { writable } from "svelte/store"
 import { initialise } from "./initialise"
 import { routeStore } from "./routes"
+import { builderStore } from "./builder"
 
 const createAuthStore = () => {
   const store = writable("")
@@ -25,7 +25,7 @@ const createAuthStore = () => {
   }
   const logOut = async () => {
     store.set("")
-    const appId = getAppId()
+    const appId = get(builderStore).appId
     if (appId) {
       for (let environment of ["local", "cloud"]) {
         window.document.cookie = `budibase:${appId}:${environment}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`

packages/client/src/store/builder.js

@@ -3,6 +3,7 @@ import { writable } from "svelte/store"
 const createBuilderStore = () => {
   const initialState = {
     inBuilder: false,
+    appId: null,
     layout: null,
     screen: null,
     selectedComponentId: null,

packages/client/src/store/screens.js

@@ -1,8 +1,7 @@
-import { writable, derived } from "svelte/store"
+import { writable, derived, get } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import * as API from "../api"
-import { getAppId } from "../utils/getAppId"
 
 const createScreenStore = () => {
   const config = writable({
@@ -40,7 +39,7 @@ const createScreenStore = () => {
   )
 
   const fetchScreens = async () => {
-    const appDefinition = await API.fetchAppDefinition(getAppId())
+    const appDefinition = await API.fetchAppDefinition(get(builderStore).appId)
     config.set({
       screens: appDefinition.screens,
       layouts: appDefinition.layouts,

packages/server/src/api/controllers/static/index.js

@@ -168,6 +168,7 @@ exports.serveApp = async function(ctx) {
     head,
     body: html,
     style: css.code,
+    appId: ctx.params.appId,
   })
 }
 

packages/server/src/api/controllers/static/templates/app.hbs

@@ -5,6 +5,9 @@
     {{{head}}}   
   </head>
 
-  {{{body}}}
+  <script>
+    window["##BUDIBASE_APP_ID##"] = "{{appId}}"
+  </script>
 
+  {{{body}}}
 </html>