Made cogen react ui to use runtime environment variables (#807)

Signed-off-by: jaswanth8888 <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

CodeGen/docker_compose/intel/cpu/xeon/README.md

@@ -52,6 +52,24 @@ Then run the command `docker images`, you will have the following 3 Docker Image
 - `opea/codegen:latest`
 - `opea/codegen-ui:latest`
 
+### 8. Build CodeGen React UI Docker Image (Optional)
+
+Build react frontend Docker image via below command:
+
+**Export the value of the public IP address of your Xeon server to the `host_ip` environment variable**
+
+```bash
+cd GenAIExamples/CodeGen/ui
+docker build --no-cache -t opea/codegen-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
+```
+
+Then run the command `docker images`, you will have the following 3 Docker Images:
+
+- `opea/llm-tgi:latest`
+- `opea/codegen:latest`
+- `opea/codegen-ui:latest`
+- `opea/codegen-react-ui:latest` (optional)
+
 ## 🚀 Start Microservices and MegaService
 
 The CodeGen megaservice manages a single microservice called LLM within a Directed Acyclic Graph (DAG). In the diagram above, the LLM microservice is a language model microservice that generates code snippets based on the user's input query. The TGI service serves as a text generation interface, providing a RESTful API for the LLM microservice. The CodeGen Gateway acts as the entry point for the CodeGen application, invoking the Megaservice to generate code snippets in response to the user's input query.
@@ -167,6 +185,7 @@ codegen-xeon-react-ui-server:
     - no_proxy=${no_proxy}
     - https_proxy=${https_proxy}
     - http_proxy=${http_proxy}
+    - APP_CODE_GEN_URL=${BACKEND_SERVICE_ENDPOINT}
   depends_on:
     - codegen-xeon-backend-server
   ports:

CodeGen/docker_compose/intel/hpu/gaudi/README.md

@@ -38,13 +38,15 @@ cd GenAIExamples/CodeGen/ui
 docker build -t opea/codegen-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
 ```
 
-### 5. Build the React UI Docker Image
+### 8. Build CodeGen React UI Docker Image (Optional)
 
-Construct the React frontend Docker image via the command below:
+Build react frontend Docker image via below command:
+
+**Export the value of the public IP address of your Xeon server to the `host_ip` environment variable**
 
 ```bash
 cd GenAIExamples/CodeGen/ui
-docker build -t opea/codegen-react-ui:latest --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT -f ./docker/Dockerfile.react .
+docker build --no-cache -t opea/codegen-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
 ```
 
 Then run the command `docker images`, you will have the following 3 Docker images:
@@ -160,6 +162,7 @@ codegen-gaudi-react-ui-server:
     - no_proxy=${no_proxy}
     - https_proxy=${https_proxy}
     - http_proxy=${http_proxy}
+    - APP_CODE_GEN_URL=${BACKEND_SERVICE_ENDPOINT}
   depends_on:
     - codegen-gaudi-backend-server
   ports:

CodeGen/ui/docker/Dockerfile.react

@@ -4,21 +4,18 @@
 # Use node 20.11.1 as the base image
 FROM node:20.11.1 as vite-app
 
-COPY . /usr/app
+COPY react /usr/app/react
 WORKDIR /usr/app/react
 
-ARG BACKEND_SERVICE_ENDPOINT
-ENV VITE_CODE_GEN_URL=$BACKEND_SERVICE_ENDPOINT
 
 RUN ["npm", "install"]
 RUN ["npm", "run", "build"]
 
 
 FROM nginx:alpine
-EXPOSE 80
 
-
-COPY --from=vite-app /usr/app/react/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=vite-app /usr/app/react/dist /usr/share/nginx/html
+COPY ./react/env.sh /docker-entrypoint.d/env.sh
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+COPY ./react/nginx.conf /etc/nginx/conf.d/default.conf
+RUN chmod +x /docker-entrypoint.d/env.sh

CodeGen/ui/react/.env.production

@@ -0,0 +1 @@
+VITE_CODE_GEN_URL=APP_CODE_GEN_URL

CodeGen/ui/react/env.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+# Copyright (C) 2024 Intel Corporation
+# SPDX-License-Identifier: Apache-2.0
+
+for i in $(env | grep APP_) #// Make sure to use the prefix APP_ if you have any other prefix in env.production file variable name replace it with APP_
+do
+    key=$(echo $i | cut -d '=' -f 1)
+    value=$(echo $i | cut -d '=' -f 2-)
+    echo $key=$value
+
+    # sed JS and CSS only
+    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+done