From 1e44a63a8eb37c125671ef8acaf2bf88c229dc39 Mon Sep 17 00:00:00 2001
From: egg <lin4637lin4637@gmail.com>
Date: Thu, 4 Dec 2025 18:38:43 +0800
Subject: [PATCH] feat: Add environment variable support for API URL deployment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add VITE_API_BASE_URL environment variable support to api.ts
- Update WebSocket hook to use env variable for separate backend deployment
- Add frontend/.env.example with configuration documentation

This enables:
- Local development: uses /api (relative path)
- Production deployment: set VITE_API_BASE_URL to backend URL

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/.env.example              | 11 +++++++++++
 frontend/src/hooks/useWebSocket.ts | 15 +++++++++++++--
 frontend/src/services/api.ts       |  3 ++-
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 frontend/.env.example

diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 0000000..64f120c
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1,11 @@
+# Frontend Environment Variables
+
+# API Base URL (optional)
+# - For local development: leave empty or don't set (will use /api)
+# - For production with separate backend: set to full URL
+# Example: https://api.yourdomain.com/api
+VITE_API_BASE_URL=
+
+# Note: When set, this URL is also used for WebSocket connections
+# http:// will be converted to ws://
+# https:// will be converted to wss://
diff --git a/frontend/src/hooks/useWebSocket.ts b/frontend/src/hooks/useWebSocket.ts
index 6064d74..5db8b09 100644
--- a/frontend/src/hooks/useWebSocket.ts
+++ b/frontend/src/hooks/useWebSocket.ts
@@ -47,8 +47,19 @@ export function useWebSocket(roomId: string | null, options?: UseWebSocketOption
       wsRef.current.close()
     }
 
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    const wsUrl = `${protocol}//${window.location.host}/api/ws/${roomId}?token=${token}`
+    // Build WebSocket URL - use env variable or default to current host
+    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
+    let wsUrl: string
+
+    if (apiBaseUrl && apiBaseUrl.startsWith('http')) {
+      // Convert http(s) to ws(s)
+      const wsBase = apiBaseUrl.replace(/^http/, 'ws')
+      wsUrl = `${wsBase}/ws/${roomId}?token=${token}`
+    } else {
+      // Default: use current host
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+      wsUrl = `${protocol}//${window.location.host}/api/ws/${roomId}?token=${token}`
+    }
 
     setConnectionStatus('connecting')
     const ws = new WebSocket(wsUrl)
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 26cb717..5f07f56 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,6 +1,7 @@
 import axios, { type AxiosError, type InternalAxiosRequestConfig } from 'axios'
 
-const API_BASE_URL = '/api'
+// API Base URL: use environment variable or default to relative path
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api'
 
 // Create axios instance
 const api = axios.create({