add vite hmr to traefik reverse proxy

README.md

@@ -38,6 +38,7 @@ Add the following entry to your `/etc/hosts`
 ```
 127.0.0.1 solidtime.test
 127.0.0.1 playwright.solidtime.test
+127.0.0.1 vite.solidtime.test
 127.0.0.1 mail.solidtime.test
 ```
 
@@ -57,6 +58,7 @@ npx playwright codegen solidtime.test
 
 ## E2E Troubleshooting
 
+If E2E tests are not working at all, make sure you do not have the Vite server running and just run `npm run build` to update the version.
 If the E2E tests are not working consistently and fail with a timeout during the authentication, you might want to delete the `test-results/.auth` directory to force new test accounts to be created.
 
 ## Generate ZOD Client

docker-compose.yml

@@ -12,19 +12,25 @@ services:
             - "traefik.http.routers.solidtime.rule=Host(`${NGINX_HOST_NAME}`)"
             - "traefik.http.routers.solidtime.entrypoints=web"
             - "traefik.http.services.solidtime.loadbalancer.server.port=80"
+            - "traefik.http.routers.solidtime.service=solidtime"
             - "traefik.http.routers.solidtime-https.rule=Host(`${NGINX_HOST_NAME}`)"
             - "traefik.http.routers.solidtime-https.entrypoints=websecure"
             - "traefik.http.routers.solidtime-https.tls=true"
+            # vite
+            - "traefik.http.services.solidtime-vite.loadbalancer.server.port=5173"
+            # http
+            - "traefik.http.routers.solidtime-vite.rule=Host(`${VITE_HOST_NAME}`)"
+            - "traefik.http.routers.solidtime-vite.service=solidtime-vite"
+            - "traefik.http.routers.solidtime-vite.entrypoints=web"
         extra_hosts:
             - 'host.docker.internal:host-gateway'
-        ports:
-            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
         environment:
             WWWUSER: '${WWWUSER}'
             LARAVEL_SAIL: 1
             XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
             XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
             IGNITION_LOCAL_SITES_PATH: '${PWD}'
+            VITE_HOST_NAME: '${VITE_HOST_NAME}'
         volumes:
             - '.:/var/www/html'
         networks:
@@ -99,7 +105,8 @@ services:
         command: ['npx', 'playwright', 'test', '--ui-port=8080', '--ui-host=0.0.0.0']
         working_dir: /src
         extra_hosts:
-            - "solidtime.test:${REVERSE_PROXY_IP:-10.100.100.10}"
+            - "${NGINX_HOST_NAME}:${REVERSE_PROXY_IP:-10.100.100.10}"
+            - "${VITE_HOST_NAME}:${REVERSE_PROXY_IP:-10.100.100.10}"
         labels:
             - "traefik.enable=true"
             - "traefik.docker.network=${NETWORK_NAME}"

vite.config.js

@@ -24,4 +24,11 @@ export default defineConfig({
             lintCommand: 'eslint "./**/*.{ts,vue}"',
         }),
     ],
+    server: {
+        host: true,
+        hmr: {
+            host: process.env.VITE_HOST_NAME,
+            clientPort: 80,
+        },
+    },
 });