Merge pull request #8124 from Budibase/plugin-url-updates

Plugin url updates

packages/client/src/components/ClientApp.svelte

@@ -16,7 +16,6 @@
     themeStore,
     appStore,
     devToolsStore,
-    environmentStore,
   } from "stores"
   import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
   import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
@@ -48,8 +47,6 @@
     !$builderStore.inBuilder &&
     $devToolsStore.enabled &&
     !$routeStore.queryParams?.peek
-  $: objectStoreUrl = $environmentStore.cloud ? "https://cdn.budi.live" : ""
-  $: pluginsUrl = `${objectStoreUrl}/plugins`
 
   // Handle no matching route
   $: {
@@ -95,8 +92,7 @@
 <svelte:head>
   {#if $builderStore.usedPlugins?.length}
     {#each $builderStore.usedPlugins as plugin (plugin.hash)}
-      <script
+      <script src={`${plugin.jsUrl}?r=${plugin.hash || ""}`}></script>
-        src={`${pluginsUrl}/${plugin.jsUrl}?r=${plugin.hash || ""}`}></script>
     {/each}
   {/if}
 </svelte:head>

packages/server/src/api/controllers/application.ts

@@ -50,6 +50,7 @@ import { errors, events, migrations } from "@budibase/backend-core"
 import { App, Layout, Screen, MigrationType } from "@budibase/types"
 import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
 import { groups } from "@budibase/pro"
+import { enrichPluginURLs } from "../../utilities/plugins"
 
 const URL_REGEX_SLASH = /\/|\\/g
 
@@ -208,10 +209,13 @@ export const fetchAppDefinition = async (ctx: any) => {
 
 export const fetchAppPackage = async (ctx: any) => {
   const db = context.getAppDB()
-  const application = await db.get(DocumentType.APP_METADATA)
+  let application = await db.get(DocumentType.APP_METADATA)
   const layouts = await getLayouts()
   let screens = await getScreens()
 
+  // Enrich plugin URLs
+  application.usedPlugins = enrichPluginURLs(application.usedPlugins)
+
   // Only filter screens if the user is not a builder
   if (!(ctx.user.builder && ctx.user.builder.global)) {
     const userRoleId = getUserRoleId(ctx)

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

@@ -1,3 +1,5 @@
+import { enrichPluginURLs } from "../../../utilities/plugins"
+
 require("svelte/register")
 
 const send = require("koa-send")
@@ -107,12 +109,13 @@ export const serveApp = async function (ctx: any) {
 
   if (!env.isJest()) {
     const App = require("./templates/BudibaseApp.svelte").default
+    const plugins = enrichPluginURLs(appInfo.usedPlugins)
     const { head, html, css } = App.render({
       title: appInfo.name,
       production: env.isProd(),
       appId,
       clientLibPath: clientLibraryPath(appId, appInfo.version, ctx),
-      usedPlugins: appInfo.usedPlugins,
+      usedPlugins: plugins,
     })
 
     const appHbs = loadHandlebarsFile(`${__dirname}/templates/app.hbs`)

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -88,9 +88,7 @@
   <!-- But before loadBudibase is called -->
   {#if usedPlugins?.length}
     {#each usedPlugins as plugin}
-      <script
+      <script type="application/javascript" src={plugin.jsUrl}></script>
-        type="application/javascript"
-        src={`/plugins/${plugin.jsUrl}`}></script>
     {/each}
   {/if}
   <script type="application/javascript">

packages/server/src/utilities/plugins.js

@@ -0,0 +1,21 @@
+const env = require("../environment")
+const { plugins: ProPlugins } = require("@budibase/pro")
+const { objectStore } = require("@budibase/backend-core")
+
+exports.enrichPluginURLs = plugins => {
+  if (!plugins || !plugins.length) {
+    return []
+  }
+  return plugins.map(plugin => {
+    const cloud = !env.SELF_HOSTED
+    const bucket = objectStore.ObjectStoreBuckets.PLUGINS
+    const jsFileName = "plugin.min.js"
+
+    // In self host we need to prefix the path, as the bucket name is not part
+    // of the bucket path. In cloud, it's already part of the bucket path.
+    let jsUrl = cloud ? "https://cdn.budi.live/" : `/${bucket}/`
+    jsUrl += ProPlugins.getBucketPath(plugin.name)
+    jsUrl += jsFileName
+    return { ...plugin, jsUrl }
+  })
+}