feat: add docker-compose.dev.yml for local development

- docker-compose.dev.yml: backend on 8000, frontend (Vite) on 5173
- Backend mounts source files + uvicorn --reload for hot reload
- Frontend uses node:20-alpine, mounts ./frontend, runs npm run dev --host
- vite.config.ts: proxy target reads from API_TARGET env var
  (defaults to localhost:8000 for plain npm run dev,
   set to http://backend:8000 by docker-compose.dev.yml)

Usage: docker compose -f docker-compose.dev.yml up

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 16:08:53 +01:00
parent 6d168652d4
commit 06e6ae700f
2 changed files with 47 additions and 8 deletions

View File

@@ -0,0 +1,41 @@
services:
backend:
build:
context: .
dockerfile: Dockerfile.backend
container_name: flight-radar-backend-dev
restart: unless-stopped
ports:
- "8000:8000"
environment:
- DATABASE_PATH=/app/data/cache.db
volumes:
# Mount source files so uvicorn --reload picks up changes
- ./api_server.py:/app/api_server.py
- ./airports.py:/app/airports.py
- ./cache.py:/app/cache.py
- ./database:/app/database
- flight-radar-data-dev:/app/data
command: uvicorn api_server:app --host 0.0.0.0 --port 8000 --reload
frontend:
image: node:20-alpine
container_name: flight-radar-frontend-dev
working_dir: /app
restart: unless-stopped
ports:
- "5173:5173"
environment:
# Tells Vite's proxy where to find the backend inside Docker
- API_TARGET=http://backend:8000
volumes:
- ./frontend:/app
# Isolate node_modules inside the container (don't use host's)
- /app/node_modules
command: sh -c "npm install && npm run dev -- --host"
depends_on:
- backend
volumes:
flight-radar-data-dev:
driver: local

View File

@@ -1,20 +1,18 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// When running inside Docker the backend is reachable via its service name.
// Outside Docker (plain `npm run dev`) it falls back to localhost.
const apiTarget = process.env.API_TARGET ?? 'http://localhost:8000'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 5173,
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
'/health': {
target: 'http://localhost:8000',
changeOrigin: true,
}
'/api': { target: apiTarget, changeOrigin: true },
'/health': { target: apiTarget, changeOrigin: true },
}
}
})