tajo · tajo · May 31, 2024 · May 17, 2024
diff --git a/.changeset/witty-lizards-jog.md b/.changeset/witty-lizards-jog.md
@@ -0,0 +1,6 @@
+---
+"website": minor
+"@ladle/react": minor
+---
+
+Add option to set HMR host and port via the ladle config and update the docs with these options.
diff --git a/packages/ladle/lib/cli/vite-dev.js b/packages/ladle/lib/cli/vite-dev.js
@@ -29,8 +29,8 @@ const bundler = async (config, configFolder) => {
   });
   const hmr = {
     // needed for hmr to work over network aka WSL2
-    host: "localhost",
-    port: hmrPort,
+    host: config.hmrHost ?? "localhost",
+    port: config.hmrPort ?? hmrPort,
   };
   debug(`Port set to: ${port}`);
   try {

diff --git a/packages/ladle/lib/shared/default-config.js b/packages/ladle/lib/shared/default-config.js
@@ -11,6 +11,8 @@ export default {
   noWatch: false,
   port: 61000,
   previewPort: 8080,
+  hmrHost: undefined,
+  hmrPort: undefined,
   outDir: "build",
   base: undefined,
   hotkeys: {

diff --git a/packages/ladle/lib/shared/types.ts b/packages/ladle/lib/shared/types.ts
@@ -184,6 +184,8 @@ export type Config = {
   port: number;
   previewHost?: string;
   previewPort: number;
+  hmrHost?: string;
+  hmrPort?: number;
   outDir: string;
   base?: string;
   mode?: string;

diff --git a/packages/website/docs/config.md b/packages/website/docs/config.md
@@ -88,6 +88,28 @@ export default {
 };
 ```
 
+### hmrHost
+
+Specify the host for HMR.
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  hmrHost: 0.0.0.0,
+};
+```
+
+### hmrPort
+
+Specify the port for HMR.
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  hmrPort: 24678,
+};
+```
+
 ### outDir
 
 Specify the output directory (relative to the project root).