Scaffold SvelteKit app with Docker Compose dev environment

forgejo_admin commented

2026-03-13 19:41:45 +00:00

Owner

Lineage

plan-pal-e-docs → Phase 2 (App Scaffold)

Repo

forgejo_admin/pal-e-app

User Story

As a platform developer
I want a SvelteKit frontend connected to the pal-e-docs API
So that I can build interactive UI components for boards, notes, and project views

Context

pal-e-docs has a mature API (150+ endpoints) but no frontend beyond server-rendered HTML. This scaffolds the SvelteKit app that will become the primary UI. The API is at https://pal-e-docs-api.tail5b443a.ts.net (external) or http://pal-e-docs.pal-e-docs.svc.cluster.local:8000 (in-cluster).

The repo was just created with auto-init. This is a greenfield scaffold.

File Targets

Files to create:

package.json — SvelteKit + adapter-node + TypeScript
svelte.config.js — adapter-node config
tsconfig.json — strict TypeScript
vite.config.ts — dev server config with API proxy
src/app.html — shell HTML
src/routes/+page.svelte — landing page
src/routes/+layout.svelte — app layout with nav
src/routes/boards/+page.svelte — list boards (proof of API connection)
src/routes/boards/[slug]/+page.svelte — board view (kanban columns)
src/routes/boards/[slug]/+page.server.ts — server-side data loading
src/lib/api.ts — typed API client wrapper
docker-compose.yml — pal-e-app dev server + pal-e-docs API (uses existing image)
Dockerfile — multi-stage build (build + node:alpine runtime)
.woodpecker.yaml — CI: lint + build + push
CLAUDE.md — repo conventions

Acceptance Criteria

npm install && npm run dev starts dev server on port 5173
docker compose up starts both pal-e-app and pal-e-docs API
Landing page renders and shows list of boards from API
Board detail page shows items grouped by column (basic HTML, no drag-and-drop yet)
API calls go through server-side load functions (no client-side fetch to external API)
TypeScript strict mode, no any types
Dockerfile builds successfully
.woodpecker.yaml has lint + build steps

Test Expectations

npm run check passes (svelte-check)
npm run build produces production bundle
Board page renders with mock or real API data

Constraints

Use adapter-node (not adapter-auto or adapter-static) — we deploy to k8s
Use server-side load functions (+page.server.ts) for API calls — keeps API URL private
Use Tailwind CSS for styling (keeps it simple, widely known)
No auth yet — that's a future phase
API proxy in vite config for dev: /api → http://localhost:8000
Keep it minimal — this is a scaffold, not a full app

Checklist

PR opened
Build passes
No unrelated changes
Closes #1 in PR body

pal-e-docs — the API backend
phase-pal-e-docs-app-scaffold — phase note
phase-pal-e-docs-sprint-board-component — Phase 3, builds the kanban UI on top of this scaffold

### Lineage `plan-pal-e-docs` → Phase 2 (App Scaffold) ### Repo `forgejo_admin/pal-e-app` ### User Story As a platform developer I want a SvelteKit frontend connected to the pal-e-docs API So that I can build interactive UI components for boards, notes, and project views ### Context pal-e-docs has a mature API (150+ endpoints) but no frontend beyond server-rendered HTML. This scaffolds the SvelteKit app that will become the primary UI. The API is at `https://pal-e-docs-api.tail5b443a.ts.net` (external) or `http://pal-e-docs.pal-e-docs.svc.cluster.local:8000` (in-cluster). The repo was just created with auto-init. This is a greenfield scaffold. ### File Targets Files to create: - `package.json` — SvelteKit + adapter-node + TypeScript - `svelte.config.js` — adapter-node config - `tsconfig.json` — strict TypeScript - `vite.config.ts` — dev server config with API proxy - `src/app.html` — shell HTML - `src/routes/+page.svelte` — landing page - `src/routes/+layout.svelte` — app layout with nav - `src/routes/boards/+page.svelte` — list boards (proof of API connection) - `src/routes/boards/[slug]/+page.svelte` — board view (kanban columns) - `src/routes/boards/[slug]/+page.server.ts` — server-side data loading - `src/lib/api.ts` — typed API client wrapper - `docker-compose.yml` — pal-e-app dev server + pal-e-docs API (uses existing image) - `Dockerfile` — multi-stage build (build + node:alpine runtime) - `.woodpecker.yaml` — CI: lint + build + push - `CLAUDE.md` — repo conventions ### Acceptance Criteria - [ ] `npm install && npm run dev` starts dev server on port 5173 - [ ] `docker compose up` starts both pal-e-app and pal-e-docs API - [ ] Landing page renders and shows list of boards from API - [ ] Board detail page shows items grouped by column (basic HTML, no drag-and-drop yet) - [ ] API calls go through server-side load functions (no client-side fetch to external API) - [ ] TypeScript strict mode, no `any` types - [ ] Dockerfile builds successfully - [ ] `.woodpecker.yaml` has lint + build steps ### Test Expectations - [ ] `npm run check` passes (svelte-check) - [ ] `npm run build` produces production bundle - [ ] Board page renders with mock or real API data ### Constraints - Use `adapter-node` (not adapter-auto or adapter-static) — we deploy to k8s - Use server-side load functions (`+page.server.ts`) for API calls — keeps API URL private - Use Tailwind CSS for styling (keeps it simple, widely known) - No auth yet — that's a future phase - API proxy in vite config for dev: `/api` → `http://localhost:8000` - Keep it minimal — this is a scaffold, not a full app ### Checklist - [ ] PR opened - [ ] Build passes - [ ] No unrelated changes - [ ] `Closes #1` in PR body ### Related - `pal-e-docs` — the API backend - `phase-pal-e-docs-app-scaffold` — phase note - `phase-pal-e-docs-sprint-board-component` — Phase 3, builds the kanban UI on top of this scaffold