From b8f358861ee5e2d6b58ccbdcdc9f566b58841f34 Mon Sep 17 00:00:00 2001
From: Developer <developer@discord-automod.local>
Date: Tue, 28 Jul 2026 15:22:07 +0700
Subject: [PATCH] fix: route API/WS calls to backend port 3001 in local dev

Detect localhost and redirect API calls and WebSocket
connections from frontend port (3000) to backend port
(3001). Production behavior (via nginx proxy) unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 services/frontend/src/lib/api/client.ts    | 13 +++++++++++--
 services/frontend/src/lib/ws/connection.ts | 13 +++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/services/frontend/src/lib/api/client.ts b/services/frontend/src/lib/api/client.ts
index 0f3dfd2..253a2f7 100644
--- a/services/frontend/src/lib/api/client.ts
+++ b/services/frontend/src/lib/api/client.ts
@@ -11,8 +11,17 @@ export class ApiError extends Error {
 function getBaseUrl(): string {
   if (typeof window === "undefined") return "";
   const protocol = window.location.protocol.replace(":", "");
-  const host = window.location.host;
-  return `${protocol}://${host}`;
+  const hostname = window.location.hostname;
+  const port = window.location.port;
+
+  // In local dev, frontend (port 3000) proxies API calls to backend (port 3001)
+  if (hostname === "localhost" || hostname === "127.0.0.1") {
+    const apiPort = port === "3000" ? "3001" : port;
+    return `${protocol}://${hostname}:${apiPort}`;
+  }
+
+  // Production: nginx proxies /api/* to backend
+  return `${protocol}://${hostname}${port ? `:${port}` : ""}`;
 }
 
 export async function apiRequest<T>(
diff --git a/services/frontend/src/lib/ws/connection.ts b/services/frontend/src/lib/ws/connection.ts
index 051ba42..4cd3614 100644
--- a/services/frontend/src/lib/ws/connection.ts
+++ b/services/frontend/src/lib/ws/connection.ts
@@ -5,8 +5,17 @@ type WsEventCallback = (event: WsEvent) => void;
 function getWsUrl(): string {
   if (typeof window === "undefined") return "ws://localhost:3001/ws";
   const protocol = window.location.protocol === "https:" ? "wss" : "ws";
-  const host = window.location.host;
-  return `${protocol}://${host}/ws`;
+  const hostname = window.location.hostname;
+  const port = window.location.port;
+
+  // In local dev, WS server runs on port 3001 alongside the backend
+  if (hostname === "localhost" || hostname === "127.0.0.1") {
+    const wsPort = port === "3000" ? "3001" : port;
+    return `${protocol}://${hostname}:${wsPort}/ws`;
+  }
+
+  // Production: nginx proxies /ws/* to backend
+  return `${protocol}://${hostname}${port ? `:${port}` : ""}/ws`;
 }
 
 export class WsConnection {