feat: Add environment variable support for API URL deployment
- 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>
This commit is contained in:
11
frontend/.env.example
Normal file
11
frontend/.env.example
Normal file
@@ -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://
|
||||||
@@ -47,8 +47,19 @@ export function useWebSocket(roomId: string | null, options?: UseWebSocketOption
|
|||||||
wsRef.current.close()
|
wsRef.current.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
// Build WebSocket URL - use env variable or default to current host
|
||||||
const wsUrl = `${protocol}//${window.location.host}/api/ws/${roomId}?token=${token}`
|
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')
|
setConnectionStatus('connecting')
|
||||||
const ws = new WebSocket(wsUrl)
|
const ws = new WebSocket(wsUrl)
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import axios, { type AxiosError, type InternalAxiosRequestConfig } from 'axios'
|
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
|
// Create axios instance
|
||||||
const api = axios.create({
|
const api = axios.create({
|
||||||
|
|||||||
Reference in New Issue
Block a user