Base kit

Fullstack kit

Start the app kit with a server-rendered site, an API server, actions and realtime channels.

For: Anyone building an app and its own backend together, in one project and one language.

kitr new my-app --kit fullstack

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

Browse the files Source

kitr dev: The site on port 3000 and the API on 3001, together
kitr build: Both platforms, ready for kitr start
npm test: Vitest, starting with the home page test

Rendered on the server

The dashboard kit with SSR, so the first paint has the data and search engines see it.

An API server beside it

server/routes.ts serves typed routes to the app and to any other client, with an OpenAPI file.

Actions for the UI

Functions in app/actions/ run on the server and are called like local functions.

Live updates

A realtime channel in app/channels/ pushes changes to every open screen.

What's inside

Read from the kit's output in the kitr repository, so it matches what kitr new writes today. 18 packages · 11 components · 56 files.

Platforms: site: webssr api: server
Packages: router logger query http forms table state tailwind theme toast auth storage testing seo actions api realtime vite
Components: app-shellbuttoncarddata-tableempty-stateformiconinputlabelpage-headertheme-toggle

Every file it writes

Start with server/routes.ts. Pick any file to read it.

Source

server/routes.ts

import { defineRoutes } from '@kitr/kitr/app'
import api from '@kitr/api/routes'
import realtime from '@kitr/realtime/routes'
import HealthController from '#server/controllers/health-controller'
import { exampleChannel } from '#app/channels/example'

/**
 * Endpoints and sockets of this app. `kitr add` keeps the extension list current; `createServer({ routes })`
 * in server/main.ts serves it.
 */
export const routes = defineRoutes([api, realtime], (root) =>
  root.group('/api', (r) =>
    r.get('/health', [HealthController, 'show'], { name: 'health' }),
    // r.resource('projects', () => import('#server/controllers/projects-controller'))
  )
    .ws('/api/ws', { channels: [exampleChannel] /* , authorize: (request) => ... */ }),
)

/** Pass to createApiClient<ServerRoutes>() on the client. */
export type ServerRoutes = typeof routes.$types