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]>
This commit is contained in:
John Patrick TeruelandCopilot committed 2026-04-24 20:04:21 +08:00
1 parent 23d3894b61
commit 3f6dcab01f
4 files changed
+44 -3

No files matched your search

+4 -1
View File
@@ -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>({