chore(example-hono-bun): add frontend to example (#1381)

Author: NathanFlurry

examples/hono-bun/README.md

@@ -1,6 +1,6 @@
 # Hono + Bun Integration for RivetKit
 
-Example project demonstrating Hono web framework with Bun runtime integration with [RivetKit](https://rivetkit.org).
+Example project demonstrating Hono web framework with Bun runtime and React frontend integration with [RivetKit](https://rivetkit.org).
 
 [Learn More →](https://github.com/rivet-dev/rivetkit)
 
@@ -26,7 +26,11 @@ npm install
 npm run dev
 ```
 
-Test the server by running:
+This will start both the backend server (on port 8080) and the frontend dev server (on port 5173).
+
+Open your browser to [http://localhost:5173](http://localhost:5173) to see the counter application.
+
+You can also test the server directly by running:
 
 ```sh
 curl -X POST http://localhost:8080/increment/test

examples/hono-bun/package.json

@@ -4,17 +4,29 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "bun --watch src/server.ts",
+    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
+    "dev:backend": "bun --watch src/backend/server.ts",
+    "dev:frontend": "vite",
+    "build": "vite build",
     "check-types": "tsc --noEmit",
     "connect": "tsx scripts/connect.ts"
   },
   "devDependencies": {
     "@types/bun": "^1.1.15",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "concurrently": "^8.2.2",
     "rivetkit": "workspace:*",
-    "typescript": "^5.5.2"
+    "tsx": "^3.12.7",
+    "typescript": "^5.5.2",
+    "vite": "^5.0.0"
   },
   "dependencies": {
-    "hono": "^4.7.0"
+    "@rivetkit/react": "workspace:*",
+    "hono": "^4.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "keywords": [
     "rivetkit",

examples/hono-bun/src/registry.ts examples/hono-bun/src/backend/registry.tsexamples/hono-bun/src/registry.ts renamed to examples/hono-bun/src/backend/registry.ts

@@ -5,6 +5,7 @@ export const counter = actor({
 	actions: {
 		increment: (c, x: number) => {
 			c.state.count += x;
+			c.broadcast("newCount", c.state.count);
 			return c.state.count;
 		},
 	},

examples/hono-bun/src/server.ts examples/hono-bun/src/backend/server.tsexamples/hono-bun/src/server.ts renamed to examples/hono-bun/src/backend/server.ts

@@ -1,5 +1,6 @@
 import { Hono } from "hono";
 import { upgradeWebSocket, websocket } from "hono/bun";
+import { cors } from "hono/cors";
 import { registry } from "./registry";
 
 const { client, fetch } = registry.start({
@@ -10,11 +11,22 @@ const { client, fetch } = registry.start({
 	overrideServerAddress: "http://localhost:8080/rivet",
 	// Specify Hono-specific upgradeWebSocket
 	getUpgradeWebSocket: () => upgradeWebSocket,
+	cors: {
+		origin: "http://localhost:5173",
+	},
 });
 
 // Setup router
 const app = new Hono();
 
+app.use(
+	"*",
+	cors({
+		origin: "http://localhost:5173",
+		credentials: true,
+	}),
+);
+
 app.use("/rivet/*", async (c) => {
 	return await fetch(c.req.raw, c.env);
 });

examples/hono-bun/src/frontend/App.tsx

@@ -0,0 +1,37 @@
+import { createClient, createRivetKit } from "@rivetkit/react";
+import { useState } from "react";
+import type { registry } from "../backend/registry";
+
+const client = createClient<typeof registry>("http://localhost:8080/rivet");
+const { useActor } = createRivetKit<typeof registry>(client);
+
+function App() {
+	const [count, setCount] = useState(0);
+	const [counterName, setCounterName] = useState("test-counter");
+
+	const counter = useActor({
+		name: "counter",
+		key: [counterName],
+	});
+
+	counter.useEvent("newCount", (x: number) => setCount(x));
+
+	const increment = async () => {
+		await counter.connection?.increment(1);
+	};
+
+	return (
+		<div>
+			<h1>Counter: {count}</h1>
+			<input
+				type="text"
+				value={counterName}
+				onChange={(e) => setCounterName(e.target.value)}
+				placeholder="Counter name"
+			/>
+			<button onClick={increment}>Increment</button>
+		</div>
+	);
+}
+
+export default App;

examples/hono-bun/src/frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hono Bun Counter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

examples/hono-bun/src/frontend/main.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+);

examples/hono-bun/vite.config.ts

@@ -0,0 +1,13 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [react()],
+	root: "src/frontend",
+	build: {
+		outDir: "../../dist",
+	},
+	server: {
+		host: "0.0.0.0",
+	},
+});