Improve plugin install instructions (#1419)

Author: sampajano

README.md

@@ -53,35 +53,78 @@ The gRPC-web runtime library is available at `npm`:
 $ npm i grpc-web
 ```
 
-## Code Generator Plugin
+## Code Generator Plugins
+
+### (Prerequisite) 1. Protobuf (`protoc`)
+
+If you don't already have [`protoc`](https://github.com/protocolbuffers/protobuf)
+installed, download it first from [here](https://github.com/protocolbuffers/protobuf/releases) and install it on your PATH.
+
+Or run:
+
+```sh
+brew install protobuf
+```
+
+### (Prerequisite) 2. Protobuf-javascript (`protoc-gen-js`)
+
+If you don't have [`protoc-gen-js`](https://github.com/protocolbuffers/protobuf-javascript) installed, download it from [protocolbuffers/protobuf-javascript](https://github.com/protocolbuffers/protobuf-javascript/releases) and install it on your PATH.
+
+Or, use the [third-party](https://www.npmjs.com/package/protoc-gen-js) NPM installer:
+
+```
+npm install -g protoc-gen-js
+```
+
+### 3. Install gRPC-Web Code Generator
 
 You can download the `protoc-gen-grpc-web` protoc plugin from our
 [release](https://github.com/grpc/grpc-web/releases) page:
 
-If you don't already have `protoc` installed, you will have to download it
-first from [here](https://github.com/protocolbuffers/protobuf-javascript/releases).
+Make sure all executables are discoverable from your PATH.
 
-> **NOTE:** Javascript output is no longer supported by `protocolbuffers/protobuf` package as it previously did. Please use the releases from [protocolbuffers/protobuf-javascript](https://github.com/protocolbuffers/protobuf-javascript/releases) instead.
+For example, on MacOS, you can do:
 
-Make sure they are both executable and are discoverable from your PATH.
+```sh
+sudo mv protoc-gen-grpc-web-1.5.0-darwin-aarch64 \
+    /usr/local/bin/protoc-gen-grpc-web
+
+chmod +x /usr/local/bin/protoc-gen-grpc-web
+```
 
-For example, in MacOS, you can do:
+### (Optional) 4. Verify Installations
+
+You can optionally verify the plugins works follwoing our [Hello world example](https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld#generating-stubs):
+
+```sh
+cd net/grpc/gateway/examples/helloworld
 
+protoc -I=. helloworld.proto \
+  --js_out=import_style=commonjs:. \
+  --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.
 ```
-$ sudo mv ~/Downloads/protoc-gen-grpc-web-1.5.0-darwin-x86_64 \
-    /usr/local/bin/protoc-gen-grpc-web
-$ chmod +x /usr/local/bin/protoc-gen-grpc-web
+
+After the command runs successfully, you should now see two new files generated
+in the current directory. By running:
+
 ```
+ls -1 *_pb.js
+```
+
+Installation is successful if you see the following 2 files:
+
+ - `helloworld_pb.js` # Generated by `protoc-gen-js` plugin
+ - `helloworld_grpc_web_pb.js` - Generated by gRPC-Web plugin
 
 ## Client Configuration Options
 
 Typically, you will run the following command to generate the proto messages
 and the service client stub from your `.proto` definitions:
 
 ```sh
-$ protoc -I=$DIR echo.proto \
-    --js_out=import_style=commonjs:$OUT_DIR \
-    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:$OUT_DIR
+protoc -I=$DIR echo.proto \
+  --js_out=import_style=commonjs:$OUT_DIR \
+  --grpc-web_out=import_style=commonjs,mode=grpcwebtext:$OUT_DIR
 ```
 
 You can then use Browserify, Webpack, Closure Compiler, etc. to resolve imports
@@ -255,7 +298,7 @@ For example, this is the command you should use to generate TypeScript code
 using the binary wire format
 
 ```sh
-$ protoc -I=$DIR echo.proto \
+protoc -I=$DIR echo.proto \
   --js_out=import_style=commonjs,binary:$OUT_DIR \
   --grpc-web_out=import_style=typescript,mode=grpcweb:$OUT_DIR
 ```

net/grpc/gateway/examples/helloworld/README.md

@@ -245,30 +245,21 @@ And that's it! We have all the code ready. Let's run the example!
 
 ## Generate Protobuf Messages and Client Service Stub
 
+### Install Plugins
+
 To generate the protobuf messages and client service stub class from your
 `.proto` definitions, we need:
  - the `protoc` binary, _and_
+ - the `protoc-gen-js` binary, _and_
  - the `protoc-gen-grpc-web` plugin.
 
-> You can download the `protoc-gen-grpc-web` protoc plugin from our
-> [release](https://github.com/grpc/grpc-web/releases) page.
->
-> If you don't already have `protoc` installed, you will have to download it
-> first from [here](https://github.com/protocolbuffers/protobuf/releases).
->
-> Make sure they are both executable and are discoverable from your PATH.
->
-> For example, in MacOS, you can do:
->
-> ```sh
-> $ sudo mv ~/Downloads/protoc-gen-grpc-web-1.5.0-darwin-x86_64 \
->   /usr/local/bin/protoc-gen-grpc-web
-> $ sudo chmod +x /usr/local/bin/protoc-gen-grpc-web
-> ```
+Follow the instructions [here](https://github.com/grpc/grpc-web?tab=readme-ov-file#code-generator-plugins)
+if you don't have them installed already.
 
+### Generating stubs
 
-When you have both `protoc` and `protoc-gen-grpc-web` installed, you can now
-run this command:
+When you have both `protoc`, `protoc-gen-js`, and `protoc-gen-grpc-web`
+installed, you can now run this command:
 
 ```sh
 $ protoc -I=. helloworld.proto \