# Frontend Builder — CI Image

Pre-baked build environment for KollectAI-ETL frontend (SvelteKit) CI jobs and protobuf TypeScript code generation.

## What's included

- Node.js 24 (`node:24-bookworm-slim`)
- pnpm 10 (via corepack)
- [buf](https://buf.build) CLI — for `buf lint` and `buf generate`
- [`@bufbuild/protoc-gen-es`](https://www.npmjs.com/package/@bufbuild/protoc-gen-es) — installed globally so `buf` v2 `local: protoc-gen-es` resolves via PATH (no BSR remote-plugin calls)
- Playwright chromium runtime libraries pre-installed (`libnss3`, `libgbm1`, `libasound2`, etc.) — so `playwright install chromium` works without `--with-deps` apt fetches
- ORAS CLI — for uploading test reports / audit artifacts to Harbor
- `git`, `jq`, `curl`, `unzip`

## Build

```bash
docker build -t 192.168.1.72/kollect-tools/ci/frontend-builder:latest ci/frontend-builder/
docker push 192.168.1.72/kollect-tools/ci/frontend-builder:latest
```

### Build args

| Arg | Default | Description |
|-----|---------|-------------|
| `NODE_MAJOR` | `24` | Node.js major version (matches Node base image) |
| `PNPM_VERSION` | `10.15.0` | pnpm version (corepack-activated) |
| `BUF_VERSION` | `1.55.0` | buf CLI version |
| `PROTOC_GEN_ES_VERSION` | `2.12.0` | `@bufbuild/protoc-gen-es` version (ad-hoc use only — KollectAI-ETL CI uses the version pinned in `proto/pnpm-lock.yaml`) |
| `ORAS_VERSION` | `1.2.2` | ORAS CLI version |

## Usage in CI

```yaml
jobs:
  test-unit:
    runs-on: ubuntu-latest
    container:
      image: 192.168.1.72/kollect-tools/ci/frontend-builder:latest
    steps:
      - uses: actions/checkout@v6
      - run: pnpm install --frozen-lockfile
        working-directory: frontend/svelte
      - run: pnpm test
        working-directory: frontend/svelte
```

For protobuf TS codegen (`buf.gen.yaml` declares `local: protoc-gen-es`):

```yaml
- name: Generate proto TS bindings
  working-directory: proto
  run: buf generate
```

For Playwright E2E (drop `--with-deps` because system libs are pre-installed):

```yaml
- name: Install Playwright browsers
  working-directory: frontend/svelte
  run: pnpm exec playwright install chromium
```

## Maintenance

Rebuild on dependency bumps:

- New Node major → bump `NODE_MAJOR`, push image
- pnpm bump → bump `PNPM_VERSION`, push image
- buf protocol changes → bump `BUF_VERSION` and `PROTOC_GEN_ES_VERSION`, push image

The CI workflow's weekly schedule rebuilds the image to keep base layers patched.