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

+10
View File
@@ -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