MATES / Docs

create-mates CLI

Scaffold SPA or fullstack Mates projects from the command line with npm create mates.

Why create-mates

create-mates is the official scaffolder for Mates apps. It walks you through project type — SPA (Vite), Fullstack SPA, or Fullstack SSR — plus language, optional mates-ui, and git init. Use it whenever you need a Vite-wired starting point instead of hand-rolling config.

Usage

npm create mates@latest

# or pass the project name directly
npm create mates@latest my-app

The CLI walks you through:

Question
Options
Project type SPA (Vite) · Fullstack SPA · Fullstack SSR
Language (SPA only) TypeScript (recommended) · JavaScript
mates-ui? (SPA only) Yes · No
Git init? Yes · No

What you get — SPA

my-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.ts
    ├── App.ts
    └── Counter.ts

A Vite-powered client-only SPA with the framework wired up. Then:

cd my-app
npm install
npm run dev

Choosing mates-ui adds the component library with a preconfigured theme — the template ships a ThemeToggle and styled Counter so the design system is working before you write anything. Browse components at ui.mates-js.dev.

What you get — Fullstack

my-app/
├── mates.config.ts
├── .env.example
├── package.json
├── tsconfig.json
├── client/
│   ├── app.ts
│   ├── Features/Counter.ts
│   └── Router/RouterPage.ts
└── server/
    ├── api/users.ts
    └── main.ts

A fullstack project with an RPC server: export functions from server/api/ and import them directly in client code — TypeScript checks the contract end to end. Security headers and middleware defaults live in mates.config.ts / server/main.ts. Fullstack SSR scaffolds enable document SSR + bundleAllCss.

cd my-app
npm install
npm run dev

Where to next