{"id":14983559,"url":"https://github.com/ehsaniara/grpc-web-example","last_synced_at":"2026-03-09T02:32:28.217Z","repository":{"id":255280895,"uuid":"848492027","full_name":"ehsaniara/gRPC-web-example","owner":"ehsaniara","description":"This project demonstrates how to set up a simple gRPC on Web-client and server with Envoy proxy.","archived":false,"fork":false,"pushed_at":"2024-08-29T15:45:26.000Z","size":210,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-03T06:34:23.830Z","etag":null,"topics":["envoy-proxy","go","golang","grpc","grpc-web","javascript","webpack"],"latest_commit_sha":null,"homepage":"https://ehsaniara.medium.com/grpc-on-web-client-and-server-f53aa561e640","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ehsaniara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-27T21:28:57.000Z","updated_at":"2024-10-21T03:42:03.000Z","dependencies_parsed_at":"2024-09-24T15:24:35.863Z","dependency_job_id":"ee1e104c-1ed3-4f5f-a34c-2251adcb1d4a","html_url":"https://github.com/ehsaniara/gRPC-web-example","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.3571428571428571,"last_synced_commit":"dc062fc43bbb864248a27886ae8f49d8ff5645cd"},"previous_names":["ehsaniara/grpc-web-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsaniara%2FgRPC-web-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsaniara%2FgRPC-web-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsaniara%2FgRPC-web-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsaniara%2FgRPC-web-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ehsaniara","download_url":"https://codeload.github.com/ehsaniara/gRPC-web-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239362382,"owners_count":19626121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["envoy-proxy","go","golang","grpc","grpc-web","javascript","webpack"],"created_at":"2024-09-24T14:07:26.211Z","updated_at":"2025-11-02T02:30:40.205Z","avatar_url":"https://github.com/ehsaniara.png","language":"JavaScript","readme":"# gRPC on Web Example\n\nThis project demonstrates how to set up a simple gRPC-Web client and server with Envoy proxy.\n\n![arch.png](docs/arch.png)\n\n# Quick Start\n\n```shell\ndocker compose up -d\n```\n\nthen open browser http://localhost:8081 (note: this demo uses **8081** and **8080** ports)\n\n![browser.png](docs/browser.png)\n\n## Project Structure\n\n- **client/**: Contains the gRPC-Web client code.\n- **server/**: Contains the gRPC server code written in Go.\n- **envoy/**: envoy configuration file.\n\n## How to Run\n\n### Prerequisites\n\n- [Go](https://golang.org/doc/install)\n- [Node.js and npm](https://nodejs.org/)\n- [grpc-web](https://github.com/grpc/grpc-web)\n- [protoc compiler](https://grpc.io/docs/protoc-installation/)\n\n\u003e NOTE: client-side and bi-directional streaming is not currently supported (see [streaming roadmap](https://github.com/grpc/grpc-web?tab=readme-ov-file))\n\n# proto\n\n```protobuf\nsyntax = \"proto3\";\n\npackage helloworld;\n\noption go_package = \"./proto\"; // Add this line\n\nservice Greeter {\n  rpc SayHello (HelloRequest) returns (HelloReply);\n}\n\nmessage HelloRequest {\n  string name = 1;\n}\n\nmessage HelloReply {\n  string message = 1;\n}\n\n```\n\n# Server\n\n```go\npackage main\n\nimport (\n   \"context\"\n   \"google.golang.org/grpc/reflection\"\n   \"log\"\n   \"net\"\n\n   pb \"github.com/ehsaniara/gRPC-web-example/proto\"\n   \"google.golang.org/grpc\"\n)\n\ntype server struct {\n\tpb.UnimplementedGreeterServer\n}\n\nfunc (s *server) SayHello(ctx context.Context, in *pb.HelloRequest) (*pb.HelloReply, error) {\n\treturn \u0026pb.HelloReply{Message: \"Hello \" + in.Name}, nil\n}\n\nfunc main() {\n\tlis, err := net.Listen(\"tcp\", \":50051\")\n\tif err != nil {\n\t\tlog.Fatalf(\"failed to listen: %v\", err)\n\t}\n\ts := grpc.NewServer()\n\tpb.RegisterGreeterServer(s, \u0026server{})\n\n\t// Register reflection service on gRPC server.\n\treflection.Register(s)\n\tif err := s.Serve(lis); err != nil {\n\t\tlog.Fatalf(\"failed to serve: %v\", err)\n\t}\n\n\tlog.Println(\"Server is running on port 50051\")\n\tif err := s.Serve(lis); err != nil {\n\t\tlog.Fatalf(\"failed to serve: %v\", err)\n\t}\n}\n```\n\n## Envoy config\n\nEnvoy has built-in support for grpc_web, here is a code snip of the Envoy proxy config file.\n\n```yaml\n...\n                http_filters:\n                  - name: envoy.filters.http.grpc_web\n                    typed_config:\n                      \"@type\": type.googleapis.com/envoy.extensions.filters.http.grpc_web.v3.GrpcWeb\n                  - name: envoy.filters.http.cors\n                    typed_config:\n                      \"@type\": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors\n                  - name: envoy.filters.http.router\n                    typed_config:\n                      \"@type\": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router\n...\n```\n\n\n## Web Client\n\n```typescript\n// Import the generated gRPC-Web client stubs and message classes\nimport {GreeterClient} from './generated/helloworld_grpc_web_pb';\nimport {HelloRequest} from './generated/helloworld_pb';\n\n// Create an instance of the Greeter client\nconst client = new GreeterClient('http://localhost:8080');\n\n// Function to send a greeting request\nfunction sayHello(name) {\n    // Create a new request\n    const request = new HelloRequest();\n    request.setName(name);\n\n    // Call the sayHello method on the Greeter client\n    client.sayHello(request, {}, (err, response) =\u003e {\n        if (err) {\n            console.error('Error:', err.message);\n            document.getElementById('output').textContent = 'Error: ' + err.message;\n        } else {\n            console.log('Greeting:', response.getMessage());\n            document.getElementById('output').textContent = 'Greeting: ' + response.getMessage();\n        }\n    });\n}\n\n// Example usage: sending a request when the page loads\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    const name = 'World';\n    sayHello(name);\n});\n```\n\nrun [generate.sh](client/generate.sh) to generate `*_pb.js` files, you need to have `grpc-web` and `protoc-gen-js` (its already generated `helloworld_grpc_web_pb.js` and `helloworld_pb.js`):\n```shell\n$ npm i grpc-web\n\n$ npm install -g protoc-gen-js\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsaniara%2Fgrpc-web-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehsaniara%2Fgrpc-web-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsaniara%2Fgrpc-web-example/lists"}