Merge pull request #4121 from headlamp-k8s/improve-headlamp-port-clashes

illume · web-flow · commit 36b22a67617b · 2025-11-07T07:07:00.000-03:00
Improve headlamp port clashes
diff --git a/app/electron/main.ts b/app/electron/main.ts
diff --git a/app/electron/preload.ts b/app/electron/preload.ts
@@ -30,6 +30,7 @@ contextBridge.exposeInMainWorld('desktopApi', {
       'plugin-manager',
       'request-backend-token',
       'request-plugin-permission-secrets',
+      'request-backend-port',
     ];
     if (validChannels.includes(channel)) {
       ipcRenderer.send(channel, data);
@@ -48,6 +49,7 @@ contextBridge.exposeInMainWorld('desktopApi', {
       'backend-token',
       'plugin-permission-secrets',
       'open-about-dialog',
+      'backend-port',
     ];
     if (validChannels.includes(channel)) {
       // Deliberately strip event as it includes `sender`
diff --git a/app/scripts/start.js b/app/scripts/start.js
@@ -170,6 +170,9 @@ if (process.platform !== 'win32') {
 const frontendProcess = spawn(frontendCmd, [], {
   stdio: 'inherit',
   shell: true,
+  env: {
+    ...process.env,
+  },
 });
 
 let appProcess = null;
diff --git a/frontend/src/helpers/getAppUrl.ts b/frontend/src/helpers/getAppUrl.ts
@@ -19,6 +19,16 @@ import { isDevMode } from './isDevMode';
 import { isDockerDesktop } from './isDockerDesktop';
 import { isElectron } from './isElectron';
 
+declare global {
+  interface Window {
+    /**
+     * headlampBackendPort is set by Electron to specify the backend server port.
+     * It allows the frontend to connect to the backend on a configurable port.
+     */
+    headlampBackendPort?: number;
+  }
+}
+
 /**
  * @returns URL depending on dev-mode/electron/docker desktop, base-url, and window.location.origin.
  *
@@ -31,9 +41,30 @@ import { isElectron } from './isElectron';
  *
  */
 export function getAppUrl(): string {
-  let url = isDevMode() || isElectron() ? 'http://localhost:4466' : window.location.origin;
+  let url = '';
+  let backendPort = 4466;
+  let useLocalhost = false;
+
+  if (isElectron()) {
+    if (window?.headlampBackendPort) {
+      backendPort = window.headlampBackendPort;
+    }
+    useLocalhost = true;
+  }
+
+  if (isDevMode()) {
+    useLocalhost = true;
+  }
+
   if (isDockerDesktop()) {
-    url = 'http://localhost:64446';
+    backendPort = 64446;
+    useLocalhost = true;
+  }
+
+  if (useLocalhost) {
+    url = `http://localhost:${backendPort}`;
+  } else {
+    url = window.location.origin;
   }
 
   const baseUrl = getBaseUrl();
diff --git a/frontend/src/i18n/locales/de/app.json b/frontend/src/i18n/locales/de/app.json
@@ -46,6 +46,12 @@
   "Continue": "Weiter",
   "Failed to quit the other running process": "Konnte den anderen laufenden Prozess nicht beenden",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "Konnte den anderen laufenden Prozess nicht beenden, PIDs: {{ process_list }}. Bitte stoppen Sie diesen Prozess und starten Sie die App neu.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "Ungültige URL",
   "Application opened with an invalid URL: {{ url }}": "Anwendung mit einer ungültigen URL geöffnet: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/en/app.json b/frontend/src/i18n/locales/en/app.json
@@ -46,6 +46,12 @@
   "Continue": "Continue",
   "Failed to quit the other running process": "Failed to quit the other running process",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "Invalid URL",
   "Application opened with an invalid URL: {{ url }}": "Application opened with an invalid URL: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/es/app.json b/frontend/src/i18n/locales/es/app.json
@@ -46,6 +46,12 @@
   "Continue": "Continuar",
   "Failed to quit the other running process": "Fallo al quitar el otro proceso en ejecución",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "No se ha podido terminar el otro proceso, PIDs:  {{ process_list }}. Por favor, termine el otro proceso y vuelva a lanzar la aplicación.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "URL inválida",
   "Application opened with an invalid URL: {{ url }}": "Aplicación abierta con una URL inválida: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/fr/app.json b/frontend/src/i18n/locales/fr/app.json
@@ -46,6 +46,12 @@
   "Continue": "Continuer",
   "Failed to quit the other running process": "Échec de la fermeture de l'autre processus en cours",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "Impossible de quitter l'autre processus en cours, PIDs : {{ process_list }}. Veuillez arrêter ce processus et relancer l'application.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "URL invalide",
   "Application opened with an invalid URL: {{ url }}": "Application ouverte avec une URL invalide : {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/hi/app.json b/frontend/src/i18n/locales/hi/app.json
@@ -46,6 +46,12 @@
   "Continue": "जारी रखें",
   "Failed to quit the other running process": "अन्य चल रही प्रक्रिया से बाहर निकलने में विफल",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "अन्य चल रही प्रक्रिया से बाहर नहीं निकल सका, PIDs: {{ process_list }}। कृपया उस प्रक्रिया को रोकें और ऐप को फिर से लॉन्च करें।",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "अमान्य URL",
   "Application opened with an invalid URL: {{ url }}": "अनुप्रयोग एक अमान्य URL के साथ खोला गया: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/it/app.json b/frontend/src/i18n/locales/it/app.json
@@ -46,6 +46,12 @@
   "Continue": "Continua",
   "Failed to quit the other running process": "Impossibile terminare l'altro processo in esecuzione",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "Impossibile terminare l'altro processo in esecuzione, PID: {{ process_list }}. Ferma quel processo e riavvia l'app.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "URL Non Valido",
   "Application opened with an invalid URL: {{ url }}": "Applicazione avviata con un URL non valido: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/ja/app.json b/frontend/src/i18n/locales/ja/app.json
@@ -46,6 +46,12 @@
   "Continue": "続行",
   "Failed to quit the other running process": "他の実行中のプロセスの終了に失敗しました",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "他の実行中のプロセス PID: {{ process_list }} を終了できませんでした。そのプロセスを停止してアプリを再起動してください。",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "無効な URL",
   "Application opened with an invalid URL: {{ url }}": "無効な URL でアプリケーションが開かれました: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/ko/app.json b/frontend/src/i18n/locales/ko/app.json
@@ -46,6 +46,12 @@
   "Continue": "계속",
   "Failed to quit the other running process": "다른 실행 중인 프로세스를 종료하지 못했습니다",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "다른 실행 중인 프로세스를 종료할 수 없습니다. PID: {{ process_list }}. 해당 프로세스를 종료한 후 앱을 다시 실행하세요.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "잘못된 URL",
   "Application opened with an invalid URL: {{ url }}": "잘못된 URL로 애플리케이션이 열렸습니다: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/pt/app.json b/frontend/src/i18n/locales/pt/app.json
@@ -46,6 +46,12 @@
   "Continue": "Continuar",
   "Failed to quit the other running process": "Falha ao eliminar o outro processo em execução",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "Não foi possível eliminar o outro processo em execução. PIDs: {{ process_list }}. Por favor pare esse processo e reinicie o programa.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "URL inválido",
   "Application opened with an invalid URL: {{ url }}": "Aplicação aberta com um URL inválido: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/ta/app.json b/frontend/src/i18n/locales/ta/app.json
@@ -46,6 +46,12 @@
   "Continue": "தொடர்க",
   "Failed to quit the other running process": "மற்ற இயங்கும் ப்ராசஸிலிருந்து வெளியேற முடியவில்லை",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "மற்ற இயங்கும் ப்ராசஸிலிருந்து வெளியேற முடியவில்லை, PIDs: {{ process_list }}. தயவுசெய்து அந்த ப்ராசஸை நிறுத்தி பயன்பாட்டை மீண்டும் தொடங்கவும்.",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "தவறான URL",
   "Application opened with an invalid URL: {{ url }}": "பயன்பாடு தவறான URL உடன் திறக்கப்பட்டது: {{ url }}"
 }
diff --git a/frontend/src/i18n/locales/zh-tw/app.json b/frontend/src/i18n/locales/zh-tw/app.json
@@ -46,6 +46,12 @@
   "Continue": "",
   "Failed to quit the other running process": "",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "",
   "Application opened with an invalid URL: {{ url }}": ""
 }
diff --git a/frontend/src/i18n/locales/zh/app.json b/frontend/src/i18n/locales/zh/app.json
@@ -46,6 +46,12 @@
   "Continue": "继续",
   "Failed to quit the other running process": "退出运行中的进程失败",
   "Could not quit the other running process, PIDs: {{ process_list }}. Please stop that process and relaunch the app.": "无法退出运行中的进程，PIDs: {{ process_list }}。请手动关闭进程并重启应用",
+  "No available ports": "",
+  "Could not find an available port. There are processes running on ports {{startPort}}-{{endPort}}. Terminate these processes and retry?": "",
+  "Terminate and Retry": "",
+  "Failed to start": "",
+  "Could not start the server even after terminating existing processes.": "",
+  "Could not find an available port in the range {{startPort}}-{{endPort}}. Please free up a port and try again.": "",
   "Invalid URL": "非法的URL",
   "Application opened with an invalid URL: {{ url }}": "应用程序打开了一个非法URL: {{ url }}"
 }
diff --git a/frontend/src/lib/k8s/api/v1/clusterRequests.ts b/frontend/src/lib/k8s/api/v1/clusterRequests.ts
@@ -18,6 +18,7 @@
 
 import { addBackstageAuthHeaders } from '../../../../helpers/addBackstageAuthHeaders';
 import { isDebugVerbose } from '../../../../helpers/debugVerbose';
+import { getAppUrl } from '../../../../helpers/getAppUrl';
 import { isBackstage } from '../../../../helpers/isBackstage';
 import store from '../../../../redux/stores/store';
 import { findKubeconfigByClusterName } from '../../../../stateless/findKubeconfigByClusterName';
@@ -26,7 +27,7 @@ import { logout } from '../../../auth';
 import { getCluster } from '../../../cluster';
 import type { KubeObjectInterface } from '../../KubeObject';
 import type { ApiError } from '../v2/ApiError';
-import { BASE_HTTP_URL, CLUSTERS_PREFIX, DEFAULT_TIMEOUT, JSON_HEADERS } from './constants';
+import { CLUSTERS_PREFIX, DEFAULT_TIMEOUT, JSON_HEADERS } from './constants';
 import { asQuery, combinePath } from './formatUrl';
 import type { QueryParameters } from './queryParameters';
 
@@ -156,7 +157,7 @@ export async function clusterRequest(
   const controller = new AbortController();
   const id = setTimeout(() => controller.abort(), timeout);
 
-  let url = combinePath(BASE_HTTP_URL, fullPath);
+  let url = combinePath(getAppUrl(), fullPath);
   url += asQuery(queryParams);
   const requestData = {
     signal: controller.signal,
diff --git a/frontend/src/lib/k8s/api/v1/constants.ts b/frontend/src/lib/k8s/api/v1/constants.ts
@@ -16,7 +16,11 @@
 
 import { getAppUrl } from '../../../../helpers/getAppUrl';
 
+// @deprecated BASE_HTTP_URL is deprecated for Electron apps with custom ports.
+// It's evaluated at module load time, before window.headlampBackendPort is set.
+// Use getAppUrl() directly instead for runtime port configuration.
 export const BASE_HTTP_URL = getAppUrl();
+
 export const CLUSTERS_PREFIX = 'clusters';
 export const JSON_HEADERS = { Accept: 'application/json', 'Content-Type': 'application/json' };
 export const DEFAULT_TIMEOUT = 2 * 60 * 1000; // ms
diff --git a/frontend/src/lib/k8s/api/v1/streamingApi.ts b/frontend/src/lib/k8s/api/v1/streamingApi.ts
@@ -15,16 +15,24 @@
  */
 
 import { isDebugVerbose } from '../../../../helpers/debugVerbose';
+import { getAppUrl } from '../../../../helpers/getAppUrl';
 import { findKubeconfigByClusterName } from '../../../../stateless/findKubeconfigByClusterName';
 import { getUserIdFromLocalStorage } from '../../../../stateless/getUserIdFromLocalStorage';
 import { getCluster } from '../../../cluster';
 import type { KubeObjectInterface } from '../../KubeObject';
 import type { ApiError } from '../v2/ApiError';
 import { clusterRequest } from './clusterRequests';
-import { BASE_HTTP_URL, CLUSTERS_PREFIX } from './constants';
+import { CLUSTERS_PREFIX } from './constants';
 import { asQuery, combinePath } from './formatUrl';
 import type { QueryParameters } from './queryParameters';
 
+/**
+ * Get the WebSocket base URL dynamically to support runtime port configuration
+ */
+function getBaseWsUrl(): string {
+  return getAppUrl().replace('http', 'ws');
+}
+
 export type StreamUpdate<T = any> = {
   type: 'ADDED' | 'MODIFIED' | 'DELETED' | 'ERROR';
   object: T;
@@ -34,8 +42,6 @@ export type StreamResultsCb<T = any> = (data: T) => void;
 export type StreamUpdatesCb<T = any> = (data: T | StreamUpdate<T>) => void;
 export type StreamErrCb = (err: Error & { status?: number }, cancelStreamFunc?: () => void) => void;
 
-const BASE_WS_URL = BASE_HTTP_URL.replace('http', 'ws');
-
 /**
  * Fetches the data and watches for changes to the data.
  *
@@ -428,11 +434,11 @@ export async function connectStreamWithParams<T>(
         protocols.push(`base64url.headlamp.authorization.k8s.io.${userID}`);
       }
 
-      url = combinePath(BASE_WS_URL, fullPath);
+      url = combinePath(getBaseWsUrl(), fullPath);
     } catch (error) {
       console.error('Error while finding kubeconfig:', error);
       // If we can't find the kubeconfig, we'll just use the base URL.
-      url = combinePath(BASE_WS_URL, fullPath);
+      url = combinePath(getBaseWsUrl(), fullPath);
     }
   }
 
diff --git a/frontend/src/lib/k8s/api/v2/fetch.ts b/frontend/src/lib/k8s/api/v2/fetch.ts
@@ -21,6 +21,9 @@ import { getUserIdFromLocalStorage } from '../../../../stateless/getUserIdFromLo
 import { ApiError } from './ApiError';
 import { makeUrl } from './makeUrl';
 
+// @deprecated BASE_HTTP_URL is deprecated for Electron apps with custom ports.
+// It's evaluated at module load time, before window.headlampBackendPort is set.
+// Use getAppUrl() directly instead for runtime port configuration.
 export const BASE_HTTP_URL = getAppUrl();
 
 /**
@@ -36,7 +39,7 @@ export async function backendFetch(url: string | URL, init: RequestInit = {}) {
   // Always include credentials
   init.credentials = 'include';
   init.headers = addBackstageAuthHeaders(init.headers);
-  const response = await fetch(makeUrl([BASE_HTTP_URL, url]), init);
+  const response = await fetch(makeUrl([getAppUrl(), url]), init);
 
   // The backend signals through this header that it wants a reload.
   // See plugins.go
diff --git a/frontend/src/lib/k8s/api/v2/webSocket.ts b/frontend/src/lib/k8s/api/v2/webSocket.ts
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
