web: default API/WS endpoints to APP_PORT or 5555

vsilent · Copilot · vsilent · commit 4229627f7935 · 2026-03-31T16:06:51.000+03:00
- Inject APP_PORT and REACT_APP_API_PORT into webpack env
- API service default: http://localhost:${port}/api (port from env, fallback 5555)
- WS service default: ws://localhost:${port}/ws (port from env, fallback 5555)

Fixes frontend trying to connect to hardcoded port 5000.

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/web/src/services/api.ts b/web/src/services/api.ts
@@ -3,7 +3,16 @@ import { SecurityStatus, Threat, ThreatStatistics } from '../types/security';
 import { Alert, AlertStats, AlertFilter } from '../types/alerts';
 import { Container, QuarantineRequest } from '../types/containers';
 
-const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
+type EnvLike = {
+  REACT_APP_API_URL?: string;
+  APP_PORT?: string;
+  REACT_APP_API_PORT?: string;
+};
+
+const env = ((globalThis as unknown as { __STACKDOG_ENV__?: EnvLike }).__STACKDOG_ENV__ ??
+  {}) as EnvLike;
+const apiPort = env.REACT_APP_API_PORT || env.APP_PORT || '5555';
+const API_BASE_URL = env.REACT_APP_API_URL || `http://localhost:${apiPort}/api`;
 
 class ApiService {
   public api: AxiosInstance;
diff --git a/web/src/services/websocket.ts b/web/src/services/websocket.ts
@@ -6,6 +6,17 @@ type WebSocketEvent =
   | 'stats:updated';
 
 type EventHandler = (data: any) => void;
+type EnvLike = {
+  REACT_APP_WS_URL?: string;
+  APP_PORT?: string;
+  REACT_APP_API_PORT?: string;
+};
+
+declare global {
+  interface Window {
+    __STACKDOG_ENV__?: EnvLike;
+  }
+}
 
 export class WebSocketService {
   private ws: WebSocket | null = null;
@@ -17,7 +28,10 @@ export class WebSocketService {
   private shouldReconnect = true;
 
   constructor(url?: string) {
-    this.url = url || process.env.REACT_APP_WS_URL || 'ws://localhost:5000/ws';
+    const env = ((globalThis as { __STACKDOG_ENV__?: EnvLike }).__STACKDOG_ENV__ ??
+      {}) as EnvLike;
+    const apiPort = env.REACT_APP_API_PORT || env.APP_PORT || '5555';
+    this.url = url || env.REACT_APP_WS_URL || `ws://localhost:${apiPort}/ws`;
   }
 
   connect(): Promise<void> {
diff --git a/web/webpack.config.js b/web/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = {
   entry: './src/index.tsx',
@@ -27,6 +28,14 @@ module.exports = {
   },
   plugins: [
     new CleanWebpackPlugin(),
+    new webpack.DefinePlugin({
+      __STACKDOG_ENV__: JSON.stringify({
+        REACT_APP_API_URL: process.env.REACT_APP_API_URL || '',
+        REACT_APP_WS_URL: process.env.REACT_APP_WS_URL || '',
+        APP_PORT: process.env.APP_PORT || '',
+        REACT_APP_API_PORT: process.env.REACT_APP_API_PORT || '',
+      }),
+    }),
     new HtmlWebpackPlugin({
       templateContent:
         '<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Stackdog</title></head><body><div id="root"></div></body></html>',
