chore(frontend): fix local dev with keycloak #708

Co-authored-by: Manuel <moeri@puzzle.ch>

Author: fstreit1

.dockerignore

@@ -0,0 +1,5 @@
+frontend/node_modules
+frontend/coverage
+frontend/.angular
+frontend/dist
+frontend/.pnpm-store

.gitignore

@@ -3,7 +3,7 @@
 
 # File-based project format
 *.iws
-
+parent.iml
 # IntelliJ
 out/
 

docker/docker-compose.e2e.yml

@@ -4,8 +4,3 @@ services:
     container_name: pcts-e2e-backend
     environment:
       SPRING_PROFILES_ACTIVE: e2e-test
-
-  pcts-frontend:
-    build:
-      args:
-        BUILD_CONFIGURATION: development

docker/docker-compose.yml

@@ -49,6 +49,8 @@ services:
     build:
       context: ..
       dockerfile: ./frontend/Dockerfile
+      args:
+        BUILD_CONFIGURATION: development
     ports:
       - "4200:4200"
     profiles: ['']

frontend/Dockerfile

@@ -1,11 +1,17 @@
 FROM node:24.18-alpine AS builder
 WORKDIR /app
 RUN corepack enable && corepack prepare pnpm@10.32.1 --activate
+ENV CI="true"
+ENV CYPRESS_INSTALL_BINARY=0
+
+# 1. Copy ONLY the package files first to leverage Docker layer caching
 COPY frontend/package.json frontend/pnpm-lock.yaml frontend/pnpm-workspace.yaml ./
+# 2. Install ALL dependencies (Angular needs devDependencies to build)
 RUN pnpm install --frozen-lockfile
-COPY frontend ./
+# 3. Copy the rest of the source code
+COPY frontend/ ./
 ARG BUILD_CONFIGURATION=production
-RUN pnpm run build --output-path=./dist/ --configuration=${BUILD_CONFIGURATION}
+RUN pnpm build --output-path=./dist/ --configuration=${BUILD_CONFIGURATION}
 
 FROM nginxinc/nginx-unprivileged:1.31-alpine AS runner
 COPY frontend/nginx.conf /etc/nginx/

frontend/nginx.conf

@@ -22,7 +22,7 @@ http {
     sub_filter_once off;
 
     # sha256-mwH/Oz1bMiZ9vHH84YJ6PbP6BpLW5nG9AD9Lad8u1+c= is an inline style for accesbility
-    set $csp_header "script-src 'nonce-$request_id' 'self'; style-src 'self' 'sha256-mwH/Oz1bMiZ9vHH84YJ6PbP6BpLW5nG9AD9Lad8u1+c=' 'nonce-$request_id'; default-src 'self'; object-src 'none'; base-uri 'self'; connect-src 'self' https://sso.puzzle.ch; font-src 'self'; frame-src 'self' https://sso.puzzle.ch; img-src 'self'; manifest-src 'self'; media-src 'self'; worker-src 'none';";
+    set $csp_header "script-src 'nonce-$request_id' 'self'; style-src 'self' 'sha256-mwH/Oz1bMiZ9vHH84YJ6PbP6BpLW5nG9AD9Lad8u1+c=' 'nonce-$request_id'; default-src 'self'; object-src 'none'; base-uri 'self'; connect-src 'self' https://sso.puzzle.ch http://localhost:8544; font-src 'self'; frame-src 'self' https://sso.puzzle.ch; img-src 'self'; manifest-src 'self'; media-src 'self'; worker-src 'none';";
 
     add_header Content-Security-Policy $csp_header;
 

frontend/package.json

@@ -37,14 +37,11 @@
     "@angular/material-luxon-adapter": "^21.0.3",
     "@angular/platform-browser": "^21.0.4",
     "@angular/router": "^21.0.4",
-    "@eslint/js": "^10.0.0",
     "@ngx-translate/core": "^18.0.0",
     "@ngx-translate/http-loader": "^18.0.0",
     "@puzzleitc/puzzle-shell": "^5.1.0",
     "bootstrap": "^5.3.7",
-    "cypress": "^15.2.0",
     "date-fns": "^4.1.0",
-    "jest-environment-jsdom": "^30.2.0",
     "keycloak-angular": "^22.0.0",
     "keycloak-js": "^26.2.2",
     "luxon": "^3.7.2",
@@ -53,6 +50,9 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "cypress": "^15.2.0",
     "@angular-eslint/eslint-plugin": "^22.0.0",
     "@angular-eslint/eslint-plugin-template": "^22.0.0",
     "@angular-eslint/schematics": "^22.0.0",