Alpine + libc6-compat still lost the fight with Tailwind v4's prebuilt oxide / lightningcss / rolldown bindings on the Portainer host. Debian slim (glibc-native) is the known-good base for this stack. The serve stage stays nginx:alpine, so the deployed image size is unchanged — only the discarded build stage grew. Also flip the home-page navbar from floating to the standard layout. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Kaiser Natron
Ecommerce frontend. Vue 3 + Vite + Tailwind v4. Backend (Python/MySQL) is plugged in at the src/api/ boundary.
Setup
npm ci
npm run dev
Design system
Everything visual lives in src/design-system/:
tokens/— color, typography, spacing, radius (CSS custom properties consumed by Tailwind v4's@theme)primitives/— atomic components (Button, Input, Badge, Stack)patterns/— composed components (ProductCard, etc.)
Browse the full system at /design when running npm run dev. This is the single source of truth — new UI composes these, never one-off styling.
API boundary
src/api/ exposes a typed surface the backend dev fills in. Until then, fixtures in src/api/fixtures/ drive the UI so frontend work is unblocked.
Supply chain
All dep versions are pinned exactly (no ^/~). Use npm ci (not npm install) in CI and before builds. Run npm audit before adding any new dep.
Deployment (Portainer stack)
Portainer builds the image from the Dockerfile at the repo root each time the stack is pulled & redeployed — no registry needed.
- Portainer → Stacks → Add stack
- Either paste
docker-compose.ymlin the web editor or point Portainer at this repo (build path/) - Deploy. The site comes up on host port 5555 (internal container port 80).
- Health:
GET /healthreturns200 ok.
Pinned images: node:24.15.0-bookworm-slim (build stage, glibc — Alpine/musl fights with Tailwind v4's native bindings), nginx:1.27.3-alpine (serve stage). Bump explicitly when you want to upgrade — no floating tags.