Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/connectrpc/examples-es

Examples for using Connect with various TypeScript web frameworks and tooling.
https://github.com/connectrpc/examples-es

angular buf connect esbuild express fastify nextjs nodejs parcel playwright protobuf react react-native remix rollup svelte typescript vite vue webpack

Last synced: 3 days ago
JSON representation

Examples for using Connect with various TypeScript web frameworks and tooling.

Host: GitHub
URL: https://github.com/connectrpc/examples-es
Owner: connectrpc
License: apache-2.0
Created: 2022-06-24T15:22:17.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2025-01-06T18:05:36.000Z (15 days ago)
Last Synced: 2025-01-11T15:08:29.550Z (11 days ago)
Topics: angular, buf, connect, esbuild, express, fastify, nextjs, nodejs, parcel, playwright, protobuf, react, react-native, remix, rollup, svelte, typescript, vite, vue, webpack
Language: TypeScript
Homepage: https://connectrpc.com/
Size: 497 MB
Stars: 130
Watchers: 9
Forks: 23
Open Issues: 1
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

        examples-es

===========

[![Build](https://github.com/connectrpc/examples-es/actions/workflows/ci.yaml/badge.svg?branch=main)](https://github.com/connectrpc/examples-es/actions/workflows/ci.yaml)

`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.

## Web

### Angular

The [Angular](https://angular.io) application was generated with the [Angular CLI](https://github.com/angular/angular-cli).

### Astro

The [Astro](astro) application was generated with `npm create astro@latest -- --template basics` and all suggested defaults.

### Next.js

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

### Plain

The [Plain](plain) application was built from scratch with no frameworks at all using just vanilla JavaScript.

### React

All applications underneath this directory use [React](https://reactjs.org) as the framework.  Each is divided by the various

tooling differences the related projects were constructed with:

* [esbuild](react/esbuild) - Built from scratch with [esbuild](https://esbuild.github.io) as the bundler.

* [parcel](react/parcel) - Built from scratch with [Parcel](https://parceljs.org) as the bundler.

* [rollup](react/rollup) - Built from scratch with [Rollup](https://rollupjs.org) as the bundler.

* [vite](react/vite) - Generated with [Vite](https://github.com/vitejs/vite) and all associated defaults.

* [webpack](react/webpack) - Built from scratch with [Webpack](https://webpack.js.org) as the bundler.

* [webpack-cjs](react/webpack-cjs) - Built from scratch with [Webpack](https://webpack.js.org) 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](remix) application was generated with `npx create-remix@latest` and all suggested defaults.

### Svelte

The [Svelte](svelte) application was generated with `npm create svelte ` and all suggested defaults.

### Vue

The [Vue](vue) application was generated with `npm init vue@latest` and all suggested defaults.

## Mobile

### React Native

The [React Native](react-native) application was generated with the [Expo CLI](https://docs.expo.dev/workflow/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](express) directory contains an example involving Connect for Node.js with the [Express](https://expressjs.com)

framework.

### Fastify

The [fastify](fastify) directory contains an example involving Connect for Node.js with the [Fastify](https://fastify.io)

framework.

### Vanilla Node.js

The [vanilla-node](vanilla-node) directory contains an example involving Connect for Node.js with vanilla Node.js using

the `http` package.

### Cloudflare Workers

The [cloudflare-workers](cloudflare-workers) directory contains an example involving Connect running on [Cloudflare Workers](https://workers.cloudflare.com).

## Misc

### Custom Client Signature

The [custom-client](custom-client) directory contains an example demonstrating how to create a custom client signature.

## Legal

Offered under the [Apache 2 license][license].

[license]: https://github.com/connectrpc/examples-es/blob/main/LICENSE.txt