feat: allow local development against live server

Author: danielroe

app/pages/[owner]/[repo]/index.vue

@@ -2,12 +2,16 @@
 import hexRgb from 'hex-rgb'
 import rgbToHSL from 'rgb-to-hsl'
 
-const { data: allowedRepos } = useFetch('/api/repos')
+const { data: allowedRepos } = useFetch('/api/repos', {
+  baseURL: useRuntimeConfig().public.remote,
+  default: () => [],
+})
 
 const route = useRoute('owner-repo')
 const selectedRepo = computed(() => route.params.owner && route.params.repo ? `${route.params.owner}/${route.params.repo}` : 'nuxt/nuxt')
 
 const { data: clusters, refresh, status } = useFetch(() => `/api/clusters/${selectedRepo.value}`, {
+  baseURL: useRuntimeConfig().public.remote,
   default: () => [],
 })
 

app/pages/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-const { data: allowedRepos, refresh } = useFetch('/api/repos', { default: () => [] })
+const { data: allowedRepos, refresh } = useFetch('/api/repos', {
+  baseURL: useRuntimeConfig().public.remote,
+  default: () => [],
+})
 
 const isCallback = ref(!!useRoute().query.installation_id)
 const numRepos = allowedRepos.value?.length

modules/local.ts

@@ -0,0 +1,22 @@
+import { defineNuxtModule, updateRuntimeConfig } from 'nuxt/kit'
+import consola from 'consola'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'local-dev',
+  },
+  setup(_options, nuxt) {
+    if (!nuxt.options.dev) {
+      return
+    }
+
+    if (process.argv.includes('--ui-only')) {
+      consola.info('Enabling UI-only mode for local development')
+      updateRuntimeConfig({
+        public: {
+          remote: 'https://unsight.dev',
+        },
+      })
+    }
+  },
+})

nuxt.config.ts

@@ -20,6 +20,9 @@ export default defineNuxtConfig({
     },
   },
   runtimeConfig: {
+    public: {
+      remote: '/',
+    },
     github: {
       appId: '',
       privateKey: '',

server/api/clusters/[owner]/[repo].get.ts

@@ -1,7 +1,8 @@
+import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { clusterEmbeddings } from '~~/server/utils/cluster'
 import { getStoredEmbeddingsForRepo, type IssueMetadata } from '~~/server/utils/embeddings'
 
-export default defineCachedEventHandler(async (event) => {
+export default defineCachedCorsEventHandler(async (event) => {
   const { owner, repo } = getRouterParams(event)
   if (!owner || !repo) {
     throw createError({

server/api/repos.get.ts

@@ -1,4 +1,6 @@
-export default defineCachedEventHandler(async () => {
+import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
+
+export default defineCachedCorsEventHandler(async () => {
   const kv = hubKV()
   const keys = await kv.getKeys('repo')
   return keys.flatMap((key) => {

server/api/similarity/[owner]/[repo]/[number].get.ts

@@ -1,22 +1,7 @@
+import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { getStoredMetadataForIssue, storageKeyForIssue, type IssueMetadata } from '~~/server/utils/embeddings'
 
-export default defineEventHandler(async (event) => {
-  const handled = handleCors(event, {
-    methods: ['GET', 'OPTIONS', 'HEAD'],
-    preflight: {
-      statusCode: 204,
-    },
-    origin: [import.meta.dev ? 'http://localhost:3000' : 'https://unsight.dev', 'https://github.com'],
-  })
-
-  if (handled || event.method !== 'GET') {
-    return
-  }
-
-  return issueHandler(event)
-})
-
-const issueHandler = defineCachedEventHandler(async (event) => {
+export default defineCachedCorsEventHandler(async (event) => {
   const { owner, repo, number } = getRouterParams(event)
 
   if (!owner || !repo || !number) {

server/utils/cached-cors.ts

@@ -0,0 +1,22 @@
+import type { EventHandler } from 'h3'
+import type { CacheOptions } from 'nitropack/types'
+
+export function defineCachedCorsEventHandler(eventHandler: EventHandler, cacheOptions?: CacheOptions) {
+  const handler = defineCachedEventHandler(eventHandler, cacheOptions)
+
+  return defineEventHandler(async (event) => {
+    const handled = handleCors(event, {
+      methods: ['GET', 'OPTIONS', 'HEAD'],
+      preflight: {
+        statusCode: 204,
+      },
+      origin: [import.meta.dev ? 'http://localhost:3000' : 'https://unsight.dev', 'https://github.com'],
+    })
+
+    if (handled || event.method !== 'GET') {
+      return
+    }
+
+    return handler(event)
+  })
+}