Improve frontend

Author: ahmedxgouda

frontend/docker/Dockerfile

@@ -4,13 +4,24 @@ FROM node:22-alpine AS base
 FROM base AS builder
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine
 # to understand why libc6-compat might be needed.
-ENV PNPM_HOME="/pnpm"
+ENV APK_CACHE_DIR="/app/.cache/apk" \
+    APK_SYMLINK_DIR="/etc/apk/cache" \
+    NPM_CACHE="/app/.npm" \
+    PNPM_HOME="/pnpm"
+
 ENV PATH="$PNPM_HOME:$PATH"
 
-RUN apk add --no-cache libc6-compat
+RUN mkdir -p ${APK_CACHE_DIR} ${APK_SYMLINK_DIR} && \
+    ln -s ${APK_CACHE_DIR} ${APK_SYMLINK_DIR}
+
+RUN --mount=type=cache,target=${APK_CACHE_DIR} \
+    apk add libc6-compat
+
 WORKDIR /app
+    
+RUN --mount=type=cache,target=${NPM_CACHE} \
+    npm install --ignore-scripts -g pnpm --cache ${NPM_CACHE}
 
-RUN npm install --ignore-scripts -g pnpm
 COPY --chmod=444 package.json pnpm-lock.yaml ./
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     pnpm install --frozen-lockfile --ignore-scripts

frontend/docker/Dockerfile.e2e.test

@@ -1,16 +1,18 @@
 FROM mcr.microsoft.com/playwright:v1.52.0-jammy
 
-ENV PNPM_HOME="/pnpm"
-ENV FORCE_COLOR=1 \
-    NPM_CONFIG_RETRY=5 \
+ENV NPM_CACHE="/app/.npm" \
+    PNPM_HOME="/pnpm"
+
+ENV NPM_CONFIG_RETRY=5 \
     NPM_CONFIG_TIMEOUT=30000 \
     PATH="$PNPM_HOME:$PATH"
 
+RUN --mount=type=cache,target=${NPM_CACHE} \
+    npm install --ignore-scripts -g pnpm --cache ${NPM_CACHE}
 
 WORKDIR /app
 
 COPY --chmod=444 package.json pnpm-lock.yaml ./
-RUN npm install --ignore-scripts -g pnpm
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     pnpm install --frozen-lockfile --ignore-scripts
 

frontend/docker/Dockerfile.local

@@ -2,17 +2,27 @@ FROM node:22-alpine AS builder
 
 SHELL ["/bin/sh", "-o", "pipefail", "-c"]
 
-RUN apk update && \
-    apk add --no-cache git && \
-    mkdir -p /home/owasp && \
-    chown -R node:node /home/owasp && \
-    npm install --ignore-scripts -g pnpm
+ENV APK_CACHE_DIR="/home/owasp/.cache/apk" \
+    APK_SYMLINK_DIR="/etc/apk/cache" \
+    NPM_CACHE="/home/owasp/.npm" \
+    PNPM_HOME="/pnpm"
 
-ENV PNPM_HOME="/pnpm"
 ENV NPM_CONFIG_RETRY=5 \
     NPM_CONFIG_TIMEOUT=30000 \
     PATH="$PNPM_HOME:$PATH"
 
+RUN mkdir -p ${APK_CACHE_DIR} ${APK_SYMLINK_DIR} && \
+    ln -s ${APK_CACHE_DIR} ${APK_SYMLINK_DIR}
+
+RUN --mount=type=cache,target=${APK_CACHE_DIR} \
+    apk update && \
+    apk add git && \
+    mkdir -p /home/owasp && \
+    chown -R node:node /home/owasp
+
+RUN --mount=type=cache,target=${NPM_CACHE} \
+    npm install --ignore-scripts -g pnpm --cache ${NPM_CACHE}
+
 WORKDIR /home/owasp
 
 COPY --chmod=444 --chown=node:node package.json pnpm-lock.yaml ./
@@ -23,11 +33,21 @@ FROM node:22-alpine
 
 SHELL ["/bin/sh", "-o", "pipefail", "-c"]
 
-RUN apk update && \
+ENV APK_CACHE_DIR="/home/owasp/.cache/apk" \
+    APK_SYMLINK_DIR="/etc/apk/cache" \
+    NPM_CACHE="/home/owasp/.npm"
+
+RUN mkdir -p ${APK_CACHE_DIR} ${APK_SYMLINK_DIR} && \
+    ln -s ${APK_CACHE_DIR} ${APK_SYMLINK_DIR}
+
+RUN --mount=type=cache,target=${APK_CACHE_DIR} \
+    apk update && \
     apk add --no-cache git && \
     mkdir -p /home/owasp/.next && \
-    chown -R node:node /home/owasp && \
-    npm install --ignore-scripts -g pnpm
+    chown -R node:node /home/owasp
+
+RUN --mount=type=cache,target=${NPM_CACHE} \
+    npm install --ignore-scripts -g pnpm --cache ${NPM_CACHE}
 
 COPY --from=builder --chmod=755 --chown=node:node /home/owasp/node_modules /home/owasp/node_modules
 

frontend/docker/Dockerfile.unit.test

@@ -1,16 +1,18 @@
 FROM node:22-alpine
 
-ENV PNPM_HOME="/pnpm"
-ENV FORCE_COLOR=1 \
-    NPM_CONFIG_RETRY=5 \
+ENV NPM_CACHE="/app/.npm" \
+    PNPM_HOME="/pnpm"
+
+ENV NPM_CONFIG_RETRY=5 \
     NPM_CONFIG_TIMEOUT=30000 \
     PATH="$PNPM_HOME:$PATH"
 
+RUN --mount=type=cache,target=${NPM_CACHE} \
+    npm install --ignore-scripts -g pnpm --cache ${NPM_CACHE}
 
 WORKDIR /app
 
 COPY --chmod=444 package.json pnpm-lock.yaml ./
-RUN npm install --ignore-scripts -g pnpm
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     pnpm install --frozen-lockfile --ignore-scripts && \
     chown node:node /app