flutter-web-grpc sample

Flutter Web gRPC sample (Dart gRPC-backend, Envoy proxy, Flutter Web front-end)

Problem (still reproduces on Flutter 3.19.4)

In Flutter Web app normal gRPC calls fail when interract directly with a gRPC server: to make them work properly we will use the Envoy proxy.

About the repo

A sample of a Flutter Web app that utilizes the "grpc" packages from pub.dev. We will use a proxy called Envoy, that makes gRPC calls work from Flutter Web app.

Instead of direct calls to a gRPC server we will communicate with it through the Envoy proxy like this: Flutter Web App - Envoy proxy - gRPC server.

For Flutter native, mobile or Dart console apps we don't need using the Envoy proxy but can :) (I tested Dart command line app (dart_client_grpc_demo/) and Flutter native app (flutter_web_client_grpc_demo_app/) on Linux and they work properly with Envoy as well).

Note: The repo has been by configuring and running on localhost (assuming that the gRPC service and the Envoy proxy are located on localhost).

About the author's Runtime (Linux)

This repo and samples have been written and tested on Ubuntu 20.04.4 LTS (see "howto.txt" for more details).

Requirements

Flutter 3.19.4
Dart SDK version: 3.3.2 (stable)
Envoy 1.18.2

Optional Requirements:

libprotoc 26.0 (used to compile *.proto files)

Proto sources

Located at the "protos/" dir.

Compiled protos

Located at the "shared/src/generated/protos/" dir compiled by "protoc" (libprotoc 26.0). Execute "make gen-protos" to re-generate "protos/*.proto" files and update proto binaries in all dependant projects.

1. Run the gRPC server (in our sample it is a Dart gRPC server)

It will bind localhost:50051 (see dart_server_grpc_demo/bin/dart_server_grpc_demo.dart and envoy.yaml for the configuration)

cd dart_server_grpc_demo/

dart pub get

dart bin/dart_server_grpc_demo.dart

2. Run Envoy (a proxy that makes gRPC Web calls work)

It will bind localhost:50052 and communicate with gRPC server at localhost:50051 (see envoy.yaml for the configuration)

envoy -c envoy.yaml

3. Run the web app and ensure gRPC calls work properly through Envoy

Afer run the Flutter app, click the "Refresh" button at the bottom right corner to call gRPC and the result will appear at the center of the screen.

You should see Hello, flutter 1!, after next click Hello, flutter 2!, and so on.

cd flutter_web_client_grpc_demo_app/

flutter run -d chrome

*4 (optionally). Ensure gRPC works with and without Envoy in the Flutter native app on Linux

Afer run the Flutter app, click the "Refresh" button at the bottom right corner to call gRPC and the result will appear at the center of the screen (try port 50051 or 50052 in the flutter_web_client_grpc_demo_app/lib/main.dart file).

You should see Hello, flutter 1!, after next click Hello, flutter 2!, and so on.

cd flutter_web_client_grpc_demo_app/

flutter run -d linux

*5 (optionally). Ensure gRPC works with and without Envoy in the Dart console app

The Dart console app works well with a direct gRPC server, as well as via Envoy (try port 50051 or 50052 in the dart_client_grpc_demo/bin/dart_client_grpc_demo.dart file).

You should see the output: Greeter client received: Hello, dart!

cd dart_client_grpc_demo/

dart pub get

dart bin/dart_client_grpc_demo.dart

© Max Shemetov, 2024, MIT License