Front/example

README.md

@@ -19,7 +19,7 @@ The example is completely containerised, and can be run with docker-compose.
 
 
 
-## how to run the example
+## how to run the backend example
 
 ### with docker-compose
 
@@ -74,3 +74,51 @@ to visit the django admin page, go to http://localhost:8000/admin
 ```bash
 
 ```
+
+
+
+## how to run the frontend example
+
+### with docker-compose
+
+```bash
+docker-compose up --build
+
+docker compose exec dsg-example-grpc ./manage.py migrate
+
+# TODO load data
+```
+
+Go to http://localhost:5173 and create elements
+
+
+
+## how to update the js file when API update
+
+Best practice want you to generate API in a separate repository or use BSR (Buf Schema Registry) to generate client and API for language. But for helping the understanding of how it work we simplified it to help everyone understand.
+
+Doc are coming to explain the step for the grpc web example
+
+```
+cp backend/example_bib_app/grpc/*.proto frontend/grpc-web-example/proto/
+
+docker compose exec dsg-example-front npx buf generate proto
+```
+
+npx: Execute package binary
+buf: Package binary used to generate js file
+generate: command of the buf cli
+proto: directory where to find the .proto file
+
+This command should be executed where the buf.gen.yaml file is.
+
+This command generate src/gen/example_bib_app_pb.js file
+
+https://github.com/bufbuild/protobuf-es
+https://github.com/bufbuild/protobuf-es/blob/main/docs/generated_code.md
+
+https://connectrpc.com/docs/web/getting-started/
+https://connectrpc.com/docs/web/choosing-a-protocol
+
+https://github.com/connectrpc/connect-es
+

backend/example_bib_app/services.py

@@ -34,10 +34,17 @@
     BookProtoSerializer,
     JournalProtoSerializer,
 )
+from django_socio_grpc.grpc_actions.placeholders import (
+    FnPlaceholder,
+    LookupField,
+    SelfSerializer,
+    StrTemplatePlaceholder,
+)
 
 from .filters import PublisherFilterSet, BookFilterSet
 
 
+
 class AuthorService(generics.AsyncModelService):
     queryset = Author.objects.all()
 

docker-compose.yaml

@@ -30,19 +30,36 @@ services:
     networks:
       dsg-example-network:
 
-  # envoy:
-  #   build:
-  #     context: ./
-  #     dockerfile: ./envoy/Dockerfile
-  #   image: grpcweb/envoy
-  #   volumes:
-  #     - ./envoy:/etc/envoy
-  #   ports:
-  #     - "30001:9001"
-  #   links:
-  #     - document-grpc
-  #   networks:
-  #     dsg-example-network:
+  envoy:
+    build:
+      context: ./
+      dockerfile: ./envoy/Dockerfile
+    image: grpcweb/envoy
+    volumes:
+      - ./envoy:/etc/envoy
+    ports:
+      - "9001:9001"
+    links:
+      - dsg-example-grpc
+    networks:
+      dsg-example-network:
+
+
+  # ---------------------------- Front -------------------------------------------
+
+  dsg-example-front:
+    image: dsg-example-front
+    container_name: dsg-example-front
+    ports:
+      - "5173:5173"
+    build:
+      context: ./frontend/grpc-web-example
+    volumes:
+      - ./frontend/grpc-web-example:/opt/code
+      - /opt/code/node_modules
+    command: dev -- --host
+    networks:
+      dsg-example-network:
 
 networks:
   dsg-example-network:

envoy/Dockerfile

@@ -0,0 +1,19 @@
+# Copyright 2018 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM envoyproxy/envoy:v1.28.0
+
+COPY envoy/envoy.yaml /etc/envoy/envoy.yaml
+
+CMD /usr/local/bin/envoy -c /etc/envoy/envoy.yaml -l trace --log-path /tmp/envoy_info.log

envoy/envoy.yaml

@@ -0,0 +1,61 @@
+admin:
+  access_log_path: /tmp/admin_access.log
+  address:
+    socket_address: { address: 0.0.0.0, port_value: 9901 }
+
+static_resources:
+  listeners:
+  - name: listener_0
+    address:
+      socket_address: { address: 0.0.0.0, port_value: 9001 }
+    filter_chains:
+    - filters:
+      - name: envoy.filters.network.http_connection_manager
+        typed_config:
+          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
+          codec_type: auto
+          stat_prefix: ingress_http
+          route_config:
+            name: local_route
+            virtual_hosts:
+            - name: local_service
+              domains: ["*"]
+              routes:
+              - match: { prefix: "/" }
+                route:
+                  cluster: dsg-example-back
+                  timeout: 0s
+                  max_stream_duration:
+                    grpc_timeout_header_max: 0s
+              cors:
+                allow_origin_string_match:
+                - prefix: "*"
+                allow_methods: GET, PUT, DELETE, POST, OPTIONS
+                allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout,filters,pagination,headers,accept-language
+                max_age: "1728000"
+                expose_headers: custom-header-1,grpc-status,grpc-message,filters,pagination,headers
+          http_filters:
+            - name: envoy.filters.http.grpc_web
+              typed_config:
+                "@type": type.googleapis.com/envoy.extensions.filters.http.grpc_web.v3.GrpcWeb
+            - name: envoy.filters.http.cors
+              typed_config:
+                "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors
+            - name: envoy.filters.http.router
+              typed_config:
+                "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
+  clusters:
+  - name: dsg-example-back
+    connect_timeout: 0.25s
+    type: logical_dns
+    http2_protocol_options: {}
+    lb_policy: round_robin
+    load_assignment:
+      cluster_name: cluster_0
+      endpoints:
+        - lb_endpoints:
+            - endpoint:
+                address:
+                  socket_address:
+                    address: dsg-example-grpc
+                    port_value: 50051

frontend/grpc-web-example/.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

frontend/grpc-web-example/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/grpc-web-example/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

frontend/grpc-web-example/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18.15-alpine
+
+WORKDIR /opt/code
+
+COPY package.json package-lock.json ./
+RUN npm install 
+
+EXPOSE 5173
+ENTRYPOINT ["npm", "run"]

frontend/grpc-web-example/README.md

@@ -0,0 +1,35 @@
+# grpc-web-example
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

frontend/grpc-web-example/buf.gen.yaml

@@ -0,0 +1,8 @@
+version: v1
+plugins:
+  - plugin: es
+    opt: target=js
+    out: src/gen
+  - plugin: connect-es
+    out: src/gen
+    opt: target=js

frontend/grpc-web-example/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>