Getting started
From install to running your first Vantage app.
Prerequisites
- Node.js 20 or newer
- A package manager (pnpm, npm, or yarn)
Create the smallest app
Add Vantage
Add @squadbase/vantage to your project.
pnpm add @squadbase/vantageWrite index.tsx
Put a single index.tsx at the project root. The default-exported component becomes the
route /. To keep pages under src/, write src/index.tsx instead — once src/ exists it
is the only page-scan root, and src/ never shows up in a URL
(→ Where pages live).
// index.tsx
export default function Dashboard() {
return (
<main className="p-6">
<h1 className="text-2xl font-semibold">Dashboard</h1>
</main>
);
}Start the dev server
pnpm exec vantage devThis starts http://localhost:5173 with HMR. Editing a page applies via React Fast Refresh
in place.
The development loop
| Command | Role |
|---|---|
vantage dev |
Dev server (HMR + optional API). Default :5173 |
vantage build |
Production build → dist/ (client + optional server) |
vantage preview |
Run the production build locally |
vantage check |
Static checks (routes, boundaries, forbidden files). Exit 1 on error |
vantage routes |
Print the page + API URL map |
Quick mode (pass a path directly)
Instead of cd-ing into a project, you can pass its path directly to start the dev server.
Point at a folder or an entry file and dev boots on it.
vantage ./demo # folder → run dev inside it
vantage ./demo/index.tsx # page file → use the folder holding its package.json
vantage ./demo/src/index.tsx # same with a src/ layout (the root is ./demo)
When the first argument isn’t a known command but points at a path, Vantage runs dev with that
path as the root (printing quick dev → <path>). See the
CLI reference for the full resolution rules.
You never write config files
Vantage takes “convention over configuration” literally. These files are a hard error
(vantage check fails) if present in your project:
vite.config.*tailwind.config.*postcss.config.*components.jsonvantage.config.*
Everything they used to configure is owned by Vantage. When you need to customize, use the explicit escape hatches described throughout this guide.
What to read next
- File-based routing — add more pages
- Pages & definePage — the page contract and metadata