From 8feaf48126c3b4b3ded013c592efbacce7f6f26e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=A9o=20M=C3=A9vollon?= <m.mevollon@proton.me>
Date: Thu, 29 Feb 2024 15:38:53 +0100
Subject: [PATCH] chore(frontend): better dockerfile cache

---
 .kontinuous/values.yaml |  4 +---
 frontend/Dockerfile     | 52 +++++++++++------------------------------
 frontend/package.json   |  2 +-
 3 files changed, 15 insertions(+), 43 deletions(-)

diff --git a/.kontinuous/values.yaml b/.kontinuous/values.yaml
index 4e00e34a..0463986e 100644
--- a/.kontinuous/values.yaml
+++ b/.kontinuous/values.yaml
@@ -42,7 +42,7 @@ api:
 
 api-node:
   ~chart: app
-  ~needs: [build-api-node]
+  ~needs: [build-api-node, pg-api-node]
   containerPort: 3000
   imagePackage: api-node
   host: "{{ tpl .Values.global.apiNodeHost . }}"
@@ -167,7 +167,6 @@ flower:
     - name: FLOWER_PERSISTENT
       value: "True"
 
-
 pg-api-node:
   ~chart: pg
 
@@ -183,7 +182,6 @@ cronjobs:
     - secretRef:
         name: api-node-sealed-secret
 
-
 jobs:
   runs:
     build-api:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 48339278..2a0d19d3 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,8 +1,9 @@
 ARG NODE_VERSION=18-alpine3.17@sha256:44aaf1ccc80eaed6572a0f2ef7d6b5a2982d54481e4255480041ac92221e2f11
 
-########
-# Base : node
-FROM node:$NODE_VERSION AS base
+FROM node:$NODE_VERSION as base
+WORKDIR /app
+
+FROM base AS builder
 # Gatsby vaiables for the install / build / run
 ARG GATSBY_API_BASE_URL
 ENV GATSBY_API_BASE_URL $GATSBY_API_BASE_URL
@@ -14,43 +15,18 @@ ARG GATSBY_REPOSITORY_URL
 ENV GATSBY_REPOSITORY_URL $GATSBY_REPOSITORY_URL
 ENV GATSBY_TELEMETRY_DISABLED 1
 WORKDIR /app
-# Need lscpu
-RUN apk add --no-cache --update util-linux && \
-    rm -rf /var/cache/apk/* > /dev/null 2>&1
-COPY frontend/package.json ./frontend/
-ADD package.json yarn.lock ./
-# Keep yarn install cache when bumping version and dependencies still the sames
-RUN node -e " \
-    const package = JSON.parse(fs.readFileSync('/app/package.json')); \
-    const packageZero = { ...package, version: '0.0.0' };  \
-    fs.writeFileSync('/app/package.json', JSON.stringify(packageZero, null, 2));"
 
-########
-# Need this hack to not install dependencies when frontend changes
-FROM node:$NODE_VERSION AS tmp-frontend
-COPY frontend frontend/
+COPY yarn.lock .yarnrc.yml ./
+COPY .yarn .yarn
+RUN yarn fetch workspaces focus recosante-frontend
+RUN yarn workspaces focus recosante-frontend
 
-########
-# Install dependencies only when needeed
-FROM base AS installer
-RUN yarn install
+COPY frontend ./frontend
 
-########
-# Build gatsby
-FROM installer AS builder
-COPY --from=tmp-frontend /frontend ./frontend
-RUN ls
-WORKDIR /app/frontend
-RUN yarn build
+RUN yarn workspace recosante-frontend build
+RUN yarn workspaces focus recosante-frontend --production && yarn cache clean
 
-########
-# Runner
 FROM base AS runner
-# Apparently still does not work with gatsby 5.10 ...
-# See https://github.com/gatsbyjs/gatsby/issues/37246
-# RUN addgroup --system --gid 1001 nodejs && \
-#     adduser --system --uid 1001 frontend
-# COPY --from=builder --chown=nodejs:frontend /app ./
 
 ARG GITHUB_SHA
 ENV GITHUB_SHA $GITHUB_SHA
@@ -64,7 +40,5 @@ COPY --from=builder --chown=1000:1000 /app ./
 
 USER 1000
 
-RUN yarn install --production && yarn cache clean
-
-WORKDIR /app/frontend
-CMD ["node", "node_modules/.bin/gatsby", "serve", "--port", "8080", "--host", "0.0.0.0"]
+# CMD ["node", "node_modules/.bin/gatsby", "serve", "--port", "8080", "--host", "0.0.0.0"]
+CMD ["yarn", "workspace", "recosante-frontend", "gatsby", "serve", "--port", "8080", "--host", "0.0.0.0"]
diff --git a/frontend/package.json b/frontend/package.json
index 7e4478bc..2fd0c69c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build": "yarn iframe && gatsby build",
     "format": "prettier --write '**/*.{js,jsx}'",
-    "iframe": "webpack",
+    "iframe": "webpack-cli",
     "lint": "prettier --check '**/*.{js,jsx}'",
     "lint-debug": "prettier --debug-check '**/*.{js,jsx}'",
     "serve": "gatsby serve",