Step 12 — Frontend (optional)

Optional but recommended: a React task board that talks to the same Moonlight API.

What you will learn#

• Scaffold Vite in frontend/
• Proxy /api to port 8000 during dev
• Build into public/ for production

Scaffold#

Terminal 1 — API:

php pionia serve

Terminal 2 — frontend:

php pionia frontend:scaffold --framework=react-ts --yes
php pionia frontend:dev

Open http://127.0.0.1:5173 — Vite proxies /api/v1/ to your Pionia server.

Fetch tasks from your React app:

const res = await fetch('/api/v1/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ service: 'task', action: 'list' }),
});

Production build:

php pionia frontend:build

Full guide: Vite integration.

Common mistakes#

• CORS errors when calling :8000 from :5173 — use Vite proxy, not hard-coded API URL in dev.
• Forgetting JWT header on create — pass Authorization from login state.