From 6fc2276e9515da22fe05f267dc9cfef22b2f2793 Mon Sep 17 00:00:00 2001
From: Greg Brimble <gbrimble@cloudflare.com>
Date: Sat, 8 Jan 2022 11:20:53 +0000
Subject: [PATCH] Add live reload to wrangler pages dev (#220)

---
 .changeset/unlucky-sloths-lay.md |  5 +++++
 packages/wrangler/src/pages.tsx  | 13 +++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 .changeset/unlucky-sloths-lay.md

diff --git a/.changeset/unlucky-sloths-lay.md b/.changeset/unlucky-sloths-lay.md
new file mode 100644
index 000000000000..b1720bbf5f10
--- /dev/null
+++ b/.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
diff --git a/packages/wrangler/src/pages.tsx b/packages/wrangler/src/pages.tsx
index 0fecb285a9fa..95b238e1c1b3 100644
--- a/packages/wrangler/src/pages.tsx
+++ b/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));