configure environment variables for backend API and server port to enable debugging on a different port

Author: ups216

client/.env.example

@@ -0,0 +1,5 @@
+# Backend API URL - the target for all proxy endpoints
+BACKEND_API_URL=http://localhost:3001
+
+# Server port for the Vite development server
+SERVER_PORT=3000

client/package.json

@@ -9,22 +9,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@microsoft/applicationinsights-react-js": "^18.3.6",
+    "@microsoft/applicationinsights-web": "^3.3.6",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.22.3",
-    "@microsoft/applicationinsights-react-js": "^18.3.6",
-    "@microsoft/applicationinsights-web": "^3.3.6"
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.18",
+    "dotenv": "^16.4.7",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.11",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "vite": "^5.4.2"
   }
-}
+}

client/vite.config.ts

@@ -1,6 +1,15 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
+import dotenv from 'dotenv';
+
+// Load environment variables from .env file
+dotenv.config();
+
+// Define backend API target URL that can be easily changed
+const BACKEND_API_URL = process.env.BACKEND_API_URL || 'http://localhost:3001';
+// Define server port that can be configured via environment variable
+const SERVER_PORT = parseInt(process.env.SERVER_PORT || '3000', 10);
 
 export default defineConfig({
   plugins: [react()],
@@ -9,14 +18,14 @@ export default defineConfig({
   },
   server: {
     host: '0.0.0.0', // Allow access from any IP address
-    port: 3000, // Port for the Vite server
+    port: SERVER_PORT, // Port for the Vite server from environment variables
     proxy: {
       '/v1/mcp': {
-        target: 'http://localhost:3001',
+        target: BACKEND_API_URL,
         changeOrigin: true
       },
       '/v1/hub': {
-        target: 'http://localhost:3001',
+        target: BACKEND_API_URL,
         changeOrigin: true
       }
     }