<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][README.md]" value="# Cloudflare Workers with Hono

Example project demonstrating Cloudflare Workers deployment with Hono router.

## Getting Started

```sh
git clone https://github.com/rivet-dev/rivet.git
cd rivet/examples/cloudflare-workers-hono
npm install
npm run dev
```


## Features

- **Cloudflare Workers integration**: Deploy Rivet Actors to Cloudflare&#39;s edge network using Durable Objects
- **Hono routing**: Use Hono web framework for HTTP request handling
- **Edge-native execution**: Actors run at the edge for low-latency global access
- **Type-safe API endpoints**: Full TypeScript support across actor and HTTP layers

## Implementation

This example demonstrates combining Hono with Rivet Actors on Cloudflare Workers:

- **Actor Definition** ([`src/backend/registry.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/cloudflare-workers-hono/src/backend/registry.ts)): Shows how to integrate Hono router with actors on Cloudflare Workers

## Resources

Read more about [Cloudflare Workers integration](/docs/platforms/cloudflare-workers) and [actions](/docs/actors/actions).

## License

MIT
">
<input type="hidden" name="project[files][package.json]" value="{
  &quot;name&quot;: &quot;example-cloudflare-workers-hono&quot;,
  &quot;version&quot;: &quot;2.0.21&quot;,
  &quot;private&quot;: true,
  &quot;type&quot;: &quot;module&quot;,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;wrangler dev&quot;,
    &quot;deploy&quot;: &quot;wrangler deploy&quot;,
    &quot;check-types&quot;: &quot;tsc --noEmit&quot;,
    &quot;client&quot;: &quot;tsx scripts/client.ts&quot;,
    &quot;build&quot;: &quot;tsc&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@cloudflare/workers-types&quot;: &quot;^4.20250129.0&quot;,
    &quot;rivetkit&quot;: &quot;https://pkg.pr.new/rivet-dev/rivet/rivetkit@49011521cbd31b9a30d471fe187629aa05b36cc1&quot;,
    &quot;@types/node&quot;: &quot;^22.13.9&quot;,
    &quot;tsx&quot;: &quot;^3.12.7&quot;,
    &quot;typescript&quot;: &quot;^5.5.2&quot;,
    &quot;wrangler&quot;: &quot;^4.22.0&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@rivetkit/cloudflare-workers&quot;: &quot;https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@49011521cbd31b9a30d471fe187629aa05b36cc1&quot;,
    &quot;hono&quot;: &quot;^4.8.0&quot;
  },
  &quot;stableVersion&quot;: &quot;0.8.0&quot;,
  &quot;license&quot;: &quot;MIT&quot;
}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
	&quot;compilerOptions&quot;: {
		/* Visit https://aka.ms/tsconfig.json to read more about this file */

		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
		&quot;target&quot;: &quot;esnext&quot;,
		/* Specify a set of bundled library declaration files that describe the target runtime environment. */
		&quot;lib&quot;: [&quot;esnext&quot;],
		/* Specify what JSX code is generated. */
		&quot;jsx&quot;: &quot;react-jsx&quot;,

		/* Specify what module code is generated. */
		&quot;module&quot;: &quot;esnext&quot;,
		/* Specify how TypeScript looks up a file from a given module specifier. */
		&quot;moduleResolution&quot;: &quot;bundler&quot;,
		/* Specify type package names to be included without being referenced in a source file. */
		&quot;types&quot;: [&quot;@cloudflare/workers-types&quot;],
		/* Enable importing .json files */
		&quot;resolveJsonModule&quot;: true,

		/* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
		&quot;allowJs&quot;: true,
		/* Enable error reporting in type-checked JavaScript files. */
		&quot;checkJs&quot;: false,

		/* Disable emitting files from a compilation. */
		&quot;noEmit&quot;: true,

		/* Ensure that each file can be safely transpiled without relying on other imports. */
		&quot;isolatedModules&quot;: true,
		/* Allow &#39;import x from y&#39; when a module doesn&#39;t have a default export. */
		&quot;allowSyntheticDefaultImports&quot;: true,
		/* Ensure that casing is correct in imports. */
		&quot;forceConsistentCasingInFileNames&quot;: true,

		/* Enable all strict type-checking options. */
		&quot;strict&quot;: true,

		/* Skip type checking all .d.ts files. */
		&quot;skipLibCheck&quot;: true
	},
	&quot;include&quot;: [&quot;src/**/*&quot;]
}
">
<input type="hidden" name="project[files][turbo.json]" value="{
	&quot;$schema&quot;: &quot;https://turbo.build/schema.json&quot;,
	&quot;extends&quot;: [&quot;//&quot;],
	&quot;tasks&quot;: {
		&quot;build&quot;: {
			&quot;dependsOn&quot;: [&quot;@rivetkit/cloudflare-workers#build&quot;, &quot;rivetkit#build&quot;]
		}
	}
}
">
<input type="hidden" name="project[files][wrangler.json]" value="{
	&quot;name&quot;: &quot;rivetkit-cloudflare-workers-example&quot;,
	&quot;main&quot;: &quot;src/index.ts&quot;,
	&quot;compatibility_date&quot;: &quot;2025-01-20&quot;,
	&quot;compatibility_flags&quot;: [&quot;nodejs_compat&quot;],
	&quot;migrations&quot;: [
		{
			&quot;tag&quot;: &quot;v1&quot;,
			&quot;new_sqlite_classes&quot;: [&quot;ActorHandler&quot;]
		}
	],
	&quot;durable_objects&quot;: {
		&quot;bindings&quot;: [
			{
				&quot;name&quot;: &quot;ACTOR_DO&quot;,
				&quot;class_name&quot;: &quot;ActorHandler&quot;
			}
		]
	},
	&quot;kv_namespaces&quot;: [
		{
			&quot;binding&quot;: &quot;ACTOR_KV&quot;,
			&quot;id&quot;: &quot;example_namespace&quot;,
			&quot;preview_id&quot;: &quot;example_namespace_preview&quot;
		}
	],
	&quot;observability&quot;: {
		&quot;enabled&quot;: true
	}
}
">
<input type="hidden" name="project[files][scripts/client.ts]" value="async function main() {
	const endpoint = process.env.RIVET_ENDPOINT || &quot;http://localhost:8787&quot;;
	const res = await fetch(`${endpoint}/increment/foo`, {
		method: &quot;POST&quot;,
	});
	console.log(&quot;Output:&quot;, await res.text());
}

main();
">
<input type="hidden" name="project[files][src/index.ts]" value="import { createHandler } from &quot;@rivetkit/cloudflare-workers&quot;;
import { Hono } from &quot;hono&quot;;
import { createClient } from &quot;rivetkit/client&quot;;
import { registry } from &quot;./registry&quot;;

const client = createClient&lt;typeof registry&gt;();

// Setup router
const app = new Hono();

// Example HTTP endpoint
app.post(&quot;/increment/:name&quot;, async (c) =&gt; {
	const name = c.req.param(&quot;name&quot;);

	const counter = client.counter.getOrCreate(name);
	const newCount = await counter.increment(1);

	return c.text(`New Count: ${newCount}`);
});

const { handler, ActorHandler } = createHandler(registry, { fetch: app.fetch });
export { handler as default, ActorHandler };
">
<input type="hidden" name="project[files][src/registry.ts]" value="import { actor, setup } from &quot;rivetkit&quot;;

export const counter = actor({
	state: { count: 0 },
	actions: {
		increment: (c, x: number) =&gt; {
			c.state.count += x;
			return c.state.count;
		},
	},
});

export const registry = setup({
	use: { counter },
});
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="example-cloudflare-workers-hono">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>