grpc-web

grpc-web

This examples shows how to use the proto compiler, ts-protoc-gen, @grpc/grpc-js, protoc-gen-grpc-web & grpc-web to build a fully typed gRPC CLI chat application that runs on Node.js and your browser.

The ts-protoc-gen compiler plugin is used to generate TypeScript files and the protoc-gen-grpc-web compiler plugin is used to generate the grpc-web files from the proto definitions. The generated code uses google-protobuf & @grpc/grpc-js at runtime.

App layout

• package.json - Dependencies and node build scripts
• compile-proto.sh - The proto compiler script
• proto/ - Protobuf definitions and generated types
• server.ts - The grpc server
• client.ts - The grpc client

Generating the Types

npm install

# Apple M1 users should install for x64 due to grpc-tools not supporting arm64
npm install --target_arch=x64

./compile-proto.sh

Running the app

(Note, docker is required to run the envoy proxy.)

Run the demo:

npm install
npm run build
npm run start:proxy
npm run start:server
python3 -m http.server 8081

Open http://localhost:8081/ in multiple browser windows and chat to yourself.

Development workflow:

npm run watch:typescript
npm run watch:webpack
npm run start:proxy
npm run start:server
python3 -m http.server 8081

Credits

The chat application idea is inspired from https://techblog.fexcofts.com/2018/07/20/grpc-nodejs-chat-example/