tokio-rs · hds · Feb 23, 2024 · Feb 17, 2024 · Feb 17, 2024 · Feb 17, 2024
@@ -101,3 +101,34 @@ jobs:
 
       - name: Run cargo clippy
         run: cargo clippy -- -D warnings
+
+  grpc_web:
+    name: gRPC-web Example
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: console-subscriber/examples/grpc_web/app
+    steps:
+      - name: Checkout sources
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Format
+        run: npm run fmt
+
+      - name: Generate
+        run: npm run gen
+
+      - name: Check no changes
+        run: git diff --exit-code
+
+      - name: Build
+        run: npm run build
diff --git a/console-subscriber/examples/grpc_web/README.md b/console-subscriber/examples/grpc_web/README.md
@@ -0,0 +1,50 @@
+# gRPC-web Example
+
+This app provides an example of using the gRPC-web library to facilitate communication between a web browser and a gRPC server.
+
+## Prerequisites
+
+Ensure you have the following installed on your system:
+
+- [Node.js](https://nodejs.org/en/download/) (version 20.10.0 or higher)
+- [npm](https://www.npmjs.com/get-npm) (version 10.2.3 or higher)
+
+## Getting Started
+
+Follow these steps to get the application up and running:
+
+1. **Install Dependencies:** Navigate to the `console-subscriber/examples/grpc_web/app` directory and install all necessary dependencies:
+
+    ```sh
+    npm install
+    ```
+
+2. **Start the gRPC-web Server:** In the console-subscriber directory, start the server:
+
+    ```sh
+    cargo run --example grpc_web --features grpc-web
+    ```
+
+3. **Start the Web Application:** In the `console-subscriber/examples/grpc_web/app` directory, start the web application:
+
+    ```sh
+    npm run dev
+    ```
+
+4. **View the Application:** Open a web browser and navigate to `http://localhost:5173`. You can view the output in the developer console.
+
+## Understanding the Code
+
+This example leverages the [connect-es] library to enable communication with the gRPC server from a web browser. The client code can be found in the `console-subscriber/examples/grpc_web/app/src/app.tsx` file.
+
+The [buf] tool is used to generate the gRPC code. You can generate the code using the following command:
+
+```sh
+npm run gen
+```
+
+For more information about the connect-es library, refer to the [connect-es documentation].
+
+[connect-es]: https://github.com/connectrpc/connect-es
+[buf]: https://buf.build/
+[connect-es documentation]: https://connectrpc.com/docs/web/getting-started
diff --git a/console-subscriber/examples/grpc_web/app/.eslintrc.cjs b/console-subscriber/examples/grpc_web/app/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};
diff --git a/console-subscriber/examples/grpc_web/app/.gitignore b/console-subscriber/examples/grpc_web/app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/console-subscriber/examples/grpc_web/app/.prettierignore b/console-subscriber/examples/grpc_web/app/.prettierignore
@@ -0,0 +1 @@
+src/gen/**/*
diff --git a/console-subscriber/examples/grpc_web/app/README.md b/console-subscriber/examples/grpc_web/app/README.md
@@ -0,0 +1 @@
+../README.md
diff --git a/console-subscriber/examples/grpc_web/app/buf.gen.yaml b/console-subscriber/examples/grpc_web/app/buf.gen.yaml
@@ -0,0 +1,8 @@
+version: v1
+plugins:
+  - plugin: es
+    opt: target=ts
+    out: src/gen
+  - plugin: connect-es
+    opt: target=ts
+    out: src/gen
diff --git a/console-subscriber/examples/grpc_web/app/index.html b/console-subscriber/examples/grpc_web/app/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>gRPC-Web Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>