@checkmate-monitor/frontend 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @checkmate-monitor/frontend
 
+## 0.1.1
+
+### Patch Changes
+
+- 0f8cc7d: Add runtime configuration API for Docker deployments
+
+  - Backend: Add `/api/config` endpoint serving `BASE_URL` at runtime
+  - Backend: Update CORS to use `BASE_URL` and auto-allow Vite dev server
+  - Backend: `INTERNAL_URL` now defaults to `localhost:3000` (no BASE_URL fallback)
+  - Frontend API: Add `RuntimeConfigProvider` context for runtime config
+  - Frontend: Use `RuntimeConfigProvider` from `frontend-api`
+  - Auth Frontend: Add `useAuthClient()` hook using runtime config
+
+- Updated dependencies [0f8cc7d]
+  - @checkmate-monitor/frontend-api@0.0.3
+  - @checkmate-monitor/auth-frontend@0.1.1
+  - @checkmate-monitor/catalog-frontend@0.0.3
+  - @checkmate-monitor/command-frontend@0.0.3
+  - @checkmate-monitor/ui@0.1.1
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkmate-monitor/frontend",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.tsx

@@ -19,6 +19,9 @@ import {
   DashboardSlot,
   NavbarSlot,
   NavbarMainSlot,
+  RuntimeConfigProvider,
+  useRuntimeConfigLoading,
+  useRuntimeConfig,
 } from "@checkmate-monitor/frontend-api";
 import { ConsoleLoggerApi } from "./apis/logger-api";
 import { CoreFetchApi } from "./apis/fetch-api";
@@ -131,7 +134,13 @@ function AppContent() {
   );
 }
 
-function App() {
+/**
+ * App wrapper that provides APIs and waits for runtime config to load.
+ */
+function AppWithApis() {
+  const isConfigLoading = useRuntimeConfigLoading();
+  const { baseUrl } = useRuntimeConfig();
+
   const apiRegistry = useMemo(() => {
     // Initialize API Registry with core apiRefs
     const registryBuilder = new ApiRegistryBuilder()
@@ -142,10 +151,10 @@ function App() {
         useManagePermission: () => ({ loading: false, allowed: true }),
       })
       .registerFactory(fetchApiRef, (_registry) => {
-        return new CoreFetchApi();
+        return new CoreFetchApi(baseUrl);
       })
       .registerFactory(rpcApiRef, (_registry) => {
-        return new CoreRpcApi();
+        return new CoreRpcApi(baseUrl);
       });
 
     // Register API factories from plugins
@@ -165,11 +174,20 @@ function App() {
     }
 
     return registryBuilder.build();
-  }, []);
+  }, [baseUrl]);
+
+  // Show loading while fetching runtime config
+  if (isConfigLoading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <LoadingSpinner />
+      </div>
+    );
+  }
 
   return (
     <ApiProvider registry={apiRegistry}>
-      <SignalProvider>
+      <SignalProvider backendUrl={baseUrl}>
         <ToastProvider>
           <AppContent />
         </ToastProvider>
@@ -178,4 +196,12 @@ function App() {
   );
 }
 
+function App() {
+  return (
+    <RuntimeConfigProvider>
+      <AppWithApis />
+    </RuntimeConfigProvider>
+  );
+}
+
 export default App;

package/src/apis/fetch-api.ts

@@ -1,7 +1,11 @@
 import { FetchApi } from "@checkmate-monitor/frontend-api";
 
 export class CoreFetchApi implements FetchApi {
-  constructor() {}
+  private baseUrl: string;
+
+  constructor(baseUrl: string = "http://localhost:3000") {
+    this.baseUrl = baseUrl;
+  }
 
   async fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
     const headers = new Headers(init?.headers);
@@ -18,9 +22,7 @@ export class CoreFetchApi implements FetchApi {
   } {
     return {
       fetch: (path: string, init?: RequestInit) => {
-        const baseUrl =
-          import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
-        return this.fetch(`${baseUrl}/api/${pluginId}${path}`, init);
+        return this.fetch(`${this.baseUrl}/api/${pluginId}${path}`, init);
       },
     };
   }

package/src/apis/rpc-api.ts

@@ -7,10 +7,7 @@ export class CoreRpcApi implements RpcApi {
   public client: unknown;
   private pluginClientCache: Map<string, unknown> = new Map();
 
-  constructor() {
-    const baseUrl =
-      import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
-
+  constructor(baseUrl: string = "http://localhost:3000") {
     const link = new RPCLink({
       url: `${baseUrl}/api`,
       fetch: (input: RequestInfo | URL, init?: RequestInit) =>

package/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "node:path";
 
@@ -6,10 +6,9 @@ import path from "node:path";
 const monorepoRoot = path.resolve(__dirname, "../..");
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  // Load env from monorepo root
-  const env = loadEnv(mode, monorepoRoot, "");
-  const target = env.VITE_API_BASE_URL || "http://localhost:3000";
+export default defineConfig(() => {
+  // Backend URL for proxy - always targets local backend in dev
+  const backendUrl = "http://localhost:3000";
   return {
     // Tell Vite to look for .env files in monorepo root
     envDir: monorepoRoot,
@@ -19,10 +18,10 @@ export default defineConfig(({ mode }) => {
         // Proxy API requests and WebSocket connections to backend
         // Use regex to ensure /api-docs doesn't match (it starts with /api but isn't an API call)
         "^/api/": {
-          target,
+          target: backendUrl,
           ws: true, // Enable WebSocket proxy
         },
-        "/assets": target,
+        "/assets": backendUrl,
       },
     },
     // ============================================================