Note: This is the Render-optimized version of the react example. It adds a production HTTP server, Vite build, and a render.yaml Blueprint for deploying to Render.

React Integration

Demonstrates React frontend integration with Rivet Actors.

Getting Started

git clone https://github.com/rivet-dev/rivet.git
cd rivet/examples/react
npm install
npm run dev

Features

• React frontend: Build interactive UIs with React that connect to Rivet Actors
• Type-safe client: Use @rivetkit/react hooks for type-safe actor communication
• Real-time updates: Subscribe to actor events for live UI updates
• Actor state management: Actors handle backend logic while React manages UI state

Implementation

This example demonstrates React frontend integration with Rivet Actors:

• Actor Definition (src/actors.ts): Minimal counter with increment action and newCount event
• Server Setup (src/server.ts): Hono app routing /api/rivet/* to the registry handler
• React Frontend (frontend/app/App.tsx): useActor hook with event subscription

Deploy on Render

1. Set Root Directory to examples/react-render if deploying from the monorepo.
2. Add the following environment variables in your Render service:

3. In the Rivet dashboard, point Connect your backend at your service's HTTPS URL.

RIVET_ENVOY_VERSION is automatically derived from Render's RENDER_GIT_COMMIT — no manual bump needed per deploy. Set it explicitly to override.

Resources

• RivetKit documentation
• Self-host Rivet Engine on Render
• Render Blueprint specification

License

MIT