Awesome

examples-es

examples-es is a repository of example projects using Connect with various TypeScript web frameworks and tooling. It provides numerous examples for integrating Connect into a project, using both Connect for Web and Connect for Node.

[!IMPORTANT]
All examples use Connect packages in the upcoming version 2. For examples for version 1, see the branch v1.

Web

Angular

The Angular application was generated with the Angular CLI.

Astro

The Astro application was generated with npm create astro@latest -- --template basics and all suggested defaults.

Next.js

The Next.js application was generated with npx create-next-app buf-nextjs --use-npm --ts and all suggested defaults.

Plain

The Plain application was built from scratch with no frameworks at all using just vanilla JavaScript.

React

All applications underneath this directory use React as the framework. Each is divided by the various tooling differences the related projects were constructed with:

• esbuild - Built from scratch with esbuild as the bundler.
• parcel - Built from scratch with Parcel as the bundler.
• rollup - Built from scratch with Rollup as the bundler.
• vite - Generated with Vite and all associated defaults.
• webpack - Built from scratch with Webpack as the bundler.
• webpack-cjs - Built from scratch with Webpack as the bundler, using CommonJS import syntax.

Each project also uses various tools for testing, linting, etc. These variances are noted in each project README.

Remix

The Remix application was generated with npx create-remix@latest and all suggested defaults.

Svelte

The Svelte application was generated with npm create svelte <app name> and all suggested defaults.

Vue

The Vue application was generated with npm init vue@latest and all suggested defaults.

Mobile

React Native

The React Native application was generated with the Expo CLI and all suggested defaults.

Servers

The server examples make use of Connect for Node.js using various frameworks. All servers serve both Connect endpoints and the Eliza frontend interface. There are multiple kinds of clients available that can be used to interact with the server such as a terminal client and browser clients using both a full-stack setup as well as a CORS setup.

Express

The express directory contains an example involving Connect for Node.js with the Express framework.

Fastify

The fastify directory contains an example involving Connect for Node.js with the Fastify framework.

Vanilla Node.js

The vanilla-node directory contains an example involving Connect for Node.js with vanilla Node.js using the http package.

Cloudflare Workers

The cloudflare-workers directory contains an example involving Connect running on Cloudflare Workers.

Misc

Custom Client Signature

The custom-client directory contains an example demonstrating how to create a custom client signature.

Legal

Offered under the Apache 2 license.