Generating gRPC Web and gRPC SDK from Protocol Buffers

Recently working on web3js, I needed to revisit gRPC and organize the related gRPC-web and gRPC topics.

First, the code generated for gRPC and gRPC-web from Protocol Buffers is different. Therefore, different plugins must be used to generate the code.

Generating gRPC-web from Protocol Buffers

1. The generated code is in CommonJS format.
2. The generated code can be JavaScript with TypeScript definition files (dts).
3. The mode is set according to needs; both modes are selectable and relate to backend proxy gateways.

   protoc --proto_path="$PROTO_PATH" \
                --js_out=import_style=commonjs,binary:"$OUTPUT_DIR" \
                --grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:"$OUTPUT_DIR" \
                "$relative_dir/$proto_filename" \
                -I "$PROTO_PATH"

Generating gRPC from Protocol Buffers

1. Requires installing the grpc_tools_node_protoc_ts package to support TypeScript definition generation.
2. Requires installing grpc-tools, which provides the grpc_tools_node_protoc tool.

 # Using grpc_tools_node_protoc to generate JS + TS in one step
        grpc_tools_node_protoc \
            --plugin=protoc-gen-ts=../../node_modules/.bin/protoc-gen-ts \
            -I="$PROTO_PATH" \
            --js_out=${IMPORT_STYLE}${OUTPUT_DIR} \
            --grpc_out=grpc_js:${OUTPUT_DIR} \
            --ts_out=grpc_js:${OUTPUT_DIR} \
            "$grpc_proto"

Third-party Dependencies in Protocol Buffer Files

For example, import "google/api/http.proto" requires downloading Google’s proto files and placing them in the specified directory to avoid errors during generation.

Final Thoughts

In summary, this covers generating gRPC client code for both web JavaScript and Node.js.