Fondu

Quick start

View as Markdown

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.

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

npm create fondu@latest 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

cd my-app
npm run 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:

import { defineHandler, render } from 'fondu'

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

And app/pages/about.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:

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

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

Build

npm run build

Then start on Node or Bun, or deploy on Cloudflare: Deploying has the details.

Next