Connect a real backend
Replace the demo service while retaining the template’s UI and error handling.
Connect your backend
Open src/config/backend.ts. The default active line is mode: 'demo'. Comment that line and uncomment mode: 'http' to use the HTTP provider. Keep exactly one mode active. Copy .env.example to .env.local, set VITE_API_BASE_URL and VITE_LOGIN_URL, then restart Vite or rebuild for deployment. API URLs are public configuration, not secrets.
This switch connects Overview, Customers, Projects board, Orders and Inventory. Team, Support, Billing, legacy showcase pages and the sample profile identity remain separate demos that require their own integration. HTTP mode never falls back to seeded workspace records or saves them in localStorage. Demo role switching, reset and failure simulation are disabled in this mode.
createHttpWorkspaceApi(baseUrl, csrfToken) exposes:
load(signal?: AbortSignal): Promise<BusinessData>
execute(action: Action, signal?: AbortSignal): Promise<BusinessData>Expected endpoints:
| Method | Path | Contract |
|---|---|---|
| GET | /session | Return { signedIn: true, role: 'admin', csrfToken: 'server-issued-token' }; role may also be manager or viewer; return 401 when signed out |
| POST | /logout | Invalidate the server session and return a success status |
| GET | /workspace | Return a validated BusinessData snapshot |
| POST | /workspace/actions | Accept the Action discriminated union and return the committed snapshot |
HttpBusinessProvider loads the server session and workspace snapshot, provides loading/error/retry UI, and aborts requests on unmount. Requests include cookies; mutations and logout send X-CSRF-Token. The adapter handles 401, 403, 409, non-success statuses, and invalid response shapes. The configured login URL must point to your server authentication flow, returning to the React app after sign-in. No server implementing this workspace contract is included. The documentation customer CRUD mock server is a separate learning example, not an implementation of these endpoints. See documentation/backend-switch.html for setup and verification.
The server must independently validate input, roles, record ownership, prices, quantities, and allowed transitions. Commit order creation/cancellation and inventory changes in one database transaction, use concurrency/version checks, and implement idempotency for retries. Never accept a client-supplied price as authoritative. Add pagination/search endpoints for large datasets; the sample table deliberately operates on local arrays.
Authentication and permissions
The preview opens as a demo administrator. Workspace settings can switch between admin, manager, and viewer. Sign out redirects workspace routes to /#/workspace-login; role and signed-in state persist locally. The page asks for no real password. This is an interactive frontend demonstration, not production authentication.
Admin and manager can mutate business records; viewer can browse/export. Only admin can reset demo data. Checks occur at the mutation boundary as well as in the UI. A role switcher exists deliberately for demonstration. Browser state and client-side role checks must never be trusted as server authorization.
For a real application, replace this session with a server-verified identity or an established identity-provider integration. Use the provider's documented session lifecycle and validate authorization for every backend operation. Keep private tokens/secrets out of Vite environment variables and local storage. The included HTTP example uses cookie credentials and a buyer-supplied CSRF-token callback.