feat: better arch

keep-ui/pages/api/config.tsx

@@ -31,8 +31,13 @@ export default async function handler(
       : undefined,
     PUSHER_APP_KEY: process.env.PUSHER_APP_KEY,
     PUSHER_CLUSTER: process.env.PUSHER_CLUSTER,
-    // could be relative (for ingress) or absolute (e.g. for cloud run)
+    // The API URL is used by the server to make requests to the API
+    //   note that we need two different URLs for the client and the server
+    //   because in some environments, e.g. docker-compose, the server can get keep-backend
+    //   whereas the client (browser) can get only localhost
     API_URL: process.env.API_URL,
+    // could be relative (e.g. for ingress) or absolute (e.g. for cloud run)
+    API_URL_CLIENT: process.env.API_URL_CLIENT,
     POSTHOG_KEY: process.env.POSTHOG_KEY,
     POSTHOG_DISABLED: process.env.POSTHOG_DISABLED,
     POSTHOG_HOST: process.env.POSTHOG_HOST,

keep-ui/types/internal-config.ts

@@ -9,5 +9,9 @@ export interface InternalConfig {
   POSTHOG_KEY: string;
   POSTHOG_HOST: string;
   POSTHOG_DISABLED: string;
+  // the API URL is used by the server to make requests to the API
   API_URL: string;
+  // the API URL for the client (browser)
+  // optional, defaults to /backend (relative)
+  API_URL_CLIENT?: string;
 }

keep-ui/utils/hooks/useConfig.ts

@@ -13,5 +13,12 @@ export const useConfig = () => {
 
 export const useApiUrl = () => {
   const { data: config } = useConfig();
-  return config?.API_URL;
+
+  if (config?.API_URL_CLIENT) {
+    return config.API_URL_CLIENT;
+  }
+
+  // backward compatibility or for docker-compose or other deployments where the browser
+  // can't access the API directly
+  return "/backend";
 };