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]>
- Created frontend/Dockerfile with multi-stage build for optimized production bundle
- Created frontend/.dockerignore to exclude node_modules and build artifacts
- Added frontend service to docker-compose.yml with:
- Auto-build from frontend/Dockerfile
- Port 3000 mapping
- Health checks (wget to http://localhost:3000)
- Dependency on healthy Kafka and Redis
- Production environment (NODE_ENV=production)
- Auto-restart on failure
- Proper network connectivity
- Created DOCKER_QUICK_START.md with simplified setup guide:
- Single docker compose up starts infrastructure + frontend
- Cleaner workflow (2-3 terminals instead of 4)
- Production-like testing (not dev mode)
- Complete troubleshooting section
- Updated FULLSTACK_GUIDE.md to highlight Docker-integrated frontend
- Frontend now runs as optimized 63KB gzip production build in Docker
All components now start together:
docker compose up # Infrastructure + React frontend (Docker)
uvicorn api.main:app # API (your terminal)
python pipeline.py # Consumer (your terminal)
Access frontend at: http://localhost:3000
Co-authored-by: Copilot <[email protected]>
- Complete status overview of all 7 phases
- Design patterns implemented and explained
- Demo scenarios and how to run them
- Code quality and documentation assessment
- Academic value and learning outcomes
- Next steps for potential extensions
Co-authored-by: Copilot <[email protected]>
