Skip to content

Getting started

New engineer? This is the ~30-minute onboarding.

Prerequisites

Tool Version Install
Node ≥ 22 nodejs.org
pnpm ≥ 10 corepack enable && corepack prepare pnpm@latest --activate
Docker 29+ Docker Desktop (Windows/macOS) or native (Linux)
Git any recent —

Clone & install

git clone git@github.com:<org>/fruitplug-web
cd fruitplug-web
pnpm install
cp .env.example .env.local
# Minimum to get the shop rendering: WP_STORE_API_URL + WP_REST_URL
# Full list at docs/dev/environment.md

Run the PWA

Plain pnpm (fastest for iteration)

pnpm dev
# → http://localhost:3000

Uses next dev --webpack — reliable HMR without Docker filesystem quirks.

Docker (mirrors the staging server)

docker compose -f infra/docker-compose.yml up --build
# web on :3000, redis on :6379, mailhog UI on :8025

Run the docs

docker build -q -f docs/Dockerfile docs/ | xargs -I {} docker run --rm -p 8000:8000 -v "$PWD/docs:/docs" {}
# → http://localhost:8000

Verify it works

# PWA
curl -s http://localhost:3000/healthz | jq
# Expected: { "status": "ok", "service": "fruitplug-web", ... }

# Production fruitplug-api
curl -s https://fruitplug.co.uk/wp-json/fruitplug/v1/health | jq
# Expected: { "status": "ok", "service": "fruitplug-api", "wc_active": true, ... }

Scripts

Command Purpose
pnpm dev Next.js dev server (webpack, HMR)
pnpm build Production build (standalone output)
pnpm start Serve the built app
pnpm lint ESLint
pnpm typecheck TypeScript no-emit check across workspace
pnpm --filter web exec next typegen Regenerate route types after adding/removing pages
pnpm docker:build Build the prod image
pnpm docker:run Run the prod image (requires .env.local)

Next