patterntypescriptModerate

gRPC-Web for Browsers: Use Envoy or Connect proxy to bridge browser and gRPC services

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

grpc-webconnect-webprotobufbufbinarystreamingbrowser

browser

Problem

gRPC uses HTTP/2 framing that browsers cannot access directly — the Fetch API does not expose the necessary trailer headers. Standard gRPC clients do not work in browser environments.

Solution

Use gRPC-Web (the protocol) with either the Envoy gRPC-Web filter or the Connect-Web library from Buf. Connect-Web supports both gRPC-Web and Connect protocol, works natively in browsers, and integrates with TypeScript code generation from .proto files.

Why

gRPC provides strongly-typed contracts via protobuf and efficient binary serialization. Connect-Web brings these benefits to browser clients while remaining compatible with existing gRPC servers.

Gotchas

gRPC-Web does not support bidirectional streaming from browsers — only server-streaming and unary calls.
Protobuf binary format makes debugging harder — use the Connect JSON mode during development.
Code generation from .proto files requires toolchain setup (buf CLI) — factor this into project setup time.

Code Snippets

Connect-Web client usage

import { createClient } from '@connectrpc/connect'
import { createConnectTransport } from '@connectrpc/connect-web'
import { UserService } from './gen/user_connect'

const transport = createConnectTransport({
  baseUrl: 'https://api.example.com'
})

const client = createClient(UserService, transport)
const user = await client.getUser({ id: '123' })
// user is fully typed from the .proto definition

Revisions (0)

No revisions yet.