This guide gets you started with gRPC-Web with a simple working example.
Get the example code
The example code is part of the grpc-web repo.
Download the repo as a zip file and unzip it, or clone the repo:
$ git clone https://github.com/grpc/grpc-web
Change to the repo’s root directory:
$ cd grpc-web
Run an Echo example from your browser!
Fetch required packages and tools:
$ docker-compose pull prereqs node-server envoy commonjs-client
Getting the following warning? You can ignore it for the purpose of running the example app:
WARNING: Some service image(s) must be built from source
Launch services as background processes:
$ docker-compose up -d node-server envoy commonjs-client
From your browser:
- Visit localhost:8081/echotest.html.
- Enter a message, like “Hello”, in the text-input box.
- Press the Send button.
You’ll see your message echoed by the server below the input box.
Congratulations! You’ve just run a client-server application with gRPC.
Once you are done, shutdown the services that you launched earlier by running the following command:
$ docker-compose down
What is happening?
This example app has three key components:
node-serveris a standard gRPC server, implemented in Node. This server listens at port
:9090, and implements the app’s business logic (echoing client messages).
envoyis the Envoy proxy. It listens at
:8080and forwards the browser’s gRPC-Web requests to port
commonjs-client: this component generates the client stub class using the
protoc-gen-grpc-webprotoc plugin, compiles all the JS dependencies using
webpack, and hosts the static content (
dist/main.js) at port
:8081using a simple web server. User messages entered from the webpage are sent to the Envoy proxy as gRPC-web requests.
- Work through the Basics tutorial.