This article discusses how to compile gRPC-Web's Protobuf file for React (or other JavaScript-based web app) in Windows environment. This is only front-end side. The backend must be setup as gRPC-Web server using .NET gRPC service with gRPC-Web or Envoy proxy.
In order for gRPC-Web clients to communicate with the backend gRPC-Web servers, the fontend apps must have Protobuf compilation files. There are many articles out on the internet, but they are very scattered so I tried to compile all in to one.
1. Development Environment
Windows 11 (10 is okay too)
Visual Studio 2022
React Project (Javascript version) with a .proto file
a sample .proto file on src/protos folder in your React project (I am using greet.proto file beause VS2012 created it automatically for me)
2. Prerequisites - Getting Ready
a. Install the following tools for Windows
You can use either PowerShell or Command Prompt.
!!! WARNING - Make sure you add the tools' install folder locations to Windows System Environment Variables !!!
Chocolatey
https://chocolatey.org/install
Bazelisk
https://github.com/bazelbuild/bazelisk
Install using the command below:
Protobuf Compiler (protoc for Windows)
https://github.com/protocolbuffers/protobuf/releases
the setup file is located hidden all the way at the bottom of the page - you must press "more" button to see the files called protoc-21.9-win64.zip or any other versions.
download the file and then install it
gRPC Web Compiler & Generator
protoc-gen-grpc-web (Windows)
https://github.com/grpc/grpc-web/releases
Protobuf JS Compiler (proto-gen-js)
this is needed for creating JavaScript version of Protobuf compilation files
install the tool using the command below:
b. Install React libraries
Install the following libraries on your React project (e.g. use npm install command).
google-protobuf
grpc
grpc-web
@grpc/grpc-js
3. Instructions
a. Using either Command Prompt or Powershell, go to the root folder of the React project
b. Enter the following command and then press enter (there are areas where you must change the command as per your project settings - locations of proto-gen-js.exe file and .proto file)
If you get an error after entering this command, mostly it is due to the incorrect or missing Windows System Environment Variable. You must double check the settings and then you MUST close exit the current PowerShell or Command Prompt window to start from the Step 1 again
c. If you did not get any error messages, you will see two .js files in src/protos folder as below:
greet_grpc_web_pb.js
greet_pb.js
You are all set. Review those .js files to find out how to set or call gRPC-Web service parameters and so on, as the syntax is "case-sensitive".
