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

Every export of kitr/web, kitr/web/client, kitr/web/provider, kitr/web/vite, read from the published type definitions. The guide shows them in use.

kitr/web

pwaManifest

function pwaManifest(options: WebOptions, appName: string): {
  name: string;
  short_name: string;
  description: string | undefined;
  theme_color: string;
  background_color: string;
  display: "standalone" | "fullscreen" | "minimal-ui" | "browser";
  start_url: string;
  icons: {
    src: string;
    sizes: string;
    type?: string;
    purpose?: string;
  }[];
};

The manifest vite-plugin-pwa gets, from web({ pwa }) and the app name.

startWeb

function startWeb(ctx: PlatformContext, options: {
  mode: WebMode;
  port: number;
  host: string;
}): Promise<void>;

Serve a built web platform: the Start server bundle for ssr, static files otherwise.

web

const web: import("@kitr/core").PlatformFactory<WebOptions>;

The web platform. List it in kitrrc.ts under platforms:

platforms: { site: web({ mode: 'ssr', pwa: true, port: 3000 }) }

kitr dev site starts Vite, kitr build site writes dist/site, kitr start site serves it.

PwaOptions

interface PwaOptions {
  name?: string;
  shortName?: string;
  description?: string;
  themeColor?: string;
  backgroundColor?: string;
  display?: 'standalone' | 'fullscreen' | 'minimal-ui' | 'browser';
  startUrl?: string;
  icons?: Array<{
    src: string;
    sizes: string;
    type?: string;
    purpose?: string;
  }>;
  /** `autoUpdate` reloads on a new version; `prompt` lets `useServiceWorker()` show a banner. Default `prompt`. */
  registerType?: 'autoUpdate' | 'prompt';
  /** Enable the service worker in `kitr dev`. Default false. */
  devEnabled?: boolean;
  /** Raw vite-plugin-pwa options merged last. */
  plugin?: Record<string, unknown>;
}

WebOptions

interface WebOptions {
  /**
   * `ssr`: TanStack Start renders on the server (needs a Node-ish host).
   * `static`: every route is prerendered at build time to plain HTML, served from any CDN.
   * `spa`: one shell, client rendering, served from any static host. Default `spa`.
   */
  mode: WebMode;
  /** Dev server and production port. Default 3000. */
  port: number;
  host?: string;
  /** Installable app: manifest and service worker. `true` uses the app name; an object sets the manifest. */
  pwa: boolean | PwaOptions;
  /** Public base path, for apps served under a sub-path. Default `/`. */
  base: string;
  /** Open the browser on `kitr dev`. Default false. */
  open: boolean;
}

WebMode

type WebMode = 'static' | 'spa' | 'ssr';

kitr/web/client

useInstallPrompt

function useInstallPrompt(): {
  canInstall: boolean;
  installed: boolean;
  install: () => Promise<"unavailable" | "accepted" | "dismissed">;
};

Captures the browser's install prompt so the app can show its own button. canInstall is false on browsers that do not fire the event (Safari) and after install.

useServiceWorker

function useServiceWorker(options?: {
  path?: string;
  onNeedRefresh?: () => void;
}): {
  needRefresh: boolean;
  offlineReady: boolean;
  update: () => void;
  registration: ServiceWorkerRegistration | null;
};

Registers the service worker vite-plugin-pwa emits (/sw.js) and reports a waiting update. With registerType: 'prompt', call update() to activate it and reload.

kitr/web/provider

webProvider

const webProvider: import("@kitr/core").KitrProvider;

Runtime provider of the web platform. Registers the platform driver that tells kitr/platform the app runs in a browser (or on the server rendering for one).

kitr/web/vite

kitrPwa

function kitrPwa(options: WebOptions, appName: string): Promise<Plugin[]>;

vite-plugin-pwa configured from web({ pwa }). The kitr() Vite plugin adds it when the running web platform has pwa on; call it yourself only for a custom Vite setup.