Use server-provided client lib URL in iframe preview

packages/builder/src/builderStore/store/frontend.js

@@ -42,6 +42,7 @@ const INITIAL_FRONTEND_STATE = {
   libraries: null,
   appId: "",
   routes: {},
+  clientLibPath: "",
 }
 
 export const getFrontendStore = () => {
@@ -49,7 +50,7 @@ export const getFrontendStore = () => {
 
   store.actions = {
     initialise: async pkg => {
-      const { layouts, screens, application } = pkg
+      const { layouts, screens, application, clientLibPath } = pkg
       const components = await fetchComponentLibDefinitions(application._id)
       store.update(state => ({
         ...state,
@@ -63,6 +64,7 @@ export const getFrontendStore = () => {
         screens,
         hasAppPackage: true,
         appInstance: application.instance,
+        clientLibPath,
       }))
       await hostingStore.actions.fetch()
 

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

@@ -18,6 +18,12 @@
     .instanceName("Content Placeholder")
     .json()
 
+  // Construct iframe template
+  $: template = iframeTemplate.replace(
+    /\{\{ CLIENT_LIB_PATH }}/,
+    $store.clientLibPath
+  )
+
   // Extract data to pass to the iframe
   $: {
     if ($store.currentFrontEndType === FrontendTypes.LAYOUT) {
@@ -76,7 +82,7 @@
     style="height: 100%; width: 100%"
     title="componentPreview"
     bind:this={iframe}
-    srcdoc={iframeTemplate} />
+    srcdoc={template} />
 </div>
 
 <style>

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -13,7 +13,7 @@ export default `
         box-sizing: border-box;
       }
     </style>
-    <script src='/assets/budibase-client.js'></script>
+    <script src='{{ CLIENT_LIB_PATH }}'></script>
     <script>
       function receiveMessage(event) { 
         if (!event.data) {