Xano Starter Frontend

An opinionated, static-only starter app for building a frontend on top of your Xano backend. Log in against your own instance, get your auth token attached to every request automatically, and call your APIs through typed, generated hooks. Built to be dropped into Xano static hosting and extended by you or the editor's AI agent.

AI agents: read AGENTS.md first.

Stack

Vite · React · TypeScript · React Router · Redux Toolkit (RTK Query) · Tailwind v4 (config-in-CSS) · shadcn (vendored) · dark mode · react-hook-form + zod · TanStack Table.

What's in the box

• Login / Signup / Profile screens wired to Xano's default auth group.
• Auth plumbing: token in localStorage, auto-attached Bearer header, 401 → redirect to login, session persists across reloads (and across tabs).
• Gated app shell: a collapsible sidebar (Dashboard) + top header with a user menu (Profile, Log out), all behind a ProtectedRoute token guard.
• Dashboard: a hello-world example screen that reads live data via a generated hook and demonstrates both the form and data-table patterns.
• Codegen pipeline: typed RTK Query hooks generated from your Swagger, with a responses.ts overlay for response types.

Quick start

cp .env.example .env      # then fill in your instance URLs
npm install
npm run dev

Set in .env:

Var	What
VITE_XANO_API_BASE	Your API group base URL, e.g. https://x123.n7.xano.io/api:AbCdEf
VITE_XANO_SWAGGER_URL	The same group's …/swagger.json (feeds codegen)

If VITE_XANO_SWAGGER_URL is unset, codegen falls back to the in-repo fixture so the build still works.

Scripts

Script	Does
npm run dev	Dev server
npm run codegen	Regenerate typed hooks from your Swagger
npm run build	codegen → type-check → vite build (static output in dist/)
npm test	Run the Vitest suite (unit + type tests)
npm run typecheck	Type-check only (tsc -b)
npm run lint	ESLint

Docs

• AGENTS.md — entry point for agents
• docs/calling-the-backend.md
• docs/auth.md
• docs/ui.md
• docs/patterns.md — add-a-route, form, data-table
• docs/build-constraints.md
• docs/adr/0001-xano-starter-frontend-stack.md

Security

This is a static bundle served to the browser. Never put secrets (API keys, DB credentials) in the code or any VITE_* variable — they ship publicly. The only credential is the logged-in user's own auth token.