Using Protocol Buffers in Angular

Prerequisite

Visit the official site to understand and learn what “protocol buffers” is. This article assumes that you have fair bit of knowledge on angular & protobuf.

Objective

Use protocol buffers in angular applications.

1. Define Your Service

Create a proto/hello.proto file and define a HelloWorld service as follows:

2. Generate Typescript Service Client Code

If you have not installed the protoc compiler yet, visit the official compiler installation page to download it.

Use the following command to install npm libraries required to generate typescript service client code:

$ npm install ts-protoc-gen @improbable-eng/grpc-web @types/google-protobuf google-protobuf

Then, create a bash script genproto.sh with the following code:

Then, run the script after making it executable:

$ chmod +x genproto.sh
$ ./genproto.sh

3. Define a HelloWorld Service in Angular

Define a HelloWorld service that uses the generated typescript service client to connect to a backend gRPC server:

The service won’t work until you fix communication errors with Envoy. Read the “Ditching REST with gRPC-web and Envoy” article for more information on this.

4. Setup Envoy

We need to put Envoy between our client and server for transparent translation between HTTP/1.x and HTTP/2. Create proxy/envoy.yaml file with the following content:

Replace the last line with your server address and port. After creating the YAML file, run the following command to start the proxy:

docker run -d -v "$(pwd)"/proxy/envoy.yaml:/etc/envoy/envoy.yaml:ro -p 8080:8080 -p 9901:9901 envoyproxy/envoy:v1.14.1

grpc/examples/helloworld page contains various troubleshooting contents. Visit this website if the above approach does not work.

If you have any questions or concerns, feel free to leave comments below. I’ll try to get back to you within a day or two.