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

@@ -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
 

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:

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