use env variables to set the backend proxy API url and serve port

frontend/vite.config.js

@@ -1,5 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import vue from '@vitejs/plugin-vue'
 
@@ -9,7 +9,24 @@ function resolve(dir) {
 }
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ command, mode }) => {
+  let API_URL = 'http://127.0.0.1:8001'
+  let PORT = '5173'
+
+  if (command === 'serve') {
+    // dev specific config
+    console.log('loading environment variables from .env and .env.' + mode + ' under ' + process.cwd())
+    const env = loadEnv(mode, process.cwd());
+    API_URL = `${env.VITE_API_URL ?? 'http://127.0.0.1:8001'}`;
+    PORT = `${env.VITE_PORT ?? '5173'}`;
+  } else {
+    // command === 'build'
+    // build specific config
+  }
+
+  console.log('backend api url: ' + API_URL)
+  console.log('server port: ' + PORT)
+  return {
     plugins: [
       vue(),
       createSvgIconsPlugin({
@@ -38,11 +55,12 @@ export default defineConfig({
     server: {
       proxy: {
         '^/api/': {
-        target: 'https://freeleaps-alpha.com',
+          target: API_URL,
           ws: true,
           changeOrigin: true
         }
-    }
+      },
+      port: PORT,
     },
     optimizeDeps: {
       esbuildOptions: {
@@ -56,4 +74,6 @@ export default defineConfig({
         'top-level-await': true //browsers can handle top-level-await features
       },
     }
-})
+  }
+}
+)