wip: build(docker): build node app in a separate docker build stage DEV-1343

Dockerfile

@@ -1,5 +1,9 @@
 # If you update this base image, make sure to update the base runners
 # in .github/workflows/ to the corresponding Ubuntu version
+
+######################
+# Python build stage #
+######################
 FROM ghcr.io/astral-sh/uv:python3.10-bookworm AS build-python
 
 
@@ -11,7 +15,50 @@ ENV PATH="$VIRTUAL_ENV/bin:$PATH"
 COPY ./dependencies/pip/requirements.txt "${TMP_DIR}/pip_dependencies.txt"
 RUN uv pip sync "${TMP_DIR}/pip_dependencies.txt" 1>/dev/null
 
+####################
+# Node build stage #
+####################
+FROM node:20.19-bookworm-slim AS build-node
+ENV KPI_SRC_DIR=/srv/src/kpi \
+    TMP_DIR=/srv/tmp
+WORKDIR "${KPI_SRC_DIR}"
+
+# Use a non-root user
+RUN addgroup -S kobo && adduser -S -G kobo kobo
+
+# Install npm dependencies & run post-install steps
+COPY --chown=kobo:kobo scripts ./scripts
+COPY --chown=kobo:kobo patches ./patches
+COPY --chown=kobo:kobo \
+    .browserslistrc \
+    package.json \
+    package-lock.json \
+    ./
+RUN mkdir -p "${TMP_DIR}/.npm" && \
+    npm config set cache "${TMP_DIR}/.npm" --global && \
+    mkdir -p "./jsapp/fonts" && \
+    npm ci && \
+    npm cache clean --force
 
+# Build the frontend
+COPY --chown=kobo:kobo test    ./test
+COPY --chown=kobo:kobo static  ./static
+COPY --chown=kobo:kobo webpack ./webpack
+COPY --chown=kobo:kobo jsapp   ./jsapp
+COPY --chown=kobo:kobo \
+    .browserslistrc \
+    .babelrc.json \
+    .swcrc \
+    package.json \
+    package-lock.json \
+    tsconfig.json \
+    ./
+RUN SKIP_TS_CHECK=true \
+    npm run build:app
+
+######################
+# KPI dev/prod image #
+######################
 FROM ghcr.io/astral-sh/uv:python3.10-bookworm-slim
 
 ENV DEBIAN_FRONTEND=noninteractive
@@ -103,6 +150,8 @@ COPY --from=build-python "$VIRTUAL_ENV" "$VIRTUAL_ENV"
 # Install `npm` packages. #
 ###########################
 
+# TODO: copy from npm build stage
+
 WORKDIR ${KPI_SRC_DIR}/
 
 RUN rm -rf ${KPI_NODE_PATH} && \
@@ -121,6 +170,8 @@ ENV PATH=$PATH:${KPI_NODE_PATH}/.bin
 # Build client code. #
 ######################
 
+# TODO: copy from npm build stage
+
 RUN npm run build:app
 
 ###########################

docker/entrypoint.sh

@@ -66,6 +66,7 @@ if [[ ! -d "${KPI_SRC_DIR}/staticfiles" ]] || ! python "${KPI_SRC_DIR}/docker/ch
         # Create folder to be sure following `rsync` command does not fail
         mkdir -p "${KPI_SRC_DIR}/staticfiles"
     else
+        # TODO - revisit this in context of separate node build stage
         echo "Cleaning old build…"
         rm -rf "${KPI_SRC_DIR}/jsapp/fonts" && \
         rm -rf "${KPI_SRC_DIR}/jsapp/compiled"

package.json

@@ -245,7 +245,7 @@
     "fix:css": "npm run lint:css -- --fix",
     "show-icons": "opn jsapp/fonts/k-icons.html",
     "generate-icons": "node ./scripts/generate_icons.js",
-    "copy-fonts": "python3 ./scripts/copy_fonts.py && npm run generate-icons",
+    "copy-fonts": "./scripts/copy_fonts.sh && npm run generate-icons",
     "hint": "node ./scripts/hints.js",
     "storybook": "npm run storybook:watch",
     "storybook:launch": "npx http-server storybook-static --port 6006 --silent",

scripts/copy_fonts.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+script_dir=$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" &> /dev/null && pwd)
+cd "$script_dir/.." # go up above script folder
+
+dest_dir='./jsapp/fonts'
+
+# create folder if it doesn't exist
+mkdir -p $dest_dir
+
+# copy fonts
+shopt -s failglob
+echo "Copying fonts from node_modules to jsapp/fonts..."
+cp -v ./node_modules/@fontsource/roboto/files/roboto-latin-ext-*.wof*           $dest_dir
+cp -v ./node_modules/@fontsource/roboto-mono/files/roboto-mono-latin-ext-*.wof* $dest_dir
+echo "DONE copying fonts."