Askr documentation
Getting Started

First Application

Scaffold a project, register a route, add a piece of state, and produce a real production build.

Example

import { state } from '@askrjs/askr';
import { createRouteRegistry, route } from '@askrjs/askr/router';

function HomePage() {
  const [count, setCount] = state(0);
  return <button onClick={() => setCount((value) => value + 1)}>Count: {count()}</button>;
}

export const registry = createRouteRegistry(() => route('/', HomePage));

Create the project

Run `askr create spa my-app` (or another template) and `cd my-app`. Open the generated route registry — `src/pages/**/_routes.tsx` for the `spa` template, or `src/router.tsx` plus `src/routes/*.ts` for `startkit`, `ssr`, `ssg`, and `full-stack` — to see how the starter route is already wired up with `route()`.

Register a route

Routes are declared with `route(path, Component, options?)` inside a `createRouteRegistry(() => { ... })` callback, which returns the registry your application boots from. Add a new entry — `route('/about', () => <About />)` — inside the existing callback, then confirm the exported registry you pass to `createSPA` picks it up.

Add state

Call `state(initialValue)` inside a component to get a `[getter, setter]` pair — read the current value by calling the getter as a function, and update it by calling the setter, e.g. `setCount((value) => value + 1)`. State reads are tracked automatically wherever they're called, so a component re-renders when the state it read changes.

Build the application

Run `npm run build` from the generated project; the SPA template's build produces a client bundle only, while `ssr` and `full-stack` both also build a server bundle to run with Node — full-stack isn't client-only the way SPA is. SSG can drive `createStaticGen()` to render every route to HTML in `outputDir`. Check the build output against the application mode you picked — an SSG build should produce static files per route, while an SSR or full-stack build produces a server bundle you run with Node.