はじめに

インストールから最初の Vantage アプリを起動するまで。

前提

Node.js 20 以上
パッケージマネージャ（pnpm / npm / yarn のいずれか）

最小のアプリを作る

Vantage を追加する

プロジェクトに @squadbase/vantage を追加します。

pnpm add @squadbase/vantage

index.tsx を書く

プロジェクトルートに index.tsx を 1 つ置きます。default export されたコンポーネントがルート / になります。ページを src/ にまとめたい場合は src/index.tsx にします ― src/ があるとページ走査はその中だけになり、src/ は URL に現れません（→ ページを置く場所）。

// index.tsx
export default function Dashboard() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-semibold">Dashboard</h1>
    </main>
  );
}

開発サーバーを起動する

pnpm exec vantage dev

http://localhost:5173 が立ち上がります。HMR（ホットリロード）が効き、ページを編集すると React Fast Refresh がその場で反映します。

開発ループ

コマンド	役割
`vantage dev`	開発サーバー（HMR + オプションの API）。既定 `:5173`
`vantage build`	本番ビルド → `dist/`（クライアント + オプションのサーバー）
`vantage preview`	本番ビルドをローカルで起動
`vantage check`	静的検査（ルート・境界・禁止ファイル）。エラー時は exit 1
`vantage routes`	ページ + API の URL マップを表示

クイックモード（パスを直接渡す）

cd せずに、プロジェクトのパスを直接渡して開発サーバーを起動できます。手元のフォルダやエントリファイルをそのまま指すだけで dev が立ち上がります。

vantage ./demo                 # フォルダ → その中で dev を起動
vantage ./demo/index.tsx       # ページファイル → その `package.json` があるフォルダで dev
vantage ./demo/src/index.tsx   # src/ レイアウトでも同じ（root は ./demo）

第 1 引数が既知コマンドでなくパスを指すとき、Vantage はそれを root として dev を起動します（quick dev → <path> と表示）。詳しい解決ルールは CLI リファレンスを参照してください。

設定ファイルは書かない

Vantage は「設定より規約」を徹底しています。次のファイルはプロジェクトに置くと ハードエラー （vantage check が失敗）になります。

vite.config.*
tailwind.config.*
postcss.config.*
components.json
vantage.config.*

これらが担っていた役割は、すべて Vantage 側が持っています。カスタマイズが必要なときは、各ガイドで説明する「明示的なエスケープハッチ」を使います。

次に読む

ファイルベースルーティング — ページを増やす
ページと definePage — ページの契約とメタデータ