Web SPA

Web SaaS Setup (ɳTasks)

Setup guide for the React 19 + Vite 6 web SaaS at task.nself.org. The app lives in web/ in this repo, alongside the backend and the mobile, desktop and TV clients, so every surface versions together.

Prerequisites

Tool	Version	Notes
Node	20+	JS/TS runtime
pnpm	10+	Package manager

Install

git clone https://github.com/nself-org/web.git
cd web
pnpm install

Environment Config

cd web
cp .env.example .env.local

Key vars:

Var	Default (dev)	Description
VITE_HASURA_URL	http://localhost:8080/v1/graphql	Hasura GraphQL endpoint
VITE_AUTH_URL	http://localhost:4000	Hasura Auth endpoint
VITE_STORAGE_URL	http://localhost:8484	Hasura Storage endpoint
VITE_SENTRY_DSN	(optional)	Sentry error tracking DSN

Run (Development)

Start the backend first:

cd backend && make up

Then start Vite dev server:

cd web
pnpm dev     # http://localhost:5173 by default

Build

cd web
pnpm build      # Production build (dist/)
pnpm preview    # Preview production build locally

Tests

cd web
pnpm test               # Vitest (once)
pnpm test -- --watch    # Watch mode
pnpm test -- --coverage # Coverage report
pnpm test:e2e           # Playwright e2e

Deployment

The hosted task.nself.org is served from web/ in this repo via Vercel, pointed at this repo's backend. See Deployment for the staging/production deploy guide.

Related

• Backend-Setup: start the Docker Compose backend
• Desktop: Tauri shell wrapping this same app
• testing: full testing guide
• Deployment: Vercel deploy