# Web

> For agents: start with the [agent guide](https://ratstack.sh/llms.txt). Every page is Markdown by default; add `Accept: text/html` for HTML.

Free workshop: [Build Agent Loops That Never Stop Shipping](/tokenmaxx#interested).

## What it does

`apps/web` is the reader site. It is one Foldkit program.
Foldkit is a UI framework on Effect: a Model, Messages, an `update` function, and a pure view.

Server rendering means the Worker builds the page HTML for each request.
Prerendering means the build writes page HTML to files before deployment.
Hydration means the browser program adopts HTML that the server rendered and continues from it.

One `vite build` makes three outputs:

- The browser bundle that hydrates each page.
- The server `fetch` function that Foldkit generates from `src/entry.server.ts`.
- One HTML file for each path in the server entry's `prerenderPaths` export.

`Cloudflare.Website.Foldkit` deploys the outputs as one Worker. A request for a prerendered page gets the file. Any other request goes to the server `fetch` function. It renders the page, an error page, or a 404 with its real status.

The server forwards `/rpc` to the private RpcBackend Worker. Browser Commands call capabilities through that path.

## The standard

- `vite.config.ts` turns on rendering with one `foldkit({ ssr })` call. It uses the default `dist/client` and `dist/server` directories.
- The server entry exports `renderPage`, `renderDocument`, and `prerenderPaths`.
- Every finite public page is prerendered. Pages that depend on the request render on the server.
- Readable content and links work before browser JavaScript runs.
- A missing page returns a real 404. It never falls back to the home page.
- Production builds contain no development modules, devtools code, or test people.

## How to check

- Run `pnpm --filter @rat-stack/web build`. Read `apps/web/dist/server/foldkit.build.json`. It names `fetch.js` as the server entry and lists the prerendered paths.
- Run `pnpm --filter @rat-stack/web test` for page parity and the production-bundle exclusion test.
- Run `pnpm --filter @rat-stack/infra test`. The Website build test builds through [Alchemy](/skills/learn-alchemy), reads prerendered pages, and serves them, `/rpc`, and a 404 from the server bundle in workerd.
- On a preview, request a prerendered page and an unknown path with `curl`. The page returns complete HTML with `X-Preview-Commit`. The unknown path returns 404.

## Sources

1. [Web Vite configuration](https://github.com/joelhooks/rat-stack/blob/main/apps/web/vite.config.ts)
   GitHub joelhooks/rat-stack. The Foldkit plugin call that turns on the server build and prerendering. Accessed 2026-10-25.

2. [Website resource](https://github.com/joelhooks/rat-stack/blob/main/apps/web/src/website.ts)
   GitHub joelhooks/rat-stack. The Alchemy resource that deploys the client assets and the server handler. Accessed 2026-10-25.

3. [Server entry](https://github.com/joelhooks/rat-stack/blob/main/apps/web/src/entry.server.ts)
   GitHub joelhooks/rat-stack. The render function, the document renderer, and the prerendered paths. Accessed 2026-10-25.

4. [Website build test](https://github.com/joelhooks/rat-stack/blob/main/apps/infra/test/website-build.test.ts)
   GitHub joelhooks/rat-stack. Builds the Website through Alchemy and serves it from workerd. Accessed 2026-10-25.

## Lore on this page

- [CAFE names the Cloudflare, Alchemy, Foldkit and Effect stack](/lore/cafe-stack)

## Linked from

- Agent guide → An Effect stack so pure (aspirational) Kit Langton will blush. → [Read page](https://ratstack.sh/llms.txt)

- Agent rules for rat-stack (AGENTS.md) → What you may change, which commands to run, and which changes need approval. → [Read page](https://ratstack.sh/AGENTS.md)

- Build and run rat-stack (README.md) → What is in the repo, how the example works, and how to run it. → [Read page](https://ratstack.sh/README.md)

- CAFE names the Cloudflare, Alchemy, Foldkit and Effect stack → CAFE is a named stack: Cloudflare runs the app, Alchemy declares it, Foldkit draws the UI, and Effect does the typed work. → [Read page](https://ratstack.sh/lore/cafe-stack)

- Change log → What changed in the files served here, newest first. → [Read page](https://ratstack.sh/log)

- Effect 4 study: September 2026 → Dated Effect 4 source studies from September 2026; current versions live in pins.md. → [Read page](https://ratstack.sh/resources/effect-4-reference-projects)

- Full agent guide → An Effect stack so pure (aspirational) Kit Langton will blush. → [Read page](https://ratstack.sh/llms-full.txt)

- Rat Stack systems | rat-stack → The systems rat-stack ships, the standard each keeps, and how to check it. → [Read page](https://ratstack.sh/systems)

- Source change history (log.md) → The generated change log as Markdown. → [Read page](https://ratstack.sh/log.md)