diff --git a/.env.example b/.env.example index d7d60cc..93b49f4 100644 --- a/.env.example +++ b/.env.example @@ -34,6 +34,6 @@ DEBOUNCE_MS=2000 # Debounce delay for frontend input # SEQ_API_KEY=your-seq-api-key # Development Overrides (used in docker-compose.dev.yml) -# VITE_API_URL=http://localhost:5172/api +# VITE_API_URL=http://localhost:5172 # VITE_API_KEY=frontend-dev-key # VITE_DEBOUNCE_MS=1000 diff --git a/docs/CONFIGURATION.md b/docs/CONFIGURATION.md index b441954..8034313 100644 --- a/docs/CONFIGURATION.md +++ b/docs/CONFIGURATION.md @@ -268,7 +268,7 @@ The frontend is configured via environment variables, typically stored in `src/f ```env VITE_API_KEY=frontend-dev-key -VITE_API_URL=http://localhost:5172/geoip-ui/api +VITE_API_URL=http://localhost:5172/geoip-ui VITE_DEBOUNCE_MS=2000 ``` @@ -282,12 +282,12 @@ VITE_DEBOUNCE_MS=2000 **`VITE_API_URL`** -- **Purpose**: Full URL to the backend API (including base path and `/api` suffix) +- **Purpose**: Base URL to the backend server - **Format**: HTTP/HTTPS URL - **Required**: Yes -- **Development Example**: `http://localhost:5172/geoip-ui/api` -- **Production Example**: `https://your-domain.com/geoip-ui/api` -- **Note**: Must match backend's `PORT` and `BASE_PATH` configuration +- **Development Example**: `http://localhost:5172/geoip-ui` +- **Production Example**: `https://your-domain.com/geoip-ui` +- **Note**: Must match backend's `PORT` and `BASE_PATH` configuration. **`VITE_DEBOUNCE_MS`** @@ -332,7 +332,7 @@ VITE_DEBOUNCE_MS=2000 ```env VITE_API_KEY=frontend-dev-key - VITE_API_URL=http://localhost:5172/geoip-ui/api + VITE_API_URL=http://localhost:5172/geoip-ui VITE_DEBOUNCE_MS=2000 ``` @@ -380,7 +380,7 @@ DEBOUNCE_MS=2000 ```env VITE_API_KEY= -VITE_API_URL=https://your-domain.com/api +VITE_API_URL=https://your-domain.com VITE_DEBOUNCE_MS=2000 ``` diff --git a/src/frontend/.env b/src/frontend/.env index 80adc8f..f411b99 100644 --- a/src/frontend/.env +++ b/src/frontend/.env @@ -1,5 +1,5 @@ # Frontend Environment Variables for Local Development VITE_API_KEY=frontend-dev-key -VITE_API_URL=http://localhost:5172/api +VITE_API_URL=http://localhost:5172 VITE_DEBOUNCE_MS=2000 VITE_BASE_PATH=/ diff --git a/src/frontend/src/services/api.ts b/src/frontend/src/services/api.ts index 7a3a37a..7ed2621 100644 --- a/src/frontend/src/services/api.ts +++ b/src/frontend/src/services/api.ts @@ -8,8 +8,23 @@ import { OverviewResponse, } from '../types'; +/** + * Combines base URL and path, ensuring proper slash handling + * @param baseUrl - Base URL (e.g., 'http://localhost:5172' or 'http://localhost:5172/') + * @param path - Path to append (e.g., '/api' or 'api') + * @returns Combined URL path + */ +const pathCombine = (baseUrl: string, path: string): string => { + const trimmedBase = baseUrl.replace(/\/+$/, ''); // Remove trailing slashes + const trimmedPath = path.replace(/^\/+/, ''); // Remove leading slashes + return `${trimmedBase}/${trimmedPath}`; +}; + +const isDevelopment = import.meta.env.MODE === 'development'; const API_KEY = import.meta.env.VITE_API_KEY || 'frontend-default-key'; -const BASE_URL = import.meta.env.VITE_API_URL || '/api'; +const BASE_URL = isDevelopment + ? pathCombine(import.meta.env.VITE_API_URL, '/api') + : '/api'; const apiClient = axios.create({ baseURL: BASE_URL,