コンテンツにスキップ
Vantage
English
Esc
navigateopen⌘Jpreview
このページの内容

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/vantage

Write 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 dev

This 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.json
  • vantage.config.*

Everything they used to configure is owned by Vantage. When you need to customize, use the explicit escape hatches described throughout this guide.

このページは役に立ちましたか?