PART 1 - How To Compile Protobuf in Windows Environment - REACT

This article discusses how to compile gRPC-Web's Protobuf file for React (or other JavaScript-based web app) in Windows environment. Thi 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)

 

728x90

---

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:

choco install bazelisk

• 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:

git clone https://github.com/protocolbuffers/protobuf-javascript
cd protobuf-javascript/
bazel build //generator:protoc-gen-js

 

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)

protoc --plugin=\protoc-gen-js.exe [folder where proto-gen-js.exe is located]\protoc-gen-js.exe --proto_path=. src/protos/greet.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

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".

---

Part 2:
https://ranku.tistory.com/162

React & gRPC-Web : PART 2 - How To Get Data from gRPC-Web Server using the Protobuf Compilation Files

---