feat: add frontend dev container to docker-compose

- frontend/Dockerfile: Node 20 Alpine image running npm run dev
- docker-compose: frontend service with depends_on db/minio/backend,
  source mounted as volume, named volume for node_modules to avoid
  OS binary conflicts between host and container
- vite.config.ts: make API proxy target configurable via
  API_PROXY_TARGET env var (defaults to localhost:8080 for local dev,
  set to http://backend:8080 inside Docker)
- .env: update PORT_FRONTEND to 5173 (actual vite dev server port)

Usage:
  docker compose up frontend   # starts frontend + all dependencies
  docker compose up            # starts everything

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docker-compose.yml

@@ -68,7 +68,7 @@ services:
     restart: unless-stopped
     volumes:
       - .:/workspaces/familienarchiv:cached
-      - ./import-data:/import # Mappt den lokalen Ordner "import-data" auf "/import" im Container
+      - ./import:/import # Mappt den lokalen Ordner "import-data" auf "/import" im Container
     depends_on:
       db:
         condition: service_healthy
@@ -89,24 +89,37 @@ services:
     networks:
       - archive-net
 
-  # --- Frontend: SvelteKit ---
+  # --- Frontend: SvelteKit (Dev Server) ---
-  # Auch hier brauchen wir erst das Dockerfile im frontend Ordner.
+  frontend:
-  # frontend:
+    build:
-  #   build: ./frontend
+      context: ./frontend
-  #   container_name: archive-frontend
+      dockerfile: Dockerfile
-  #   restart: unless-stopped
+    container_name: archive-frontend
-  #   depends_on:
+    restart: unless-stopped
-  #     - backend
+    depends_on:
-  #   environment:
+      db:
-  #     # SvelteKit SSR braucht die interne Docker-URL zum Backend
+        condition: service_healthy
-  #     API_BASE_URL: http://backend:8080
+      minio:
-  #     # Der Browser braucht die öffentliche URL (falls Client-Side Fetching genutzt wird)
+        condition: service_healthy
-  #     PUBLIC_API_BASE_URL: http://localhost:${PORT_BACKEND}
+      backend:
-  #   ports:
+        condition: service_started
-  #     - "${PORT_FRONTEND}:3000"
+    volumes:
-  #   networks:
+      - ./frontend:/app
-  #     - archive-net
+      # Keep container's node_modules separate from host to avoid OS binary conflicts
+      - frontend_node_modules:/app/node_modules
+    environment:
+      # SSR calls (server-side) use the internal Docker network
+      API_INTERNAL_URL: http://backend:8080
+      # Vite dev proxy forwards /api from browser to the backend container
+      API_PROXY_TARGET: http://backend:8080
+    ports:
+      - "${PORT_FRONTEND}:5173"
+    networks:
+      - archive-net
 
 networks:
   archive-net:
     driver: bridge
+
+volumes:
+  frontend_node_modules:

frontend/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install dependencies as a separate layer so they are cached when only source changes
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Source is mounted at runtime via docker-compose volume
+# This COPY is only used when building without a volume (e.g. production image)
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev"]

frontend/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
 		// Proxy für API-Aufrufe während der Entwicklung (Browser -> Vite -> Spring Boot)
 		proxy: {
 			'/api': {
-				target: 'http://localhost:8080',
+				target: process.env.API_PROXY_TARGET || 'http://localhost:8080',
 				changeOrigin: true
 			}
 		}