Get Started

Build a first page with @k8ordo/framework and build it with vite build as an app that runs with no server.

On this page

Install

npm

yarn

pnpm

bash

Copy code

npm install react react-dom server-only

npm

yarn

pnpm

bash

Copy code

npm install -D @k8ordo/framework @k8ordo/router vite typescript @types/node @types/react @types/react-dom

It runs with:

React 19.3 or later
Vite 8 or later
Node.js 24 or later

The guide for AI agents ships at node_modules/@k8ordo/framework/docs/GUIDE.md. Point your AGENTS.md or the like at that path.

Vite config

vite.config.ts

Copy code

import { framework } from '@k8ordo/framework/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [framework({ mode: 'static' })],
'static': runs with no server
});

The plugins framework() returns include React’s plugin and the RSC pipeline. You don’t need to add @vitejs/plugin-react yourself.

mode is required. This guide starts with 'static'. How it differs from 'server', which runs with a server, and how to choose is covered in Choosing a mode.

Generated types

tsconfig.json

Copy code

{
  "include": [
    // ...
    ".k8ordo/**/*.ts"
  ]
}

The framework writes a route table and its types, derived from src/routes/, into .k8ordo/. Add it to include, and the paths href() takes and a page’s params become typed.

Root layout

src/routes/layout.tsx

Copy code

import type { LayoutProps } from '@k8ordo/framework';

export default function RootLayout({ children }: LayoutProps<'/'>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

src/routes/layout.tsx is the layout around every page. The framework has no HTML template, so this file renders <html> and <body> too, and sets the lang of <html>.

Note

The whole document the root layout renders is hydrated. A CDN feature that rewrites HTML can make hydration fail. The cause and the fix are in Troubleshooting.

First page

src/routes/page.tsx

Copy code

export default function HomePage() {
  return (
    <>
      <title>Home</title>
      <h1>Hello</h1>
    </>
  );
}

A directory that holds a page.tsx is a URL, so src/routes/page.tsx is the page at /. A file with no directive is a Server Component; under 'static' it renders at build time.

A page sets its title by rendering a <title>.

There is no link component: a link between pages is a plain <a> whose href comes from href(). Adding pages and the file naming rules are covered in Routing.

Dev server and build

bash

Copy code

vite dev
vite build

vite build

Copy code

k8ordo: wrote 1 routes

vite dev is a development server that renders a page per request, with Fast Refresh: save a file, and the change shows right away.

vite build renders every page into dist/client/, and ends by printing how many routes it wrote. dist/client/ can go on any static host.

Putting it on a host, and running it under 'server', are covered in Deployment.