From 49c0654e4f2ac4e6a70ef05fb34890d75be8083f Mon Sep 17 00:00:00 2001
From: Kari Salminen <kari.salminen@anders.com>
Date: Tue, 26 Nov 2024 16:23:14 +0200
Subject: [PATCH] fix: kesaseteli frontend docker developing, hot reload &
 permissions

 - added `WATCHPACK_POLLING=true` by default so hot reload should work
   for most platforms out of the box now (e.g. on Windows 11 + Docker
   Desktop + WSL2 with the files volume mapped from the host filesystem
   to the docker container hot reload now works)
 - made sure `frontend/Dockerfile-localdevelopment` sets up the
   project's `.next` directory so that the express server can access its
   files

refs YJDH-718 (making kesaseteli frontend docker development usable)
---
 compose.employer.yml                 |  7 ++++++-
 compose.handler.yml                  | 18 ++++++++++++++++--
 frontend/Dockerfile-localdevelopment | 13 +++++++++++++
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/compose.employer.yml b/compose.employer.yml
index b89b3db286..bfeaeb76db 100644
--- a/compose.employer.yml
+++ b/compose.employer.yml
@@ -43,17 +43,22 @@ services:
       dockerfile: Dockerfile-localdevelopment
       target: development
       args:
-        PORT: 3100
         PROJECT: kesaseteli
         FOLDER: employer
     platform: linux/amd64
     volumes:
       - ./frontend:/app
+      # Don't volume map these dirs to avoid ownership/permission issues:
       - /app/node_modules
       - /app/.next
+      - /app/shared/node_modules
+      - /app/shared/.next
+      - /app/kesaseteli/employer/node_modules
+      - /app/kesaseteli/employer/.next
     env_file:
       - .env.kesaseteli
     environment:
+      - WATCHPACK_POLLING=${WATCHPACK_POLLING:-true}
       - PORT=3000
     container_name: kesaseteli-employer
 
diff --git a/compose.handler.yml b/compose.handler.yml
index 5f3c31c771..2b49b9e3af 100644
--- a/compose.handler.yml
+++ b/compose.handler.yml
@@ -43,16 +43,23 @@ services:
       dockerfile: Dockerfile-localdevelopment
       target: development
       args:
-        PORT: 3100
         PROJECT: kesaseteli
         FOLDER: youth
     platform: linux/amd64
     volumes:
       - ./frontend:/app
+      # Don't volume map these dirs to avoid ownership/permission issues:
       - /app/node_modules
       - /app/.next
+      - /app/shared/node_modules
+      - /app/shared/.next
+      - /app/kesaseteli/youth/node_modules
+      - /app/kesaseteli/youth/.next
     env_file:
       - .env.kesaseteli
+    environment:
+      - WATCHPACK_POLLING=${WATCHPACK_POLLING:-true}
+      - PORT=3100
     container_name: kesaseteli-youth
 
   handler:
@@ -61,16 +68,23 @@ services:
       dockerfile: Dockerfile-localdevelopment
       target: development
       args:
-        PORT: 3200
         PROJECT: kesaseteli
         FOLDER: handler
     platform: linux/amd64
     volumes:
       - ./frontend:/app
+      # Don't volume map these dirs to avoid ownership/permission issues:
       - /app/node_modules
       - /app/.next
+      - /app/shared/node_modules
+      - /app/shared/.next
+      - /app/kesaseteli/handler/node_modules
+      - /app/kesaseteli/handler/.next
     env_file:
       - .env.kesaseteli
+    environment:
+      - WATCHPACK_POLLING=${WATCHPACK_POLLING:-true}
+      - PORT=3200
     container_name: kesaseteli-handler
 
   local-proxy:
diff --git a/frontend/Dockerfile-localdevelopment b/frontend/Dockerfile-localdevelopment
index 718fdc5515..bc5df314d1 100644
--- a/frontend/Dockerfile-localdevelopment
+++ b/frontend/Dockerfile-localdevelopment
@@ -39,6 +39,12 @@ COPY --chown=default:default $PROJECT/shared/package.json* $PROJECT/shared/packa
 COPY --chown=default:default shared/package.json shared/package.json
 RUN --mount=type=cache,target="$PWD/.yarn_cache",sharing=locked YARN_CACHE_FOLDER="$PWD"/.yarn_cache yarn --frozen-lockfile --check-files --network-timeout 600000
 
+# Ensure the project's .next directory exist and is accessible
+# so that the express server can access the files
+RUN mkdir -p $PROJECT/$FOLDER/.next \
+    && chown -R default:default $PROJECT/$FOLDER/.next \
+    && chmod -R u=rwx,go=rx $PROJECT/$FOLDER/.next
+
 # =============================
 FROM appbase AS development
 # =============================
@@ -55,6 +61,13 @@ ENV NODE_OPTIONS="--max_old_space_size=2048"
 
 ARG PROJECT
 ARG FOLDER
+# Enable hot reload by default by polling for file changes.
+#
+# NOTE: Can be disabled by setting WATCHPACK_POLLING=false
+#       if hot reload works on your system without polling to save CPU time.
+ARG WATCHPACK_POLLING=true
+ENV WATCHPACK_POLLING=${WATCHPACK_POLLING}
+
 # Use non-root user
 USER default
 WORKDIR /app