feat(config): implement runtime configuration via json file

Signed-off-by: Zacharias Fragkiadakis <[email protected]>

Author: QZera

README.md

@@ -41,7 +41,7 @@ feature set and not require its own database.
 You will need two domains, one for the Radicle Planning Boards and another for the Radicle Explorer.
 
 1. Deploy the `radicle-planning-boards` repository
-    - Set the `NUXT_PUBLIC_PARENT_ORIGIN` environment variable to your Radicle Explorer domain
+    - Set the `NUXT_PUBLIC_HOST_APP_ORIGIN` environment variable to your Radicle Explorer domain
 2. Deploy the [radicle-interface-with-planning-boards](https://github.com/maninak/radicle-interface-with-planning-boards)
 repository
     - Update `src/config.json` with your Radicle Planning Boards domain e.g.
@@ -60,6 +60,23 @@ repository
     }
     ```
 
+### Configuring at runtime
+
+You can overwrite `NUXT_PUBLIC_HOST_APP_ORIGIN` at runtime by creating a `config.json`
+file:
+
+- inside the `.output` directory during deployment,
+- or the `public` directory during development
+
+Example:
+
+```json
+// config.json
+{
+   "hostAppOrigin": "http://localhost:3080"
+}
+```
+
 ## Contributing
 
 Please refer to the [Contribution Guide](CONTRIBUTING.md).

components/ColumnIssueCard.vue

@@ -21,7 +21,7 @@ const status = computed<ColumnCardStatus>(() => ({
   icon: statusIconMap[props.issue.state.status],
 }))
 
-const hostAppBaseUrl = useHostAppBaseUrl()
+const hostAppOrigin = useHostAppOrigin()
 const isDebugging = useIsDebugging()
 
 // TODO: zac reduce duplication between ColumnIssueCard and ColumnPatchCard
@@ -53,7 +53,7 @@ const highlights = computed(() => {
 const href = computed(() =>
   new URL(
     `/nodes/${route.params.node}/${route.params.rid}/issues/${props.issue.id}`,
-    hostAppBaseUrl,
+    hostAppOrigin,
   ).toString(),
 )
 </script>

components/ColumnPatchCard.vue

@@ -26,7 +26,7 @@ const status = computed<ColumnCardStatus>(() => ({
   icon: statusIconMap[props.patch.state.status],
 }))
 
-const hostAppBaseUrl = useHostAppBaseUrl()
+const hostAppOrigin = useHostAppOrigin()
 const isDebugging = useIsDebugging()
 
 // TODO: zac reduce duplication between ColumnIssueCard and ColumnPatchCard
@@ -58,7 +58,7 @@ const highlights = computed(() => {
 const href = computed(() =>
   new URL(
     `/nodes/${route.params.node}/${route.params.rid}/patches/${props.patch.id}`,
-    hostAppBaseUrl,
+    hostAppOrigin,
   ).toString(),
 )
 </script>

composables/use-host-app-base-url.ts

@@ -31,14 +31,13 @@ const messageFromHostApp = v.union([
 export type MessageFromHostApp = v.InferInput<typeof messageFromHostApp>
 
 export function useHostAppMessaging() {
-  const { parentOrigin } = useRuntimeConfig().public
-
   function onHostAppMessage<MessageType extends MessageFromHostApp['type']>(
     type: MessageType,
     callback: (message: Extract<MessageFromHostApp, { type: MessageType }>) => void,
   ): void {
-    useEventListener('message', (event) => {
-      if (event.origin !== parentOrigin) {
+    useEventListener('message', async (event) => {
+      const { hostAppOrigin } = await resolveConfig()
+      if (event.origin !== hostAppOrigin) {
         return
       }
 
@@ -51,8 +50,9 @@ export function useHostAppMessaging() {
     })
   }
 
-  function notifyHostApp(message: MessageToHostApp): void {
-    globalThis.window.parent.postMessage(message, parentOrigin)
+  async function notifyHostApp(message: MessageToHostApp): Promise<void> {
+    const { hostAppOrigin } = await resolveConfig()
+    globalThis.window.parent.postMessage(message, hostAppOrigin)
   }
 
   return {

composables/use-host-app-messaging.ts

@@ -0,0 +1,9 @@
+import { defaultHostAppOrigin } from '~/constants/config'
+
+export function useHostAppOrigin(): string {
+  const { data: hostAppOrigin } = useAsyncData('config', resolveConfig, {
+    transform: (config) => config.hostAppOrigin,
+  })
+
+  return hostAppOrigin.value ?? defaultHostAppOrigin
+}

composables/use-host-app-origin.ts

@@ -5,6 +5,13 @@
  */
 export const defaultRadicleExplorerBaseUrl = 'https://explorer.radicle.gr/'
 
+/**
+ * The default origin for the app hosting the iframe for this app
+ *
+ * Used for linking to the host app
+ */
+export const defaultHostAppOrigin = 'http://localhost:3080'
+
 /**
  * The length of the hash value to keep when shortening it.
  *

constants/config.ts

@@ -1,6 +1,5 @@
 import process from 'node:process'
-
-const defaultParentOrigin = 'http://localhost:3080'
+import { defaultHostAppOrigin } from './constants/config'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -20,11 +19,7 @@ export default defineNuxtConfig({
   ],
   experimental: { typedPages: true },
   devtools: { enabled: true },
-  runtimeConfig: {
-    public: {
-      parentOrigin: defaultParentOrigin,
-    },
-  },
+  runtimeConfig: { public: { hostAppOrigin: defaultHostAppOrigin } },
   app: {
     head: {
       bodyAttrs: {
@@ -40,7 +35,7 @@ export default defineNuxtConfig({
       contentSecurityPolicy: {
         'frame-ancestors': [
           "'self'",
-          process.env?.['NUXT_PUBLIC_PARENT_ORIGIN'] ?? defaultParentOrigin,
+          process.env?.['NUXT_PUBLIC_HOST_APP_ORIGIN'] ?? defaultHostAppOrigin,
         ],
       },
       xFrameOptions: false,

nuxt.config.ts

@@ -0,0 +1,28 @@
+import * as v from 'valibot'
+
+interface Config {
+  hostAppOrigin: string
+}
+
+const jsonConfigSchema = v.object({ hostAppOrigin: v.optional(v.string()) })
+
+let config: Config | undefined
+
+export async function resolveConfig(): Promise<Config> {
+  if (config) {
+    return config
+  }
+
+  const { hostAppOrigin: publicHostAppOrigin } = useRuntimeConfig().public
+  const jsonConfig = await $fetch('/config.json').catch(() => undefined)
+  const parseResult = v.safeParse(jsonConfigSchema, jsonConfig)
+
+  if (parseResult.success) {
+    const hostAppOrigin = parseResult.output.hostAppOrigin ?? publicHostAppOrigin
+    config = { hostAppOrigin }
+  } else {
+    config = { hostAppOrigin: publicHostAppOrigin }
+  }
+
+  return config
+}