Getting Started

Get a pracht app running in under a minute. This guide covers project creation, development, and your first production build.

Create a Project

The fastest way to start is with create-pracht. It scaffolds a working app with routing, a shell, an API route, and your choice of deployment adapter.

# pnpm
pnpm create pracht my-app

# npm
npm create pracht@latest my-app

# yarn
yarn create pracht my-app

# bun
bunx create-pracht my-app

The CLI will ask you to choose an adapter (Node.js, Cloudflare Workers, or Vercel). You can change this later in your vite.config.ts.

Project Structure

After scaffolding, your project looks like this:

my-app/
  src/
    routes.ts          # Route manifest (the central wiring file)
    routes/home.tsx    # First page component + loader
    shells/public.tsx  # Layout wrapper
    api/health.ts      # Sample API endpoint
  vite.config.ts       # Vite + pracht plugin config
  package.json

Development

Start the dev server with HMR. Changes to routes, shells, and loaders are reflected instantly.

pnpm dev

Open http://localhost:3000 to see your app. Edit src/routes/home.tsx and watch it update.

Build & Preview

# Production build (client + server bundles, SSG prerendering)
pnpm build

# Preview the production build locally
pnpm preview

Key Concepts

Route manifest — src/routes.ts declares all routes, their shells, middleware, and render modes. See Routing.
Render modes — each route can be SSR, SSG, ISG, or SPA. See Rendering Modes.
Loaders & API routes — server-side data fetching and mutations. See Data Loading.
Adapters — deploy to Node.js, Cloudflare, or Vercel. See Adapters.

Routing →