worker-react

Cloudflare Workers + React example

A Cap'n Web API served from a Worker and called from a React app, comparing batched promise pipelining against the same calls made sequentially. Both ends are validated at runtime: @validateRpc() on the server boundary, validateStub() on the client.

Runs as a playground in the docs under Examples, and locally as a real Worker.

Quick start

From the repo root:

npm run build   # the examples resolve `capnweb` to dist/
npx wrangler dev --cwd examples/worker-react --ip 127.0.0.1 --port 8787

The rest of this file covers running the pieces individually.

Layout

• server/worker.ts: Worker RPC endpoint at /api.
• client/: React/Vite app.
• wrangler.jsonc: Worker config. Wrangler runs capnweb-validate build before starting and points main at the generated Worker copy.

Run locally

From the repo root:

npm run build
cd examples/worker-react/client
npm install
npm run build
cd ..
npx wrangler dev --config wrangler.jsonc

Open http://127.0.0.1:8787.

For client debugging with Vite, run the Worker from the example directory:

cd examples/worker-react
npx wrangler dev --config wrangler.jsonc --ip 127.0.0.1 --port 8787 --inspector-port 9229

In another terminal, run Vite from the repo root:

cd examples/worker-react/client
npm run dev

The Vite dev server proxies /api to http://127.0.0.1:8787.

VS Code debug

Use the validate: debug all launch configuration, which starts Wrangler and Vite together.

Worker validation output is generated under .wrangler/validate/worker.ts. The React client uses normal Cap'n Web client sessions wrapped explicitly with validateStub().

Tuning delays

Set these in wrangler.jsonc:

• DELAY_AUTH_MS (default 80)
• DELAY_PROFILE_MS (default 120)
• DELAY_NOTIFS_MS (default 120)
• SIMULATED_RTT_MS per direction (default 120)
• SIMULATED_RTT_JITTER_MS per direction (default 40)