# KollectAI CI - Frontend Builder Image # # Pre-baked build environment for SvelteKit frontend CI jobs and # protobuf TypeScript code generation. # Contains: Node.js, pnpm, buf CLI, @bufbuild/protoc-gen-es plugin # (global so buf 'local: protoc-gen-es' resolves via PATH), Playwright # (chromium browser binary + system deps), ORAS CLI, common build tools. # # Build: # docker build -t kcr.kollect.biz/kollect-tools/ci/frontend-builder:latest ci/frontend-builder/ # # Usage in CI: # container: # image: kcr.kollect.biz/kollect-tools/ci/frontend-builder:latest # # RUN order is cache-optimised. protoc-gen-es runs first after corepack # because pnpm 11's `pnpm add -g` is what initialises PNPM_HOME — `pnpm # dlx` doesn't, so swapping these two breaks the build with "Run pnpm # setup". Playwright (~170MB chromium download) sits next so a bump to # the cheap, low-volatility binaries (ORAS, buf) below doesn't force a # chromium re-download. ARG NODE_MAJOR=24 FROM node:${NODE_MAJOR}-bookworm-slim # ───────────────────────────────────────────────────────────────────── # System dependencies # # Three groups in one apt invocation (single layer is cheaper than three): # 1. Build/CI tooling (curl, git, jq, unzip, ca-certs) # 2. Playwright chromium runtime libs (so the browser launches without # `playwright install --with-deps`) # 3. Fonts. Headless chromium has no fonts of its own — without these, # every text glyph renders as a zero-width `.notdef` and Playwright's # `toBeVisible()` reports DOM text as hidden. Liberation covers core # Latin metrics-compatible with Arial/Times; Noto Core fills in the # symbols and extended ranges Skeleton/Tailwind reach for. Don't drop # these — E2E goes from "30 failed" to "all pass" with them present. # ───────────────────────────────────────────────────────────────────── RUN apt-get update && apt-get install -y --no-install-recommends \ ca-certificates \ curl \ git \ jq \ unzip \ libasound2 \ libatk1.0-0 \ libatk-bridge2.0-0 \ libcups2 \ libdbus-1-3 \ libdrm2 \ libgbm1 \ libnspr4 \ libnss3 \ libxcomposite1 \ libxdamage1 \ libxfixes3 \ libxkbcommon0 \ libxrandr2 \ fonts-liberation \ fonts-noto-core \ fontconfig \ && rm -rf /var/lib/apt/lists/* \ && fc-cache -f # ───────────────────────────────────────────────────────────────────── # pnpm via corepack (ships with Node.js) # # Needed by Playwright (`pnpm dlx`) and protoc-gen-es (`pnpm add -g`), # so it must land before both. # ───────────────────────────────────────────────────────────────────── ARG PNPM_VERSION=11.0.1 RUN corepack enable \ && corepack prepare "pnpm@${PNPM_VERSION}" --activate # Make pnpm's global-install bin dir authoritative on PATH so `pnpm add -g` # installs land in a known location and their binaries resolve without # extra setup. (pnpm setup is interactive — this is the non-interactive # equivalent.) # # pnpm 11 moved the global bin from $PNPM_HOME to $PNPM_HOME/bin and # now hard-errors ("The configured global bin directory ... is not in # PATH") instead of warning if PATH doesn't include it. ENV PNPM_HOME=/root/.local/share/pnpm ENV PATH="${PNPM_HOME}/bin:${PATH}" # ───────────────────────────────────────────────────────────────────── # protoc-gen-es - TypeScript codegen plugin for buf 'local:' references. # Installed via pnpm into $PNPM_HOME so the binary lands on PATH; buf v2 # resolves `local: protoc-gen-es` via PATH lookup. # # This must run before `pnpm dlx` (Playwright) below: pnpm 11's # `pnpm add -g` is what creates and initialises PNPM_HOME on first use, # and `pnpm dlx` does not — running dlx first leaves the global bin # unconfigured and the next `add -g` errors with "Run pnpm setup". # ───────────────────────────────────────────────────────────────────── ARG PROTOC_GEN_ES_VERSION=2.12.0 RUN pnpm add -g "@bufbuild/protoc-gen-es@${PROTOC_GEN_ES_VERSION}" # ───────────────────────────────────────────────────────────────────── # Playwright + chromium browser binary # # Pin Playwright in lockstep with frontend/svelte/package.json's # @playwright/test version. If the project uses a different patch level, # Playwright re-downloads the right browser at runtime; matching here # means CI hits the prebaked browser cache and skips the download. # # Browsers go to /ms-playwright (PLAYWRIGHT_BROWSERS_PATH set below) so # CI's `pnpm exec playwright install chromium` finds the prebaked binary # and skips the ~170MB download. System libs are already installed at # the top of the file, so we use bare `playwright install chromium` # (no --with-deps). # # `pnpm dlx` is a one-shot — pnpm fetches the package into its store, # executes the install command, and cleans up. The browser binary # itself persists at PLAYWRIGHT_BROWSERS_PATH, which is the only piece # we actually need at runtime. # # Placed before ORAS / buf so bumps to those (low-volatility static # binaries) don't force a 170MB chromium re-download. # ───────────────────────────────────────────────────────────────────── ARG PLAYWRIGHT_VERSION=1.59.1 ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright RUN pnpm dlx "playwright@${PLAYWRIGHT_VERSION}" install chromium # ───────────────────────────────────────────────────────────────────── # ORAS CLI - for uploading artifacts (test reports, audit logs) to Harbor. # Low-volatility static binary; ahead of buf so a bump here (rare) # doesn't cascade into buf. # ───────────────────────────────────────────────────────────────────── ARG ORAS_VERSION=1.3.2 RUN curl -fsSL "https://github.com/oras-project/oras/releases/download/v${ORAS_VERSION}/oras_${ORAS_VERSION}_linux_amd64.tar.gz" \ | tar -xz -C /usr/local/bin oras # ───────────────────────────────────────────────────────────────────── # buf CLI - single static binary, used for `buf lint` and `buf generate`. # Last because BUF_VERSION is the most volatile pin in this image and # downloading the static binary is cheap (~30MB single-file curl). # ───────────────────────────────────────────────────────────────────── ARG BUF_VERSION=1.69.0 RUN curl -fsSL "https://github.com/bufbuild/buf/releases/download/v${BUF_VERSION}/buf-Linux-x86_64" \ -o /usr/local/bin/buf \ && chmod +x /usr/local/bin/buf WORKDIR /workspace # Verify installation. Font count guards against silently shipping an image # without renderable glyphs — if this drops to 0 again, E2E breaks at # `toBeVisible()` even though the DOM is correct. RUN node --version \ && pnpm --version \ && buf --version \ && protoc-gen-es --version \ && oras version \ && jq --version \ && ls "${PLAYWRIGHT_BROWSERS_PATH}" \ && fonts=$(fc-list | wc -l) && echo "fonts: ${fonts}" && [ "${fonts}" -gt 0 ]