# Create a routed Forma application

Start from the `native-router` template to connect a typed Rust shell, independent leaf pages and client navigation. Use the named candidate only after it appears in the [release record](https://github.com/getforma-dev/forma/releases). The commands below do not install Node.js or Rust for you.

## Install the prerequisites

Install **Node.js 22 or later with npm** and **Rust 1.85 or later with Cargo**. Check both toolchains before scaffolding:

```sh
node --version
npm --version
rustc --version
cargo --version
```

## Create, build and run

```sh
npx @getforma/create-app@3.2.0-rc.2 my-routed-app --template native-router
cd my-routed-app
cd admin
npm ci
npm run build
cd ..
cargo run --locked
```

Open `http://localhost:3000`. The frontend build emits the native modules, manifest and closed browser group before Rust loads them. Commit both `admin/package-lock.json` and `Cargo.lock`; install and rebuild the whole coordinated set when updating.

Before publication, this command is not an installation path. Framework contributors use the [documented packed-candidate workflow](https://github.com/getforma-dev/forma/blob/3b6c7766a1b47558e666f76236a53697b3737bde/packages/create-app/README.md#development) with authenticated artifacts. The source template's lockfiles are release seeds until packing seals them.

## Verify the retained layout

Change the shell counter and write a note in its input. Follow Home and About, then use Back and Forward. The same shell keeps its nodes and state while the destination leaf changes. A leaf's state belongs to that leaf; it starts again after the owner is replaced. Refresh the page to see a complete Rust response and reset in-memory state.

Disable JavaScript and follow the same links. Rust still renders every direct destination; interactive island buttons require JavaScript. This is progressive enhancement of actual page responses.

For a second connected example, the [website router project](/examples/native-router/) adds distinct destination islands and server-seed GET forms. Its [live lab](/lab/router/) exposes document/reset controls and a curated source viewer.

## Follow the files

| File                                                | Responsibility                                                                                             |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `admin/build.ts`                                    | Compile owner entries and declare the navigation group                                                     |
| `admin/src/navigation.ts`                           | Initialize the public native adapter with the generated bootstrap                                          |
| `admin/src/shell/app.tsx`                           | Declare shell props, persistent island and one empty child outlet                                          |
| `admin/src/home/app.tsx`, `admin/src/about/app.tsx` | Declare independently compiled destinations                                                                |
| `src/main.rs`                                       | Bind finalized typed handles, validate request data, negotiate complete document or owner-branch responses |

Keep the outlet outside island-owned subtrees. Do not concatenate server fragments, reconstruct bootstrap records or mount a second runtime over adopted nodes. The [routing guide](/docs/3.2/routing/) explains the boundaries; the [router API](/docs/3.2/api-router/) provides exact signatures.

## Build the rest of the application

Add ordinary Rust/Axum handlers for APIs, persistence and services. Declare enhanced actions only after supplying application authentication, authorization, CSRF and transaction rules. A transport failure after POST leaves an unknown outcome; it is not permission to retry the mutation.

Deploy the server, manifest and emitted assets as one result and retain a complete rollback. Test actual direct URLs, no-JS behavior, layout identity, leaf cleanup, focus and Back/Forward in the consuming application before rollout.