Configurable backend port

backend/config/__init__.py

@@ -4,7 +4,7 @@ from dotenv import load_dotenv
 load_dotenv()
 
 # Uvicorn
-DEV_PORT: int = 5000
+DEV_PORT: int = int(os.environ.get('VITE_BACKEND_DEV_PORT', '5000'))
 DEV_HOST: str = "0.0.0.0"
 
 # PATHS

env.template

@@ -1,4 +1,5 @@
 ROMM_BASE_PATH=/path/to/romm_mock
+VITE_BACKEND_DEV_PORT=5000
 
 # IGDB auth
 CLIENT_ID=

frontend/vite.config.js

@@ -5,64 +5,70 @@ import { VitePWA } from 'vite-plugin-pwa'
 import pluginRewriteAll from 'vite-plugin-rewrite-all'
 
 // Utilities
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import { fileURLToPath, URL } from 'node:url'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    pluginRewriteAll(),
-    vue({ 
-      template: { transformAssetUrls }
-    }),
-    vuetify({
-      autoImport: true,
-      styles: {
-        configFile: 'src/styles/settings.scss',
-      },
-    }),
-    VitePWA({
-      manifest: {
-        icons: [
-          {
-            src: "favicon.ico",
-            sizes: "256x256",
-            type: "image/ico",
-            purpose: "any maskable"
-          }
-        ]
-      }
-    })
-  ],
-  define: { 'process.env': {} },
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
+export default defineConfig(({mode}) =>{
+  // Load ENV variables from the parent directory and the current directory.
+  const env = {...loadEnv(mode, '../'), ...loadEnv(mode, './')};
+  const backendPort = env.VITE_BACKEND_DEV_PORT ?? '5000';
+
+  return {
+    plugins: [
+      pluginRewriteAll(),
+      vue({ 
+        template: { transformAssetUrls }
+      }),
+      vuetify({
+        autoImport: true,
+        styles: {
+          configFile: 'src/styles/settings.scss',
+        },
+      }),
+      VitePWA({
+        manifest: {
+          icons: [
+            {
+              src: "favicon.ico",
+              sizes: "256x256",
+              type: "image/ico",
+              purpose: "any maskable"
+            }
+          ]
+        }
+      })
     ],
-  },
-  server: {
-    proxy: {
-        '/api': {
-          target: 'http://localhost:5000',
-          changeOrigin: false,
-          secure: false,
-          rewrite: (path) => path.replace(/^\/api/, ''),
-        },
-        '/ws': {
-          target: 'http://localhost:5000',
-          changeOrigin: false,
-          ws: true,
-        },
+    define: { 'process.env': {} },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      },
+      extensions: [
+        '.js',
+        '.json',
+        '.jsx',
+        '.mjs',
+        '.ts',
+        '.tsx',
+        '.vue',
+      ],
     },
-    port: 3000,
-  },
-})
+    server: {
+      proxy: {
+          '/api': {
+            target: `http://localhost:${backendPort}`,
+            changeOrigin: false,
+            secure: false,
+            rewrite: (path) => path.replace(/^\/api/, ''),
+          },
+          '/ws': {
+            target: `http://localhost:${backendPort}`,
+            changeOrigin: false,
+            ws: true,
+          },
+      },
+      port: 3000,
+    }
+  };
+})