# Full-stack development with Fresh 2

Fresh 2 is a full-stack framework built on Web standards, Deno, and Preact. Pages render on the server by default; only interactive components placed in `islands/` send their corresponding JavaScript to the browser.

## Create a project

```bash
deno run -Ar jsr:@fresh/init
cd my-fresh-app
deno task dev
```

The current generated structure includes `routes/` (with the `_app.tsx` wrapper), `islands/`, `components/`, `static/`, `main.ts`, `client.ts`, and `vite.config.ts`. To tell whether a guide still targets Fresh 1.x, look for these signals: the presence of `fresh.gen.ts`, `dev.ts`, or `fresh.config.ts` means 1.x; Fresh 2 replaced them with `vite.config.ts` and `client.ts` (`routes/_app.tsx` exists in both versions and is not a distinguishing marker).

## Page route

```tsx title="routes/about.tsx"
import { define } from "@/utils.ts";

export default define.page(() => (
  <main>
    <h1>About</h1>
    <p>This HTML is rendered on the server.</p>
  </main>
));
```

## Island

```tsx title="islands/Counter.tsx"
import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return <button onClick={() => count.value++}>Count: {count}</button>;
}
```

Create an island only for browser state, events, or effects. Keep navigation, headings, and product details server-rendered to preserve Fresh's low-client-JavaScript advantage.

## APIs, middleware, and deployment

API routes return Web `Response` objects. Put authentication, request IDs, and security headers in middleware. Run `deno task check` and project tests before deployment. Fresh runs on the new Deno Deploy, Docker, and other places that run Deno.

<Callout type="info" title="Fit boundary">
Fresh suits SSR-heavy content, commerce, back-office, and CRUD applications. For an offline-first SPA with heavy client state, evaluate a client-first Vite stack too.
</Callout>

Official references: [Fresh introduction](https://usefresh.dev/docs/introduction), [Getting started](https://usefresh.dev/docs/getting-started), and [Deployment](https://usefresh.dev/docs/deployment).