From 35ebc5a608f0769e7f7eee87bd537352559abedd Mon Sep 17 00:00:00 2001
From: antoine lebaud <lebaud.antoine131@gmail.com>
Date: Tue, 2 Jul 2024 17:07:17 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7(frontend)=20pass=20host=20and=20po?=
 =?UTF-8?q?rt=20through=20environment=20vars?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Configured the frontend to use environment variables (prefixed with "VITE_") for frontend
port and host configuration, which will be overridden in the Helm chart values
to ensure correct values are used in different environments.

Helm requires the frontend port to be 8081 and use the public host,
not the default "localhost" value.
---
 src/frontend/package-lock.json  | 16 ++++++++++++++++
 src/frontend/package.json       |  1 +
 src/frontend/tsconfig.node.json |  3 ++-
 src/frontend/vite.config.ts     | 16 ++++++++++------
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 63fb5da0..149ae88c 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -14,6 +14,7 @@
       "devDependencies": {
         "@livekit/components-react": "2.3.3",
         "@livekit/components-styles": "1.0.12",
+        "@types/node": "^20.14.9",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
         "@typescript-eslint/eslint-plugin": "7.13.1",
@@ -1346,6 +1347,15 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.14.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz",
+      "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -3325,6 +3335,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index f35e93ee..696c138e 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -14,6 +14,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@types/node": "20.14.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.13.1",
diff --git a/src/frontend/tsconfig.node.json b/src/frontend/tsconfig.node.json
index 3afdd6e3..bccc6226 100644
--- a/src/frontend/tsconfig.node.json
+++ b/src/frontend/tsconfig.node.json
@@ -7,7 +7,8 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "noEmit": true
+    "noEmit": true,
+    "types": ["node"]
   },
   "include": ["vite.config.ts"]
 }
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index c72ca71d..d75b49f1 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -1,10 +1,14 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-  },
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    plugins: [react()],
+    server: {
+      port: parseInt(env.VITE_PORT) || 3000,
+      host: env.VITE_HOST || 'localhost',
+    },
+  }
 })