Generate protobuf code for TypeScript service - Frontend (#1954)

* Generate protobuf code for Typescript service - Frontend

* additional changes for generating protobuf #1787

* Included generated files #1787

* Ignore copyright license for generated proto #1787

* Update MakeFile to clean working directory #1787

* Update Generated proto #1787

* chore: update CHANGELOG.md

.gitignore

@@ -44,8 +44,6 @@ test/tracetesting/tracetesting-vars.yaml
 /src/accounting/src/protos/
 /src/cart/src/protos/
 /src/fraud-detection/src/main/proto
-/src/frontend/pb/
-/src/frontend/protos/
 /src/payment/demo.proto
 /src/shipping/proto/
 /src/currency/proto

.licenserc.json

@@ -52,6 +52,7 @@
         "src/react-native-app/expo-env.d.ts",
         "src/recommendation/demo_pb2.py",
         "src/recommendation/demo_pb2_grpc.py",
+        "src/frontend/protos/demo.ts",
         "internal/tools/"
     ]
   }

CHANGELOG.md

@@ -76,6 +76,8 @@ the release.
   ([#1923](https://github.com/open-telemetry/opentelemetry-demo/pull/1923))
 * [chore] Add memory for frontend-proxy, kafka, grafana, opensearch
   ([#1931](https://github.com/open-telemetry/opentelemetry-demo/pull/1931))
+* [chore] Generate protobuf code for Typescript service - Frontend
+  ([#1954](https://github.com/open-telemetry/opentelemetry-demo/pull/1954))
 
 ## 1.12.0
 

Makefile

@@ -150,6 +150,7 @@ docker-generate-protobuf:
 clean:
 	rm -rf ./src/{checkout,product-catalog}/genproto/oteldemo/
 	rm -rf ./src/recommendation/{demo_pb2,demo_pb2_grpc}.py
+	rm -rf ./src/frontend/protos/demo.ts
 
 .PHONY: check-clean-work-tree
 check-clean-work-tree:

docker-gen-proto.sh

@@ -30,14 +30,27 @@ gen_proto_python() {
     python -m grpc_tools.protoc -I /build/pb/ --python_out="./src/$1/" --grpc_python_out="./src/$1/" /build/pb/demo.proto
 }
 
+gen_proto_ts() {
+  echo "Generating Typescript protobuf files for $1"
+  docker build -f "src/$1/genproto/Dockerfile" -t "$1-genproto" .
+  docker run --rm -e SERVICE=$1 -v $(pwd):/build "$1-genproto" /bin/sh -c '
+    mkdir -p /build/src/$SERVICE/protos && \
+    protoc -I /build/pb \
+    --plugin=protoc-gen-ts_proto=/app/node_modules/.bin/protoc-gen-ts_proto \
+    --ts_proto_opt=esModuleInterop=true \
+    --ts_proto_out="/build/src/$SERVICE/protos" \
+    --ts_proto_opt=outputServices=grpc-js \
+    /build/pb/demo.proto'
+}
+
 if [ -z "$1" ]; then
   #gen_proto_dotnet accounting
   #gen_proto_java ad
   #gen_proto_dotnet cart
   gen_proto_go checkout
   gen_proto_cpp currency
   #gen_proto_ruby email
-  #gen_proto_ts frontend
+  gen_proto_ts frontend
   #gen_proto_js payment
   gen_proto_go product-catalog
   #gen_proto_php quote

src/frontend/.prettierignore

@@ -4,3 +4,4 @@ build
 dist
 .husky
 node_modules
+protos/

src/frontend/Dockerfile

@@ -1,7 +1,6 @@
 # Copyright The OpenTelemetry Authors
 # SPDX-License-Identifier: Apache-2.0
 
-
 FROM node:20-alpine AS deps
 RUN apk add --no-cache libc6-compat
 
@@ -11,18 +10,16 @@ COPY ./src/frontend/package*.json ./
 RUN npm ci
 
 FROM node:20-alpine AS builder
-RUN apk add --no-cache libc6-compat protobuf-dev protoc
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
-COPY ./pb ./pb
+COPY ./src/frontend/protos ./protos
 COPY ./src/frontend .
 
-RUN npm run grpc:generate
 RUN npm run build
 
 FROM node:20-alpine AS runner
 WORKDIR /app
-RUN apk add --no-cache protobuf-dev protoc
 
 ENV NODE_ENV=production
 

src/frontend/genproto/Dockerfile

@@ -0,0 +1,14 @@
+# Copyright The OpenTelemetry Authors
+# SPDX-License-Identifier: Apache-2.0
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+RUN apk add --no-cache libc6-compat protobuf-dev protoc
+
+COPY ./src/frontend/package*.json ./
+
+RUN npm ci
+
+COPY ./pb /build/pb

src/frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "npm run grpc:generate && NODE_OPTIONS='-r ./utils/telemetry/Instrumentation.js' next dev",
+    "dev": "NODE_OPTIONS='-r ./utils/telemetry/Instrumentation.js' next dev",
     "build": "next build",
     "start": "node --require ./Instrumentation.js server.js",
     "lint": "next lint",
@@ -44,7 +44,6 @@
     "react-dom": "19.0.0",
     "sharp": "0.33.5",
     "styled-components": "6.1.14",
-    "ts-proto": "1.181.1",
     "uuid": "11.0.5"
   },
   "devDependencies": {
@@ -61,6 +60,7 @@
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "5.1.0",
     "openapi-typescript": "7.5.2",
+    "ts-proto": "1.181.1",
     "typescript": "5.7.3"
   }
 }