Vite fixes for multiple local sites

Author: connorabbas

.env.example

@@ -62,3 +62,10 @@ AWS_BUCKET=
 AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
+
+WWWGROUP=1000
+WWWUSER=1000
+
+APP_PORT=
+VITE_PORT=5173
+VITE_HOST_DOMAIN=primevue-breeze-inertia.localhost

docker-compose.yml

@@ -12,7 +12,7 @@ services:
             - 'host.docker.internal:host-gateway'
         ports:
             - '${APP_PORT:-8000}:80'
-            - '${VITE_PORT:-5173}:5173'
+            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
         environment:
             WWWUSER: '${WWWUSER}'
             LARAVEL_SAIL: 1

vite.config.js

@@ -1,26 +1,39 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 
-export default defineConfig({
-    plugins: [
-        laravel({
-            input: 'resources/js/app.js',
-            refresh: true,
-        }),
-        vue({
-            template: {
-                transformAssetUrls: {
-                    base: null,
-                    includeAbsolute: false,
+// https://vitejs.dev/config/
+export default ({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+    const devPort = parseInt(env.VITE_PORT) || 5173;
+    const hostDomain = env.VITE_HOST_DOMAIN || 'localhost';
+
+    return defineConfig({
+        plugins: [
+            laravel({
+                input: 'resources/js/app.js',
+                refresh: true,
+            }),
+            vue({
+                template: {
+                    transformAssetUrls: {
+                        base: null,
+                        includeAbsolute: false,
+                    },
                 },
+            }),
+        ],
+        server: {
+            port: devPort,
+            hmr: {
+                host: hostDomain,
+            },
+            watch: {
+                usePolling: true,
             },
-        }),
-    ],
-    server: {
-        host: 'localhost',
-        watch: {
-            usePolling: true,
         },
-    },
-});
+        preview: {
+            port: devPort,
+        },
+    });
+};