From 1f47f5926772053e28e4bf82fc38fbf0f0051858 Mon Sep 17 00:00:00 2001
From: Matthias Adler <macedigital@users.noreply.github.com>
Date: Wed, 5 Jun 2024 15:09:44 +0200
Subject: [PATCH] fix: use nodejs-lts image for building frontend code (#2653)

* fix: use nodejs-lts image for building frontend code

Node v14 is end-of-life and should no longer be used. Commit changes Makefile to pull in latest node-lts instead.

Also, use local temporary folder for storing npm generated files to workaround permission issue with old npm version, e.g. emitting these errors:

```
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /.npm
npm ERR! errno -13
npm ERR!
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
```

Both changes should also fix issue https://github.com/zalando/postgres-operator/issues/2651

* fix: add frontend build step

Commit https://github.com/zalando/postgres-operator/commit/d60b424d7957d715003d9e5597bd5b5d63b6e250 accidentally removed build steps that are important for building frontend.

This commit restores previous behavior, but switches to nodejs-lts image for building frontend code.

Should restore `app.js` presence in ghcr image, see https://github.com/zalando/postgres-operator/issues/2651.
---
 .gitignore       |  2 ++
 ui/.dockerignore |  2 ++
 ui/Dockerfile    | 14 +++++++++++++-
 ui/Makefile      |  4 ++--
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 081eb5fba..66a8103d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -102,3 +102,5 @@ e2e/tls
 *.pot
 
 mocks
+
+ui/.npm/
diff --git a/ui/.dockerignore b/ui/.dockerignore
index a53cb76a3..2bc7915f1 100644
--- a/ui/.dockerignore
+++ b/ui/.dockerignore
@@ -5,6 +5,8 @@
 .git
 __pycache__
 
+.npm/
+
 app/node_modules
 operator_ui/static/build/*.hot-update.js
 operator_ui/static/build/*.hot-update.json
diff --git a/ui/Dockerfile b/ui/Dockerfile
index 25a0f089d..51f1d7744 100644
--- a/ui/Dockerfile
+++ b/ui/Dockerfile
@@ -1,4 +1,15 @@
-FROM registry.opensource.zalan.do/library/python-3.11-slim:latest
+ARG BASE_IMAGE=registry.opensource.zalan.do/library/python-3.11-slim:latest
+ARG NODE_IMAGE=node:lts-alpine
+
+FROM $NODE_IMAGE AS build
+
+COPY . /workdir
+WORKDIR /workdir/app
+
+RUN npm install \
+    && npm run build
+
+FROM $BASE_IMAGE
 LABEL maintainer="Team ACID @ Zalando <team-acid@zalando.de>"
 
 EXPOSE 8081
@@ -15,6 +26,7 @@ COPY start_server.sh .
 RUN pip install -r requirements.txt
 
 COPY operator_ui operator_ui/
+COPY --from=build /workdir/operator_ui/static/build/ operator_ui/static/build/
 
 ARG VERSION=dev
 RUN sed -i "s/__version__ = .*/__version__ = '${VERSION}'/" operator_ui/__init__.py
diff --git a/ui/Makefile b/ui/Makefile
index 7d86b2df6..8f88982ab 100644
--- a/ui/Makefile
+++ b/ui/Makefile
@@ -21,8 +21,8 @@ test:
 	tox
 
 appjs:
-	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:14.21.2-alpine npm install
-	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:14.21.2-alpine npm run build
+	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:lts-alpine npm install --cache /workdir/.npm
+	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:lts-alpine npm run build --cache /workdir/.npm
 
 docker: appjs
 	echo `(env)`