From f49025040c9b1b3de0c14e672d005e78b0714ff2 Mon Sep 17 00:00:00 2001
From: Wolkenfarmer <jomaxw2@aol.com>
Date: Thu, 11 Jul 2024 11:22:20 +0200
Subject: [PATCH] #267 frontend: set correct hmr host depending on host
 environment

---
 frontend/docker-compose.yml |  2 ++
 frontend/vite.config.ts     | 14 ++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/docker-compose.yml b/frontend/docker-compose.yml
index 76278a55..b68c4fd5 100644
--- a/frontend/docker-compose.yml
+++ b/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"
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 59938818..4e27495c 100644
--- a/frontend/vite.config.ts
+++ b/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
+    }
   }
 })