Fix frontend-to-backend networking in Docker

Frontend in Docker container can't reach localhost:8000 on the host.
Implemented Docker networking fix using host.docker.internal.

Changes:
  • Updated frontend/src/App.tsx to use host.docker.internal:8000 in production
    - Automatically switches between localhost:8000 (dev) and host.docker.internal:8000 (Docker)
  • Added frontend/.env.example with API configuration
  • Updated docker-compose.yml frontend environment:
    - Added VITE_API_URL=http://host.docker.internal:8000
    - Added comments explaining the networking approach
  • Enhanced DOCKER_QUICK_START.md troubleshooting section
    - Added detailed networking explanation
    - Instructions for verifying host.docker.internal works
    - Linux-specific workarounds

How it works:
  • Docker Desktop automatically maps host.docker.internal to localhost on the host machine
  • Frontend (running in Docker) uses host.docker.internal:8000
  • API & Consumer (running on host) listen on localhost:8000
  • Both reference the same service, just from different network contexts

Workflow remains:
  Terminal 1: docker compose up (infra + frontend in Docker)
  Terminal 2: uvicorn api.main:app --reload (your host machine)
  Terminal 3: cd consumer && python pipeline.py (your host machine)

Frontend automatically reaches API at http://host.docker.internal:8000
without any manual configuration needed.

Co-authored-by: Copilot <[email protected]>

frontend/.env.example

@@ -0,0 +1,10 @@
+# Frontend environment configuration
+
+# API Base URL - overrides the default in App.tsx
+# Default behavior:
+#   - Development (npm run dev): http://localhost:8000
+#   - Production (Docker): http://host.docker.internal:8000
+# VITE_API_URL=http://localhost:8000
+
+# Node environment (set by docker-compose.yml)
+NODE_ENV=production

frontend/src/App.tsx

@@ -28,7 +28,10 @@ interface Result {
   timestamp: string;
 }
 
-const API_BASE_URL = 'http://localhost:8000';
+// Use host.docker.internal when running in Docker, localhost when running locally
+const API_BASE_URL = process.env.NODE_ENV === 'production' 
+  ? 'http://host.docker.internal:8000'
+  : 'http://localhost:8000';
 
 const App: React.FC = () => {
   const [auth, setAuth] = useState<AuthState>({