web

Ship to the browser as a static site, a single-page app or a server-rendered app, installable if you want.

PlatformsClientBuilt onViteTanStack StartVite PWA

What it is

@kitr/web adds a web platform with a mode: static, spa or ssr. kitr dev, build and start know how to run each. The pwa option makes the app installable. A project can run more than one web platform.

For phones add mobile; for a desktop window, desktop or tauri.

Install

kitr add web site

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/web with TanStack Start, a site platform and the dev, build and start scripts. Adds router and react first if missing. kitr new does this for you. Every change.

Quick start

Replace the home page with an order list:

// app/pages/home.tsx
const orders = [
  { id: 'ord_1042', customer: 'Ada', total: 129 },
  { id: 'ord_1043', customer: 'Grace', total: 84 },
]

export default function OrdersPage() {
  return (
    <main>
      <h1>Acme orders</h1>
      <ul>
        {orders.map((order) => (
          <li key={order.id}>
            {order.id}: {order.customer}, ${order.total}
          </li>
        ))}
      </ul>
    </main>
  )
}

Run it:

kitr dev site

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Vite starts on http://localhost:3000/ and you see the two orders. Edits to the file reload the page in place. When it looks right, build it and serve the build:

kitr build site
kitr start site
# ✔ site: serving dist/site on http://localhost:3000/

kitr build site writes dist/site for the chosen mode, and kitr start site serves it the way production will. Next in the guide: Ship your first page.

Built on

Built on Role
Vite through @kitr/vite The dev server and the build.
TanStack Start Server rendering, prerendering and the server entry.
vite-plugin-pwa The service worker and manifest for installable apps.
srvx Serving the SSR build on Node, Bun, Deno and Workers.

kitr adds the platform contract, the three modes, the manifest, the install and update hooks and the deploy defaults.

Problems it solves

Further reading