Wangzt dev

report-front-end/package.json

@@ -4,7 +4,7 @@
   "version": "3.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "start": "vite --host 0.0.0.0",
     "build": "vite build"
   },
   "dependencies": {
@@ -16,27 +16,29 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "aws-amplify": "^5.3.12",
+    "dotenv": "^16.4.5",
     "luxon": "^3.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-json-view-lite": "^0.9.8",
     "react-markdown": "^9.0.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.15.0",
     "react-speech-recognition": "^3.10.0",
+    "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
     "react-use-websocket": "^4.8.1",
+    "redux": "^5.0.1",
     "regenerator-runtime": "^0.14.0",
     "remark-gfm": "^4.0.0",
-    "uuid": "^9.0.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "redux": "^5.0.1",
-    "react-redux": "^9.1.2"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/luxon": "^3.3.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/react-speech-recognition": "^3.9.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^9.0.3",
     "@types/zen-observable": "^0.8.5",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -51,7 +53,6 @@
     "sass": "^1.65.1",
     "typescript": "^5.0.2",
     "vite": "^4.5.2",
-    "zen-observable": "^0.10.0",
-    "@types/react-syntax-highlighter": "^15.5.13"
+    "zen-observable": "^0.10.0"
   }
 }

report-front-end/src/common/api/WebSocket.ts

@@ -8,7 +8,7 @@ export function createWssClient(
   setStatusMessage: Dispatch<SetStateAction<ChatBotMessageItem[]>>,
   setMessageHistory: Dispatch<SetStateAction<ChatBotHistoryItem[]>>
 ) {
-  const socketUrl = import.meta.env.VITE_WEBSOCKET_URL;
+  const socketUrl = process.env.VITE_WEBSOCKET_URL;
   const {sendJsonMessage}
     // eslint-disable-next-line react-hooks/rules-of-hooks
     = useWebSocket(socketUrl, {

report-front-end/src/common/constant/constants.ts

@@ -15,14 +15,14 @@ export const DEFAULT_QUERY_CONFIG = {
 
 export const LOCALSTORAGE_KEY = "__GEN_BI_STORE_INFO__";
 
-export const BACKEND_URL = import.meta.env.VITE_BACKEND_URL?.endsWith("/")
-  ? import.meta.env.VITE_BACKEND_URL
-  : import.meta.env.VITE_BACKEND_URL + "/";
+export const BACKEND_URL = process.env.VITE_BACKEND_URL?.endsWith("/")
+  ? process.env.VITE_BACKEND_URL
+  : process.env.VITE_BACKEND_URL + "/";
 
-export const APP_TITLE = import.meta.env.VITE_TITLE;
+export const APP_TITLE = process.env.VITE_TITLE;
 
-export const APP_LOGO = import.meta.env.VITE_LOGO || '';
+export const APP_LOGO = process.env.VITE_LOGO || '';
 
-export const APP_RIGHT_LOGO = import.meta.env.VITE_RIGHT_LOGO || '';
+export const APP_RIGHT_LOGO = process.env.VITE_RIGHT_LOGO || '';
 
-export const SQL_DISPLAY = import.meta.env.VITE_SQL_DISPLAY;
+export const SQL_DISPLAY = process.env.VITE_SQL_DISPLAY;

report-front-end/src/pages/login-page/aws-config.ts

@@ -1,7 +1,7 @@
 export const awsConfig = {
     Auth: {
-        region: import.meta.env.VITE_COGNITO_REGION,
-        userPoolId: import.meta.env.VITE_COGNITO_USER_POOL_ID,
-        userPoolWebClientId: import.meta.env.VITE_COGNITO_USER_POOL_WEB_CLIENT_ID,
+        region: process.env.VITE_COGNITO_REGION,
+        userPoolId: process.env.VITE_COGNITO_USER_POOL_ID,
+        userPoolWebClientId: process.env.VITE_COGNITO_USER_POOL_WEB_CLIENT_ID,
     }
 };

report-front-end/vite.config.ts

@@ -1,10 +1,31 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import dotenv from 'dotenv';
+import fs from 'fs';
+import path from 'path';
+
+// Load .env file
+const envPath = path.resolve(__dirname, '.env');
+if (fs.existsSync(envPath)) {
+  dotenv.config({ path: envPath });
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
-    "process.env": {},
+    "process.env": {
+      VITE_TITLE: process.env.VITE_TITLE,
+      VITE_LOGO: process.env.VITE_LOGO,
+      VITE_RIGHT_LOGO: process.env.VITE_RIGHT_LOGO,
+      VITE_COGNITO_REGION: process.env.VITE_COGNITO_REGION,
+      VITE_COGNITO_USER_POOL_ID: process.env.VITE_COGNITO_USER_POOL_ID,
+      VITE_COGNITO_USER_POOL_WEB_CLIENT_ID: process.env.VITE_COGNITO_USER_POOL_WEB_CLIENT_ID,
+      VITE_COGNITO_IDENTITY_POOL_ID: process.env.VITE_COGNITO_IDENTITY_POOL_ID,
+      VITE_SQL_DISPLAY: process.env.VITE_SQL_DISPLAY,
+      VITE_BACKEND_URL: process.env.VITE_BACKEND_URL,
+      VITE_WEBSOCKET_URL: process.env.VITE_WEBSOCKET_URL,
+      VITE_LOGIN_TYPE: process.env.VITE_LOGIN_TYPE,
+    },
   },
   plugins: [
     react(),

source/resources/lib/ecs/ecs-stack.ts

@@ -20,9 +20,6 @@ constructor(scope: Construct, id: string, props: cdk.StackProps & { cognitoUserP
         isDefault: true,
     });
 
-    // Get the AOS password secret
-    // const aosPasswordSecret = secretsmanager.Secret.fromSecretNameV2(this, 'AOSPasswordSecret', 'aosPasswordSecret');
-
     // Create ECR repositories and Docker image assets
     const services = [
       { name: 'genbi-streamlit', dockerfile: 'Dockerfile', port: 8501, dockerfileDirectory: path.join(__dirname, '../../../../application')},
@@ -212,30 +209,6 @@ constructor(scope: Construct, id: string, props: cdk.StackProps & { cognitoUserP
     });
 
     // ======= 3. Frontend Service =======
-
-    // a hacky way of writing the .env file for the frontend before docker building. The frontend does not support runtime environment for now.
-    const fs = require('fs');
-    const envVars: { [key: string]: string } = {
-      VITE_TITLE: 'Guidance for Generative BI on Amazon Web Services',
-      VITE_LOGO: '/logo.png',
-      VITE_RIGHT_LOGO: '',
-      VITE_COGNITO_REGION: cdk.Aws.REGION,
-      VITE_COGNITO_USER_POOL_ID: props.cognitoUserPoolId,
-      VITE_COGNITO_USER_POOL_WEB_CLIENT_ID: props.cognitoUserPoolClientId,
-      VITE_COGNITO_IDENTITY_POOL_ID: '',
-      VITE_SQL_DISPLAY: 'yes',
-      VITE_BACKEND_URL: `https://${fargateServiceAPI.loadBalancer.loadBalancerDnsName}/`,
-      VITE_WEBSOCKET_URL: `ws://${fargateServiceAPI.loadBalancer.loadBalancerDnsName}/qa/ws`,
-      VITE_LOGIN_TYPE: 'Cognito'
-    };
-
-    let envFileContent = '';
-    for (const key in envVars) {
-      envFileContent += `${key}=${envVars[key]}\n`;
-    }
-
-    fs.writeFileSync(path.join(__dirname, '../../../../report-front-end/.env'), envFileContent);
-
     const GenBiFrontendDockerImageAsset = {'dockerImageAsset': new DockerImageAsset(this, 'GenBiFrontendDockerImage', {
       directory: services[2].dockerfileDirectory, 
       file: services[2].dockerfile, 
@@ -257,6 +230,18 @@ constructor(scope: Construct, id: string, props: cdk.StackProps & { cognitoUserP
       }),
     });
 
+    containerFrontend.addEnvironment('VITE_TITLE', 'Guidance for Generative BI')
+    containerFrontend.addEnvironment('VITE_LOGO', '/logo.png');
+    containerFrontend.addEnvironment('VITE_RIGHT_LOGO', '');
+    containerFrontend.addEnvironment('VITE_COGNITO_REGION', cdk.Aws.REGION);
+    containerFrontend.addEnvironment('VITE_COGNITO_USER_POOL_ID', props.cognitoUserPoolId);
+    containerFrontend.addEnvironment('VITE_COGNITO_USER_POOL_WEB_CLIENT_ID', props.cognitoUserPoolClientId);
+    containerFrontend.addEnvironment('VITE_COGNITO_IDENTITY_POOL_ID', '');
+    containerFrontend.addEnvironment('VITE_SQL_DISPLAY', 'yes');
+    containerFrontend.addEnvironment('VITE_BACKEND_URL', `https://${fargateServiceAPI.loadBalancer.loadBalancerDnsName}/`);
+    containerFrontend.addEnvironment('VITE_WEBSOCKET_URL', `ws://${fargateServiceAPI.loadBalancer.loadBalancerDnsName}/qa/ws`);
+    containerFrontend.addEnvironment('VITE_LOGIN_TYPE', 'Cognito');
+
     containerFrontend.addPortMappings({
       containerPort: GenBiFrontendDockerImageAsset.port,
     });
@@ -269,24 +254,23 @@ constructor(scope: Construct, id: string, props: cdk.StackProps & { cognitoUserP
       assignPublicIp: true
     });
 
-    // Output the endpoint
     this.streamlitEndpoint = fargateServiceStreamlit.loadBalancer.loadBalancerDnsName;
-    this.frontendEndpoint = fargateServiceFrontend.loadBalancer.loadBalancerDnsName;
     this.apiEndpoint = fargateServiceAPI.loadBalancer.loadBalancerDnsName;
+    this.frontendEndpoint = fargateServiceFrontend.loadBalancer.loadBalancerDnsName;
 
     new cdk.CfnOutput(this, 'StreamlitEndpoint', {
-      value: this.streamlitEndpoint,
+      value: fargateServiceStreamlit.loadBalancer.loadBalancerDnsName,
       description: 'The endpoint of the Streamlit service'
     });
 
-    new cdk.CfnOutput(this, 'FrontendEndpoint', {
-      value: this.frontendEndpoint,
-      description: 'The endpoint of the Frontend service'
-    });
-
     new cdk.CfnOutput(this, 'APIEndpoint', {
-      value: this.apiEndpoint,
+      value: fargateServiceAPI.loadBalancer.loadBalancerDnsName,
       description: 'The endpoint of the API service'
     });
+
+    new cdk.CfnOutput(this, 'FrontendEndpoint', {
+      value: fargateServiceFrontend.loadBalancer.loadBalancerDnsName,
+      description: 'The endpoint of the Frontend service'
+    });
   }
 }