Examples Es is a boilerplate and example repository from the Connect RPC team that shows how to integrate Connect for Web and Connect for Node.js across a dozen TypeScript frontend frameworks, bundlers, and server runtimes.
What is Examples Es?
Connect RPC's examples-es repository is a collection of runnable example projects demonstrating Connect, a family of RPC libraries for TypeScript that work over HTTP/1.1, HTTP/2, and gRPC. Each subdirectory is a complete application generated with the official CLI of its framework — Angular CLI, create-next-app, npm create svelte, and others — then wired with Connect code. The repository serves as the official example source for Connect for Web (browser clients) and Connect for Node.js (server implementations), and it is maintained by the Connect RPC organization under an Apache 2.0 license.
Key Features
- Multi-framework web coverage — Pre-built example apps for Angular, Astro, Next.js, Remix, Svelte, and Vue, plus a plain JavaScript app with no framework, all generated with their respective official CLIs.
- React bundler variants — Six React examples built from scratch using esbuild, Parcel, Rollup, Vite, Webpack, and Webpack with CommonJS syntax, letting you compare the same Connect app across bundlers.
- Server implementations — Connect for Node.js servers for Express, Fastify, vanilla Node.js via the http package, and a Cloudflare Workers version, all serving the same Eliza demo.
- Multiple client types — The server examples include a terminal client and browser clients for both full-stack and CORS setups, so you can see every way a client can talk to a Connect server.
- Mobile support — A React Native example generated with the Expo CLI shows Connect for Web working on mobile.
- Custom client signature — A dedicated misc example demonstrating how to create a custom client signature for non-standard use cases.
- Runnable and testable — Each project includes its own testing and linting tools, with the variances documented in each project's README; the repository has continuous integration via GitHub Actions (build badge on the main branch).
Who should use Examples Es?
- TypeScript web developers — Quickly bootstrap a Connect client integration by copying the example matching their framework, such as Next.js or Vue, rather than writing the network layer from scratch.
- Backend Node.js developers — Use the Express, Fastify, or vanilla Node.js servers as a starting point for exposing Connect endpoints and the Eliza frontend.
- Bundler-conscious engineers — Compare how the same Connect app behaves when bundled with esbuild, Rollup, Vite, Webpack, and Parcel to decide which setup fits their toolchain.
- Mobile developers — Reference the React Native Expo example to see how Connect for Web works in a native app environment.
What can you do with Examples Es?
- Prototype a Connect API integration: copy the Svelte or Astro example, replace the Eliza service with your own protobuf-defined service, and run the dev server to get a working end-to-end client and server.
- Compare bundler configurations: open the six React variants side-by-side and inspect the config files to see how each bundler handles the same TypeScript and Connect imports.
- Deploy a Connect server on Cloudflare Workers: start from the cloudflare-workers example to get a server that runs on a global edge network and serves both RPC and static frontend content.
- Build a custom client: study the custom-client example to implement a connection layer with your own signing logic when the built-in client interfaces don't fit.
FAQ
Is Examples Es free to use?
Yes. The repository is offered under the Apache 2.0 license, so you can use, modify, and distribute the example code, including in commercial projects.
What frameworks are covered in Examples Es?
The web examples cover Angular, Astro, Next.js, Remix, Svelte, Vue, and plain JavaScript. React examples are further split into esbuild, parcel, rollup, vite, webpack, and webpack-cjs variants. There is also a React Native example generated with Expo CLI.
How do I run an example?
Each subdirectory is a complete project generated with its framework's CLI, so you install dependencies and start the dev server the same way you would for any of those frameworks. The specific commands and additional tooling notes are listed in each project's README.
Does Examples Es include server-side code?
Yes. It includes Connect for Node.js servers for Express, Fastify, vanilla Node.js using the http module, and a Cloudflare Workers server. All servers expose Connect endpoints and serve the Eliza frontend interface.
