grpc-web-native

gRPC Web Native is a powerful toolchain designed for generating native gRPC client code in JavaScript (TypeScript) for web browsers from .proto files. It utilizes protobuf.js as its core code generator and integrates with grpc-node (npm package @grpc/grpc-js) to facilitate server implementations. This enables seamless communication between the front-end and gRPC backend, enhancing application performance and user experience.

Key Features

• No Proxy Requirement: Unlike many other gRPC libraries, gRPC Web Native does not require a proxy, allowing for a swift and straightforward implementation.
• Binary Support: The library supports binary data with native Content-Type: application/grpc+proto handling. This means that it can transmit data efficiently using ReadableStream and Uint8Array, which is ideal for scenarios involving byte streams.
• Streaming Capabilities: gRPC Web Native supports request (up) streaming, response (down) streaming, and bidirectional streaming (though currently limited to half duplex for request streaming). Users can implement full duplex through separate methods that share a UUID to correlate messages.
• HTTP/2 Support: By leveraging the browser's native fetch, gRPC Web Native offers HTTP/2 support without the need for WebTransport, which allows for efficient data fetching and is compatible across modern browsers.
• Control and Abort Options: The implementation allows users to handle request cancellations gracefully using the native AbortController, providing a better control mechanism for managing HTTP calls.
• Promise-style Responses: All gRPC calls return responses in a Promise style, making it easy to integrate with asynchronous JavaScript flows.
• TypeScript Compatible: This library provides extensive TypeScript support, enhancing type safety during development and reducing runtime errors.
• No Additional Plugin Installation Needed: Developers can generate client code without worrying about installing extra tools like protoc.

Getting Started

To generate the web client protocols from the source files, use the following commands:

npm run transpile-generator
npm run gen-web-client-protos <protos_source> <output_folder>

For instance:

npm run gen-web-client-protos './protos/*.proto' ./src/generated

For more examples and practical implementations, refer to Example.tsx.

CORS Support

When using this library with a NodeJS gRPC server implementation like gRPC-node, proper editing of the CORS configuration is required for successful communication. Example configurations can be followed from the gRPC server's code.

By allowing straightforward integration and efficient data handling, gRPC Web Native empowers developers to build robust web applications that efficiently communicate with backend gRPC services.