From 32801251408106bdea53b41bc843b32a7584f531 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 17 Mar 2026 22:15:17 +0100
Subject: [PATCH] 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      | 49 ++++++++++++++++++++++++++---------------
 frontend/Dockerfile     | 15 +++++++++++++
 frontend/vite.config.ts |  2 +-
 3 files changed, 47 insertions(+), 19 deletions(-)
 create mode 100644 frontend/Dockerfile

diff --git a/docker-compose.yml b/docker-compose.yml
index 3d7c5c1d..f1e956a3 100644
--- a/docker-compose.yml
+++ b/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 ---
-  # Auch hier brauchen wir erst das Dockerfile im frontend Ordner.
-  # frontend:
-  #   build: ./frontend
-  #   container_name: archive-frontend
-  #   restart: unless-stopped
-  #   depends_on:
-  #     - backend
-  #   environment:
-  #     # SvelteKit SSR braucht die interne Docker-URL zum Backend
-  #     API_BASE_URL: http://backend:8080
-  #     # Der Browser braucht die öffentliche URL (falls Client-Side Fetching genutzt wird)
-  #     PUBLIC_API_BASE_URL: http://localhost:${PORT_BACKEND}
-  #   ports:
-  #     - "${PORT_FRONTEND}:3000"
-  #   networks:
-  #     - archive-net
+  # --- Frontend: SvelteKit (Dev Server) ---
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: archive-frontend
+    restart: unless-stopped
+    depends_on:
+      db:
+        condition: service_healthy
+      minio:
+        condition: service_healthy
+      backend:
+        condition: service_started
+    volumes:
+      - ./frontend:/app
+      # 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:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 00000000..ca88f974
--- /dev/null
+++ b/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"]
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 36c62078..cbaef5d9 100644
--- a/frontend/vite.config.ts
+++ b/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
 			}
 		}