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

[NathanFlurry]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivetkit-serverless	Canceled			Oct 13, 2025 6:37pm

[NathanFlurry]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• chore(example-hono-bun): add frontend to example #1381 👈 (View in Graphite)
• fix(core): do not redirect client endpoint if default server disabled #1382
• fix(core): fix endpoint undefined log #1380
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• merge queue - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

Claude finished @NathanFlurry's task —— View job

---

PR Review: Add Frontend to Hono-Bun Example

Todo List:

• Read and analyze all changed files
• Review code quality and best practices
• Check for potential bugs or issues
• Assess performance considerations
• Review security concerns
• Evaluate test coverage
• Check adherence to project conventions

Overall Assessment

This PR successfully adds a React frontend to the hono-bun example, creating a full-stack application that demonstrates RivetKit's actor system with real-time updates. The implementation is well-structured and follows project conventions.

✅ Strengths

Code Quality & Best Practices

• Clean architecture: Well-organized separation between backend (src/backend/) and frontend (src/frontend/) directories
• Type safety: Excellent TypeScript usage with proper type imports from backend registry
• React hooks: Proper use of RivetKit React hooks (useActor, useEvent) demonstrating the framework's capabilities
• Modern tooling: Good use of Vite for frontend development with appropriate configuration

Documentation & Project Structure

• README compliance: Follows the CLAUDE.md guidelines for example READMEs with proper structure and links
• Package.json compliance: Includes relevant keywords and follows workspace dependency patterns
• Development workflow: Well-configured concurrent development with separate backend/frontend dev commands

RivetKit Integration

• Real-time updates: Excellent demonstration of actor events with counter.useEvent("newCount")
• Proper client usage: Correct implementation of RivetKit client setup and actor connections
• CORS configuration: Properly configured CORS for local development

⚠️ Issues & Recommendations

Security Concerns

1. Hardcoded URLs: Both frontend and backend have hardcoded localhost:5173 and localhost:8080
   • src/backend/server.ts:15,25 - CORS origins hardcoded
   • src/frontend/App.tsx:5 - Client endpoint hardcoded
   • Recommendation: Use environment variables for configurable endpoints

Code Quality Issues

2. Console.log in production code:

   • packages/rivetkit/src/remote-manager-driver/api-utils.ts:19 - Debug console.log should be removed
   • Recommendation: Replace with proper logger usage per CLAUDE.md guidelines

3. Error handling:

   • src/frontend/App.tsx:20 - No error handling for the increment action
   • Recommendation: Add try/catch or error handling for user feedback

4. Accessibility:

   • src/frontend/App.tsx:26-31 - Input and button lack proper labels/aria attributes
   • Recommendation: Add proper accessibility attributes

Performance Considerations

5. Optional chaining:
   • src/frontend/App.tsx:20 - Using optional chaining on counter.connection?.increment(1)
   • Recommendation: Consider handling disconnected state more explicitly for better UX

Testing & Coverage

6. No tests: The example lacks any test coverage
   • Recommendation: Consider adding basic integration tests for the counter functionality

Minor Issues

7. Package.json inconsistency:
   • Missing peer dependencies recommendation from CLAUDE.md for @rivetkit/* packages
   • bun vs npm usage - README uses npm install but dev scripts use bun

📋 Detailed File Analysis

Frontend Files (src/frontend/)

• App.tsx: Well-structured React component with proper RivetKit integration
• main.tsx: Standard React 18 setup with StrictMode
• index.html: Clean, minimal HTML with proper meta tags

Backend Files (src/backend/)

• registry.ts: Clean actor definition with proper state management and event broadcasting
• server.ts: Good Hono setup with proper WebSocket upgrading and CORS configuration

Configuration Files

• vite.config.ts: Appropriate Vite configuration for the project structure
• package.json: Mostly follows guidelines but could be improved

🎯 Priority Recommendations

1. High Priority: Remove debug console.log from api-utils.ts
2. Medium Priority: Make endpoints configurable via environment variables
3. Medium Priority: Add error handling to frontend increment action
4. Low Priority: Add accessibility attributes to form elements
5. Low Priority: Consider adding basic tests

✅ Follows Project Guidelines

• Adheres to CLAUDE.md example structure requirements
• Uses proper workspace dependencies
• Follows TypeScript and code style guidelines
• Includes proper licensing and documentation

The code is production-ready for an example with minor improvements needed. The implementation effectively demonstrates RivetKit's capabilities with a practical, interactive example.

---

[claude]

Claude finished @NathanFlurry's task —— View job

---

Claude finished reviewing the PR ——

---

PR Review: Add Frontend to Hono-Bun Example

Todo List:

• Read project guidelines (CLAUDE.md)
• Read and analyze all changed files
• Review code quality and best practices
• Check for potential bugs or issues
• Assess performance considerations
• Review security concerns
• Evaluate test coverage
• Check adherence to project conventions
• Provide comprehensive review feedback

Overall Assessment

This PR successfully adds a React frontend to the hono-bun example, creating a full-stack application that demonstrates RivetKit's actor system with real-time updates. The implementation is well-structured and follows project conventions.

✅ Strengths

Code Quality & Best Practices

• Clean architecture: Well-organized separation between backend (src/backend/) and frontend (src/frontend/) directories
• Type safety: Excellent TypeScript usage with proper type imports from backend registry
• React hooks: Proper use of RivetKit React hooks (useActor, useEvent) demonstrating the framework's capabilities
• Modern tooling: Good use of Vite for frontend development with appropriate configuration

Documentation & Project Structure

• README compliance: Follows the CLAUDE.md guidelines for example READMEs with proper structure and links
• Package.json compliance: Includes relevant keywords and follows workspace dependency patterns
• Development workflow: Well-configured concurrent development with separate backend/frontend dev commands

RivetKit Integration

• Real-time updates: Excellent demonstration of actor events with counter.useEvent("newCount")
• Proper client usage: Correct implementation of RivetKit client setup and actor connections
• CORS configuration: Properly configured CORS for local development

⚠️ Issues & Recommendations

Security Concerns

1. Hardcoded URLs: Both frontend and backend have hardcoded localhost:5173 and localhost:8080
   • src/backend/server.ts:15,25 - CORS origins hardcoded
   • src/frontend/App.tsx:5 - Client endpoint hardcoded
   • Recommendation: Use environment variables for configurable endpoints

Code Quality Issues

2. Error handling:

   • src/frontend/App.tsx:20 - No error handling for the increment action
   • Recommendation: Add try/catch or error handling for user feedback

3. Accessibility:

   • src/frontend/App.tsx:26-31 - Input and button lack proper labels/aria attributes
   • Recommendation: Add proper accessibility attributes

Performance Considerations

4. Optional chaining:
   • src/frontend/App.tsx:20 - Using optional chaining on counter.connection?.increment(1)
   • Recommendation: Consider handling disconnected state more explicitly for better UX

Testing & Coverage

5. No tests: The example lacks any test coverage
   • Recommendation: Consider adding basic integration tests for the counter functionality

Minor Issues

6. Package.json inconsistency:
   • Missing peer dependencies recommendation from CLAUDE.md for @rivetkit/* packages
   • bun vs npm usage - README uses npm install but dev scripts use bun

📋 Detailed File Analysis

Frontend Files (src/frontend/)

• App.tsx: Well-structured React component with proper RivetKit integration
• main.tsx: Standard React 18 setup with StrictMode
• index.html: Clean, minimal HTML with proper meta tags

Backend Files (src/backend/)

• registry.ts: Clean actor definition with proper state management and event broadcasting
• server.ts: Good Hono setup with proper WebSocket upgrading and CORS configuration

Configuration Files

• vite.config.ts: Appropriate Vite configuration for the project structure
• package.json: Mostly follows guidelines but could be improved

🎯 Priority Recommendations

1. High Priority: Make endpoints configurable via environment variables
2. Medium Priority: Add error handling to frontend increment action
3. Medium Priority: Add accessibility attributes to form elements
4. Low Priority: Consider adding basic tests
5. Low Priority: Resolve npm/bun inconsistency in documentation

✅ Follows Project Guidelines

• Adheres to CLAUDE.md example structure requirements
• Uses proper workspace dependencies
• Follows TypeScript and code style guidelines
• Includes proper licensing and documentation

The code is production-ready for an example with minor improvements needed. The implementation effectively demonstrates RivetKit's capabilities with a practical, interactive example.

---

[claude]

Claude finished @NathanFlurry's task —— View job

---

PR Review: Add Frontend to Hono-Bun Example

Todo List:

• Read and analyze all changed files
• Review code quality and best practices
• Check for potential bugs or issues
• Assess performance considerations
• Review security concerns
• Evaluate test coverage
• Check adherence to project conventions

Overall Assessment

This PR successfully adds a React frontend to the hono-bun example, creating a full-stack application that demonstrates RivetKit's actor system with real-time updates. The implementation is well-structured and follows most project conventions.

✅ Strengths

Code Quality & Best Practices

• Clean architecture: Well-organized separation between backend (src/backend/) and frontend (src/frontend/) directories
• Type safety: Excellent TypeScript usage with proper type imports from backend registry (examples/hono-bun/src/frontend/App.tsx:3)
• React hooks: Proper use of RivetKit React hooks (useActor, useEvent) demonstrating the framework's capabilities
• Modern tooling: Good use of Vite for frontend development with appropriate configuration

Documentation & Project Structure

• README compliance: Follows the CLAUDE.md guidelines for example READMs with proper structure and links
• Package.json compliance: Includes relevant keywords and follows workspace dependency patterns (examples/hono-bun/package.json:31-38)
• Development workflow: Well-configured concurrent development with separate backend/frontend dev commands (examples/hono-bun/package.json:7-12)
• Turbo.json: Correctly includes the required turbo.json configuration

RivetKit Integration

• Real-time updates: Excellent demonstration of actor events with counter.useEvent("newCount") (examples/hono-bun/src/frontend/App.tsx:17)
• Proper client usage: Correct implementation of RivetKit client setup and actor connections
• CORS configuration: Properly configured CORS for local development (examples/hono-bun/src/backend/server.ts:14-15,24-25)

⚠️ Issues & Recommendations

Security Concerns

1. Hardcoded URLs: Both frontend and backend have hardcoded localhost URLs
   • examples/hono-bun/src/backend/server.ts:15,25 - CORS origins hardcoded to http://localhost:5173
   • examples/hono-bun/src/frontend/App.tsx:5 - Client endpoint hardcoded to http://localhost:8080/rivet
   • Recommendation: Use environment variables for configurable endpoints in production

Code Quality Issues

2. Error handling:

   • examples/hono-bun/src/frontend/App.tsx:20 - No error handling for the increment action
   • Recommendation: Add try/catch or error state management for better user experience

3. Accessibility:

   • examples/hono-bun/src/frontend/App.tsx:26-31 - Input and button lack proper labels/aria attributes
   • Recommendation: Add proper accessibility attributes (e.g., <label>, aria-label)

Performance Considerations

4. Optional chaining:
   • examples/hono-bun/src/frontend/App.tsx:20 - Using optional chaining on counter.connection?.increment(1)
   • Recommendation: Consider handling disconnected state more explicitly for better UX (loading states, retry logic)

Development & Documentation

5. Package.json inconsistency:
   • examples/hono-bun/README.md:20 - Uses npm install but dev scripts use bun runtime
   • examples/hono-bun/package.json:8 - Uses bun --watch for backend
   • Recommendation: Consider standardizing on one package manager in documentation

Testing & Coverage

6. No tests: The example lacks any test coverage
   • Recommendation: Consider adding basic integration tests for the counter functionality (though this is optional for examples)

📋 Detailed File Analysis

Frontend Files (src/frontend/)

• App.tsx: Well-structured React component with proper RivetKit integration and type safety
• main.tsx: Standard React 18 setup with StrictMode - follows best practices
• index.html: Clean, minimal HTML with proper meta tags and module script

Backend Files (src/backend/)

• registry.ts: Clean actor definition with proper state management and event broadcasting
• server.ts: Good Hono setup with proper WebSocket upgrading and CORS configuration

Configuration Files

• vite.config.ts: Appropriate Vite configuration for the project structure with correct root directory
• package.json: Follows most guidelines - includes keywords, workspace dependencies, and required scripts
• turbo.json: Correctly follows CLAUDE.md requirements

🎯 Priority Recommendations

1. High Priority: Consider environment variables for endpoint configuration in production scenarios
2. Medium Priority: Add error handling to frontend increment action
3. Medium Priority: Add accessibility attributes to form elements
4. Low Priority: Standardize package manager usage in documentation
5. Low Priority: Consider adding basic example tests

✅ Follows Project Guidelines

• ✅ Adheres to CLAUDE.md example structure requirements
• ✅ Uses proper workspace dependencies with workspace:*
• ✅ Follows TypeScript and code style guidelines
• ✅ Includes proper licensing and documentation
• ✅ Uses recommended example naming convention (example-hono-bun)
• ✅ Includes required turbo.json configuration
• ✅ Has proper dev and check-types scripts

📊 Summary

The code is well-implemented and production-ready for an example project. The implementation effectively demonstrates RivetKit's capabilities with a practical, interactive full-stack application. The issues identified are minor and mostly related to production considerations and user experience enhancements.

Recommendation: Approve with minor suggestions for future improvement.

---

[graphite-app]

Merge activity

• Oct 13, 6:24 PM UTC: NathanFlurry added this pull request to the Graphite merge queue.
• Oct 13, 6:25 PM UTC: CI is running for this pull request on a draft pull request (#1383) due to your merge queue CI optimization settings.
• Oct 13, 6:26 PM UTC: Merged by the Graphite merge queue via draft PR: #1383.