# Quick start

> Create an app and run it.

## Automatic installation

Copy this prompt and paste it into your coding agent. It will guide you through setting up a Fondu app, in a new
project or an existing one, and answer your questions along the way.

```text wrap
Read https://fondu.dev/docs/quick-start.md, then help me create a Fondu app (or add Fondu to this project). Ask me where it will run (Node, Bun or Cloudflare Workers), set it up as the guide says, and explain each file you create.
```

## Create an app

```sh title="npm"
npm create fondu@latest my-app
```

```sh title="pnpm"
pnpm create fondu my-app
```

```sh title="yarn"
yarn create fondu my-app
```

```sh title="bun"
bun create fondu my-app
```

It asks where the app runs: Node, Bun or Cloudflare Workers (or pass `--target node`, `--target bun` or
`--target cloudflare`). Then it writes a small app: one route, its page, the error page, Tailwind CSS, editor snippets
and an `AGENTS.md` for coding agents, and installs the dependencies with the package manager you ran it with.

## Run it

```sh title="npm"
cd my-app
npm run dev
```

```sh title="pnpm"
cd my-app
pnpm dev
```

```sh title="yarn"
cd my-app
yarn dev
```

```sh title="bun"
cd my-app
bun dev
```

The app is at `http://localhost:5173`. Edit `app/pages/index.tsx` and the page updates in place; edit
`app/routes/index.ts` and the page reloads with the new props.

## Add a page

A page is a route file and a page component. Add `app/routes/about.ts`:

```ts
import { defineHandler, render } from 'fondu'

// GET /about
export const loader = defineHandler((c) => render(c, 'about', { team: ['Ada', 'Grace'] }))
```

And `app/pages/about.tsx`:

```tsx
import { Head } from '@inertiajs/react'

export default function About({ team }: { team: string[] }) {
  return (
    <>
      <Head title="About" />
      <h1>About</h1>
      <ul>
        {team.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </>
  )
}
```

`render(c, 'about', …)` is checked against the page: a page that doesn't exist, a missing prop or one of the wrong type
is a type error. Link to it with Inertia's `<Link>` and a URL from `href()`, typed after your routes:

```tsx
import { Link } from '@inertiajs/react'
import { href } from 'fondu/client'

export const AboutLink = () => <Link href={href('/about')}>About</Link>
```

## Build

```sh title="npm"
npm run build
```

```sh title="pnpm"
pnpm build
```

```sh title="yarn"
yarn build
```

```sh title="bun"
bun run build
```

Then `start` on Node or Bun, or `deploy` on Cloudflare: [Deploying](https://fondu.dev/docs/deploying.md) has the details.

## Next

- [Project structure](https://fondu.dev/docs/project-structure.md): the files of the app you just created.
- [Routes](https://fondu.dev/docs/routes.md) and [Pages and props](https://fondu.dev/docs/pages.md): the two kinds of files you will write most.
- Every page of these docs is also Markdown: add `.md` to its URL. [llms.txt](/llms.txt) lists them all.