From 822ea1951c907a880e268d22a6ae8f23200a6090 Mon Sep 17 00:00:00 2001
From: shahargl <shaharglazner@gmail.com>
Date: Tue, 22 Oct 2024 16:32:39 +0300
Subject: [PATCH] feat: better arch

---
 keep-ui/pages/api/config.tsx     | 7 ++++++-
 keep-ui/types/internal-config.ts | 4 ++++
 keep-ui/utils/hooks/useConfig.ts | 9 ++++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/keep-ui/pages/api/config.tsx b/keep-ui/pages/api/config.tsx
index cfe58a1d5..e052a7022 100644
--- a/keep-ui/pages/api/config.tsx
+++ b/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,
diff --git a/keep-ui/types/internal-config.ts b/keep-ui/types/internal-config.ts
index 7b89af9e3..e8a368cd0 100644
--- a/keep-ui/types/internal-config.ts
+++ b/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;
 }
diff --git a/keep-ui/utils/hooks/useConfig.ts b/keep-ui/utils/hooks/useConfig.ts
index a1bb7acb1..7356783e2 100644
--- a/keep-ui/utils/hooks/useConfig.ts
+++ b/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";
 };