Run development on the production stack with a Vite dev server

docker-compose.dev.yml extends docker-compose.yml, so development runs the
scheduler too, and takes its settings from .env, which selects the file
through COMPOSE_FILE. The dev image is a stage of the Dockerfile and shares
the production image's PHP extensions; the app listens on port 80 as in
production.

A vite service runs the dev server with hot reload. No ports are published:
OrbStack serves https://app.sealshare.orb.local and
https://vite.sealshare.orb.local, with the ports pinned by label. Without
OrbStack, docker-compose.ports.yml publishes APP_PORT and VITE_PORT on
127.0.0.1. vite.config.js takes the dev server's address from
VITE_DEV_SERVER_URL and listens on IPv4 and IPv6, as OrbStack's proxy
connects over either.

Each start installs Composer packages, clears caches, migrates and links
storage.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

vite.config.js

@@ -1,24 +1,41 @@
 import {
-    defineConfig
+    defineConfig,
+    loadEnv
 } from 'vite';
 import laravel from 'laravel-vite-plugin';
 
-export default defineConfig({
-    plugins: [
-        laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
-            refresh: true,
-        }),
-    ],
-    server: {
-        host: '0.0.0.0',
-        port: 5173,
-        cors: true,
-        hmr: {
-            host: 'localhost',
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '');
+
+    // Where the browser reaches the dev server when it is not http://localhost, e.g. OrbStack's
+    // https://vite.sealshare.orb.local. Laravel loads the assets from it, and HMR connects to it.
+    const devServerUrl = env.VITE_DEV_SERVER_URL ? new URL(env.VITE_DEV_SERVER_URL) : null;
+    const secure = devServerUrl?.protocol === 'https:';
+
+    return {
+        plugins: [
+            laravel({
+                input: ['resources/css/app.css', 'resources/js/app.js'],
+                refresh: true,
+            }),
+        ],
+        server: {
+            // IPv4 and IPv6: OrbStack's HTTPS proxy connects over either
+            host: true,
+            port: Number(env.VITE_PORT) || 5173,
+            cors: true,
+            origin: devServerUrl?.origin,
+            allowedHosts: devServerUrl ? [devServerUrl.hostname] : [],
+            hmr: devServerUrl ? {
+                protocol: secure ? 'wss' : 'ws',
+                host: devServerUrl.hostname,
+                clientPort: Number(devServerUrl.port) || (secure ? 443 : 80),
+            } : {
+                host: 'localhost',
+            },
+            watch: {
+                ignored: ['**/storage/framework/views/**'],
+            },
         },
-        watch: {
-            ignored: ['**/storage/framework/views/**'],
-        },
-    },
+    };
 });