grpc/grpc-web

★ 9,209JavaScriptAudience · developerComplexity · 4/5Setup · hard

Mindmap

mindmap
  root((repo))
    What it does
      Browser gRPC calls
      Protocol translation
      Proxy bridging
    How it works
      Envoy proxy layer
      Protocol Buffers
      Code generation
    Call Patterns
      Unary calls
      Server streaming
      No client streaming yet
    Setup
      npm install runtime
      Docker examples
      Proto file required

mindmap root((repo)) What it does Browser gRPC calls Protocol translation Proxy bridging How it works Envoy proxy layer Protocol Buffers Code generation Call Patterns Unary calls Server streaming No client streaming yet Setup npm install runtime Docker examples Proto file required

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Call a backend gRPC microservice directly from a browser app by routing through an Envoy proxy that handles protocol translation.

USE CASE 2

Generate typed JavaScript client code from a Protocol Buffers definition to make type-safe calls from a web frontend.

USE CASE 3

Stream a continuous feed of server updates to the browser using gRPC server-side streaming without switching to WebSockets or polling.

Tech stack

JavaScriptProtocol BuffersgRPCEnvoy

Getting it running

Difficulty · hard Time to first run · 1h+

Requires setting up an Envoy proxy between the browser and backend, plus the Protocol Buffers toolchain for code generation.

In plain English

gRPC-web is a JavaScript library that allows web browser applications to talk directly to backend services using a communication system called gRPC. gRPC is a way for programs to call functions or request data from other programs running on different machines, commonly used between microservices in larger software systems. Traditionally, browsers cannot use gRPC directly because of how web protocols work, so gRPC-web bridges that gap. The way it works is that the browser client sends requests to a proxy server (by default, one called Envoy), which translates the web-compatible messages into standard gRPC calls and forwards them to the actual backend service. The proxy handles the protocol translation in the middle, so the backend service does not need to know it is talking to a browser. To use the library, developers define their service's data structures and methods in a file format called Protocol Buffers (a way to describe what data looks like and what operations are available). A code generator then reads that definition and produces JavaScript files containing the client code needed to make those calls from the browser. The developer includes those generated files in their web application and calls the methods directly in JavaScript. The library currently supports two calling patterns: sending a single request and getting a single response (called a unary call), and receiving a stream of responses from the server after sending one request (server-side streaming). Client-to-server streaming and fully bidirectional streaming are not yet supported. The npm package is the main way to install the runtime library. Docker-based example projects are included in the repository for developers who want to see a working setup before building their own.

Copy-paste prompts

Prompt 1

I have a gRPC backend service defined in a .proto file. Walk me through using the grpc-web protoc plugin to generate JavaScript client code and make a unary call from my browser app.

Prompt 2

Show me the minimum Envoy proxy configuration needed to translate gRPC-web browser requests to a backend gRPC service running on port 9090.

Prompt 3

How do I implement server-side streaming with grpc-web so my browser app receives a continuous stream of events from the backend? Show me the client-side JavaScript code.

Open on GitHub → Explain another repo

← grpc on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.