Configuration to fix HMR (#527)

* ➕ Add configuration to fix HMR * 🔨 Make polling optional by env var * 🔨 Fix merge config * 🔨 Only use necessary options
thunderbird · Jul 15, 2024 · 8095b26 · 8095b26
1 parent 5525595
commit 8095b26
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 38 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -3,6 +3,10 @@
 # -- Frontend --
 VITE_BASE_URL=localhost:8080
 VITE_SHORT_BASE_URL=http://localhost:8080/user
+# Set true to activate polling for dev server 
+VITE_SERVER_WATCH_POLLING=
+VITE_SERVER_WATCH_INTERVAL=
+VITE_SERVER_WATCH_BINARY_INTERVAL=
 
 # -- Backend API --
 VITE_API_URL=localhost

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -1,34 +1,51 @@
 import { sentryVitePlugin } from '@sentry/vite-plugin';
 import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv, WatchOptions } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue({
-      script: {
-        defineModel: true,
+export default defineConfig(({ mode }) => {
+  // Load env file based on `mode` in the current working directory.
+  const env = loadEnv(mode, process.cwd());
+
+  // Build watch options
+  const watch = {
+    usePolling: env.VITE_SERVER_WATCH_POLLING === 'true'
+  } as WatchOptions;
+  if (env.VITE_SERVER_WATCH_INTERVAL) {
+    watch.interval = Number(env.VITE_SERVER_WATCH_INTERVAL);
+  }
+  if (env.VITE_SERVER_WATCH_BINARY_INTERVAL) {
+    watch.binaryInterval = Number(env.VITE_SERVER_WATCH_BINARY_INTERVAL);
+  }
+
+  return {
+    plugins: [
+      vue({
+        script: {
+          defineModel: true,
+        },
+      }),
+      sentryVitePlugin({
+        org: 'thunderbird',
+        project: 'appointment-frontend',
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
       },
-    }),
-    sentryVitePlugin({
-      org: 'thunderbird',
-      project: 'appointment-frontend',
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      extensions: ['.ts', '.js', '.vue'],
     },
-    extensions: ['.ts', '.js', '.vue'],
-  },
 
-  server: {
-    host: '0.0.0.0',
-  },
+    server: {
+      host: '0.0.0.0',
+      watch: watch,
+    },
 
-  build: {
-    sourcemap: true,
-  },
+    build: {
+      sourcemap: true,
+    },
+  }
 });
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
@@ -2,19 +2,22 @@ import { fileURLToPath } from 'node:url';
 import { defineConfig, mergeConfig } from 'vitest/config';
 import viteConfig from './vite.config';
 
-export default mergeConfig(viteConfig, defineConfig({
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+export default defineConfig(configEnv => mergeConfig(
+  viteConfig(configEnv),
+  defineConfig({
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+      extensions: ['ts', '.js', '.vue'],
     },
-    extensions: ['ts', '.js', '.vue'],
-  },
-  test: {
-    setupFiles: [
-      '/test/setup/fix-fetch.js',
-    ],
-    globals: true,
-    environment: 'jsdom',
-    root: fileURLToPath(new URL('./', import.meta.url)),
-  },
-}));
+    test: {
+      setupFiles: [
+        '/test/setup/fix-fetch.js',
+      ],
+      globals: true,
+      environment: 'jsdom',
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  })
+));