🔧(frontend) pass host and port through environment vars

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.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",

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"]
 }

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',
+    },
+  }
 })