# First Application

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

Source: [https://askrjs.com/docs/getting-started/first-application](https://askrjs.com/docs/getting-started/first-application)

Status: stable. Packages: @askrjs/askr.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Example

```tsx
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.

## Documentation navigation

[Previous](https://askrjs.com/docs/getting-started/choose-a-starter/index.md) | [Next](https://askrjs.com/docs/getting-started/project-structure/index.md)