Skip to content

svelte-build

Builds a project's Svelte/Vite frontend bundle(s) and exposes them as a job artifact, so the release job can embed the real UI.

Only for projects that don't use go:generate

Go projects that embed a Svelte UI via a //go:generate build-web.sh directive (run by goreleaser's go generate before-hook) already build the bundle there — using svelte-build too would double-build at tag. See Explanation: the Svelte frontend track for the full go:generate-vs-svelte-build decision. This component is for projects that don't have that hook.

For projects that do use it: the artifact-handoff pattern is goreleaser: needs: [{ job: svelte-build, artifacts: true }] — handing goreleaser a prebuilt artifact is cleaner and cacheable than a goreleaser before.hooks entry that couples the npm build into every consumer's .goreleaser.yaml.

Runs on dev-tools (Node 22 + corepack baked). MR-gated for build visibility and tag-gated to feed goreleaser — on a release tag, rules:changes is always-true, so the bundle is always rebuilt for the release regardless of the change filter.

paths is required (no default) — a space-separated list of frontend root(s); every consumer states its own. Each root builds independently.

Jobs

Job What it runs
svelte-build Per path: npm ci && npm run $[[ inputs.build_script ]]. Artifacts every **/$[[ inputs.output_dir ]] directory (node_modules excluded), preserving its path so the release job's artifact download lands the bundle back at <root>/<output_dir>.

Inputs

Input Type Default Description
image string dev-tools:v0.1.2 Image with Node + npm.
stage string build GitLab CI stage.
paths string (required) Space-separated frontend root(s).
build_script string "build" npm script run in each path.
output_dir string "embed" Build output directory name (vite outDir) under each root. Matches the go:embed convention (pkg/studio/web/embed).
if string '$CI_PIPELINE_SOURCE == "merge_request_event" || $CI_COMMIT_TAG' Gating rules:if:. MR pipelines (visibility) + release tags (feed goreleaser).
changes array ["**/*.svelte", "**/*.ts", "**/*.js", "**/*.css", "**/*.html", "**/package.json", "**/package-lock.json", "**/vite.config.*", "**/svelte.config.*", "**/tsconfig*.json", ".gitlab-ci.yml"] Change-detection paths. Always-true on a release tag regardless.

Usage

include:
  - component: gitlab.com/phpboyscout/cicd/[email protected]
    inputs:
      paths: "pkg/studio/web"
      stage: build

goreleaser:
  needs:
    - job: svelte-build
      artifacts: true

See also