#267 frontend: set correct hmr host depending on host environment

frontend/docker-compose.yml

@@ -15,3 +15,5 @@ services:
       - .env.${VITE_RUN_CONFIG}
     ports:
       - "5173:5173"
+    extra_hosts: # is used to ensure host.docker.internal resolves correctly on Linux systems
+      - "host.docker.internal:host-gateway"

frontend/vite.config.ts

@@ -3,10 +3,8 @@ import {fileURLToPath, URL} from 'node:url'
 import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-function  isNotDocker() {
-  const b = !process.env.IS_DOCKER
-  console.log('isDocker:', b)
-  return b
+function getHmrHost() {
+  return process.env.IS_DOCKER ? 'host.docker.internal' : 'localhost'
 }
 
 // https://vitejs.dev/config/
@@ -25,7 +23,11 @@ export default defineConfig({
     'process.env': process.env
   },
   server: {
-    // we do not need hmr in docker images + default address would not work (host: 'host.docker.internal' would be needed)
-    hmr: isNotDocker(),
+    // in order for hot module replacement to not throw an error inside the docker container
+    // (localhost would resolve to the container and not the host)
+    hmr: {
+      host: getHmrHost(),
+      port: 80
+    }
   }
 })