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,51 +9,71 @@ function resolve(dir) {
 }
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ command, mode }) => {
-  plugins: [
+  let API_URL = 'http://127.0.0.1:8001'
-    vue(),
+  let PORT = '5173'
-    createSvgIconsPlugin({
+
-      iconDirs: [resolve('src/icons')],
+  if (command === 'serve') {
-      symbolId: 'icon-[name]'
+    // dev specific config
-    }),
+    console.log('loading environment variables from .env and .env.' + mode + ' under ' + process.cwd())
-  ],
+    const env = loadEnv(mode, process.cwd());
-  resolve: {
+    API_URL = `${env.VITE_API_URL ?? 'http://127.0.0.1:8001'}`;
-    root: resolve('src'),
+    PORT = `${env.VITE_PORT ?? '5173'}`;
-    alias: {
+  } else {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    // command === 'build'
-      '~bootstrap': resolve('node_modules/bootstrap'),
+    // build specific config
-      '~quill': resolve('node_modules/quill'),
-    }
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "@/assets/styles/main.scss";`
-      },
-      styl: {
-        additionalData: ` @import '~quill/dist/quill.core.css';'~quill/dist/quill.bubble.css';'~quill/dist/quill.snow.css';`
-      }
-    }
-  },
-  server: {
-    proxy: {
-      '^/api/': {
-        target: 'https://freeleaps-alpha.com',
-        ws: true,
-        changeOrigin: true
-      }
-    }
-  },
-  optimizeDeps: {
-    esbuildOptions: {
-      supported: {
-        "top-level-await": true
-      },
-    },
-  },
-  esbuild: {
-    supported: {
-      'top-level-await': true //browsers can handle top-level-await features
-    },
   }
-})
+
+  console.log('backend api url: ' + API_URL)
+  console.log('server port: ' + PORT)
+  return {
+    plugins: [
+      vue(),
+      createSvgIconsPlugin({
+        iconDirs: [resolve('src/icons')],
+        symbolId: 'icon-[name]'
+      }),
+    ],
+    resolve: {
+      root: resolve('src'),
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        '~bootstrap': resolve('node_modules/bootstrap'),
+        '~quill': resolve('node_modules/quill'),
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@import "@/assets/styles/main.scss";`
+        },
+        styl: {
+          additionalData: ` @import '~quill/dist/quill.core.css';'~quill/dist/quill.bubble.css';'~quill/dist/quill.snow.css';`
+        }
+      }
+    },
+    server: {
+      proxy: {
+        '^/api/': {
+          target: API_URL,
+          ws: true,
+          changeOrigin: true
+        }
+      },
+      port: PORT,
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        supported: {
+          "top-level-await": true
+        },
+      },
+    },
+    esbuild: {
+      supported: {
+        'top-level-await': true //browsers can handle top-level-await features
+      },
+    }
+  }
+}
+)