stacklok · peppescg · Mar 5, 2025 · Mar 5, 2025
diff --git a/index.html b/index.html
@@ -7,6 +7,11 @@
   </head>
   <body class="theme-minder">
     <div id="root"></div>
+    <script>
+      window.APP_CONFIG = {
+        BASE_API_URL: '${BASE_API_URL}',
+      }
+    </script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,11 @@
+export interface AppConfig {
+  BASE_API_URL?: string
+}
+
+declare global {
+  interface Window {
+    APP_CONFIG: AppConfig
+  }
+}
+
+export {}
diff --git a/src/hooks/useSse.ts b/src/hooks/useSse.ts
@@ -6,16 +6,17 @@ import {
   v1GetWorkspaceMessagesQueryKey,
 } from '@/api/generated/@tanstack/react-query.gen'
 import { invalidateQueries } from '@/lib/react-query-utils'
+import { getAppConfig } from '@/lib/utils'
 
-const BASE_URL = import.meta.env.VITE_BASE_API_URL
+const baseApiUrl = getAppConfig().BASE_API_URL
 
 export function useSse() {
   const location = useLocation()
   const queryClient = useQueryClient()
 
   useEffect(() => {
     const eventSource = new EventSource(
-      `${BASE_URL}/api/v1/alerts_notification`
+      `${baseApiUrl}/api/v1/alerts_notification`
     )
 
     eventSource.onmessage = function (event) {

diff --git a/src/lib/__tests__/utils.test.ts b/src/lib/__tests__/utils.test.ts
@@ -0,0 +1,42 @@
+import { getAppConfig } from '../utils'
+import { AppConfig } from '@/global'
+
+describe('getAppConfig', () => {
+  const mockViteBaseApiUrl = 'https://api.mock.com'
+
+  it('default base api url if ${BASE_API_URL}" not configured', () => {
+    const mockAppConfig: AppConfig = {
+      BASE_API_URL: '${BASE_API_URL}',
+    }
+
+    Object.defineProperty(window, 'APP_CONFIG', {
+      value: mockAppConfig,
+      writable: true,
+    })
+
+    const expectedConfig: AppConfig = {
+      ...mockAppConfig,
+      BASE_API_URL: 'https://mock.codegate.ai',
+    }
+
+    expect(getAppConfig()).toEqual(expectedConfig)
+  })
+
+  it('replace base api url if ${BASE_API_URL}" is configured', () => {
+    const mockAppConfig: AppConfig = {
+      BASE_API_URL: mockViteBaseApiUrl,
+    }
+
+    Object.defineProperty(window, 'APP_CONFIG', {
+      value: mockAppConfig,
+      writable: true,
+    })
+
+    const expectedConfig: AppConfig = {
+      ...mockAppConfig,
+      BASE_API_URL: mockViteBaseApiUrl,
+    }
+
+    expect(getAppConfig()).toEqual(expectedConfig)
+  })
+})
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,4 +1,5 @@
 import { format } from 'date-fns'
+import { AppConfig } from '@/global'
 
 const FILEPATH_REGEX = /(?:---FILEPATH|Path:|\/\/\s*filepath:)\s*([^\s]+)/g
 const COMPARE_CODE_REGEX = /Compare this snippet[^:]*:/g
@@ -70,3 +71,19 @@ export function sanitizeQuestionPrompt({
     return question
   }
 }
+
+export function getAppConfig(): AppConfig {
+  const baseApiUrl = window.APP_CONFIG?.BASE_API_URL
+
+  if (!baseApiUrl || baseApiUrl === '${BASE_API_URL}') {
+    return {
+      ...window.APP_CONFIG,
+      BASE_API_URL: import.meta.env.VITE_BASE_API_URL,
+    }
+  }
+
+  return {
+    ...window.APP_CONFIG,
+    BASE_API_URL: baseApiUrl,
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,7 +4,6 @@ import './index.css'
 import './code.css'
 import '@stacklok/ui-kit/style'
 import App from './App.tsx'
-
 import ErrorBoundary from './components/ErrorBoundary.tsx'
 import { Error } from './components/Error.tsx'
 import { DarkModeProvider, Toaster } from '@stacklok/ui-kit'
@@ -14,10 +13,11 @@ import { BrowserRouter } from 'react-router-dom'
 import { UiKitClientSideRoutingProvider } from './lib/ui-kit-client-side-routing.tsx'
 import { ConfirmProvider } from './context/confirm-context.tsx'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { getAppConfig } from './lib/utils.ts'
 
 // Initialize the API client
 client.setConfig({
-  baseUrl: import.meta.env.VITE_BASE_API_URL,
+  baseUrl: getAppConfig().BASE_API_URL,
 })
 
 createRoot(document.getElementById('root')!).render(

diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -29,7 +29,8 @@
     "openapi-ts.config.ts",
     "tailwind.config.ts",
     "vitest.config.ts",
-    "vitest.setup.ts"
+    "vitest.setup.ts",
+    "./global.d.ts" 
   ],
   "exclude": ["node_modules"]
 }