From 50f744c89dd87eaa145bd80b2f08b3ff8a8adb14 Mon Sep 17 00:00:00 2001 From: Lasse Rune Hansen Date: Sun, 14 Jun 2026 07:29:12 +0200 Subject: [PATCH] fix(frontend/api): Use relative paths for Docker proxy configuration - Updated API client to use '/api' base URL in production (Docker) - Updated StoryPlayer audio URL construction for Docker environment - nginx proxies /api requests to backend:8080 in Docker Compose Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe --- .../src/components/features/story/StoryPlayer.tsx | 7 ++++++- german-app-frontend/src/lib/api/story.ts | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/german-app-frontend/src/components/features/story/StoryPlayer.tsx b/german-app-frontend/src/components/features/story/StoryPlayer.tsx index b9cb476..30da665 100644 --- a/german-app-frontend/src/components/features/story/StoryPlayer.tsx +++ b/german-app-frontend/src/components/features/story/StoryPlayer.tsx @@ -30,8 +30,13 @@ export function StoryPlayer({ // Construct audio URL from segment audioUrl // Backend serves files from wwwroot, so URLs are like /audio/story/level1-segment1.wav + // In Docker, use relative path (nginx proxies to backend) + const baseUrl = import.meta.env.PROD + ? '' // Production: relative path, nginx handles it + : (import.meta.env.VITE_API_URL || 'http://localhost:5000'); + const audioUrl = segment.audioUrl - ? `${import.meta.env.VITE_API_URL || 'http://localhost:5000'}${segment.audioUrl}` + ? `${baseUrl}${segment.audioUrl}` : null; // Load audio metadata when component mounts or segment changes diff --git a/german-app-frontend/src/lib/api/story.ts b/german-app-frontend/src/lib/api/story.ts index 48d384a..0406511 100644 --- a/german-app-frontend/src/lib/api/story.ts +++ b/german-app-frontend/src/lib/api/story.ts @@ -11,7 +11,11 @@ import type { } from '../../types/api/story'; // Base API URL - should match your backend configuration -const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api'; +// In Docker (production), use relative path since nginx proxies /api to backend +// In development, use the VITE_API_URL or default to localhost:5000 +const API_BASE_URL = import.meta.env.PROD + ? '/api' // Production (Docker): nginx proxies /api to backend:8080 + : (import.meta.env.VITE_API_URL || 'http://localhost:5000/api'); /** * Fetches with automatic token handling for authenticated requests