Add live reload to wrangler pages dev

Author: GregBrimble

.changeset/unlucky-sloths-lay.md

@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+Add `--live-reload` option to `wrangler pages dev` which automatically reloads HTML pages when a change is detected

packages/wrangler/src/pages.tsx

@@ -741,6 +741,11 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               description: "Durable Object to bind (NAME=CLASS)",
               alias: "o",
             },
+            "live-reload": {
+              type: "boolean",
+              default: false,
+              description: "Auto reload HTML pages when change is detected",
+            },
             // TODO: Miniflare user options
           });
       },
@@ -753,6 +758,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         binding: bindings = [],
         kv: kvs = [],
         do: durableObjects = [],
+        "live-reload": liveReload,
         "--": remaining = [],
       }) => {
         if (!local) {
@@ -906,6 +912,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           kvPersist: true,
           durableObjectsPersist: true,
           cachePersist: true,
+          liveReload,
 
           ...miniflareArgs,
         });
@@ -924,6 +931,12 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             } catch {}
           }
 
+          if (directory !== undefined && liveReload) {
+            watch([directory], { persistent: true }).on("all", async () => {
+              await miniflare.reload();
+            });
+          }
+
           EXIT_CALLBACKS.push(() => {
             server.close();
             miniflare.dispose().catch((err) => miniflare.log.error(err));