diff --git a/packages/builder/vite.config.js b/packages/builder/vite.config.js
index 56ffbf20f5..9859e1dbb9 100644
--- a/packages/builder/vite.config.js
+++ b/packages/builder/vite.config.js
@@ -1,15 +1,22 @@
 import { svelte } from "@sveltejs/vite-plugin-svelte"
 import replace from "@rollup/plugin-replace"
+import { defineConfig, loadEnv } from "vite"
 
 import path from "path"
 
-export default ({ mode }) => {
+export default defineConfig(({ mode }) => {
   const isProduction = mode === "production"
+  const env = loadEnv(mode, process.cwd())
   return {
     server: {
       fs: {
         strict: false,
       },
+      hmr: {
+        protocol: "wss",
+        clientPort: env.VITE_HMR_CLIENT_PORT || 3000,
+        path: env.VITE_HMR_PATH || "/"
+      }
     },
     base: "/builder/",
     build: {
@@ -79,4 +86,4 @@ export default ({ mode }) => {
       ],
     },
   }
-}
+})