UPDATE: This temporary fix is no longer necessary for HMR with Cloudflare Pages.

Screenshot from Discord message by Greg Brimble. Says "Finally, auto hot-reload has landed in the latest wrangler@alpha for wrangler pages dev! Please upgrade, give it a go, and let us know how it plays ". Code snippet shows: "npm install --save-dev wrangler@alpha"

Many months ago, I promised the Virtual Coffee ☕️ community a Lunch and Learn on the patch-package module. Unfortunately, I never got around to giving the presentation 😢.

Today, I ran into a situation that is a perfect scenario to demonstrate the use of patch-package.

I'm dabbling with the combination of Remix and Cloudflare Pages/Functions. The two combined make for an incredible developer experience that allows you to build a full stack application in one language (JavaScript or TypeScript) and share almost of your code between frontend and backend!

Unfortunately, the current alpha release of Wrangler2 doesn't detect changes to the code in the default Remix app directory. This means Hot Module Reloading(HMR) doesn't work at all. So, it's a pretty painful developer experience having to stop and restart the dev server over and over.

Fortunately, Greg Brimble has an upcoming fix for the issue. We just have to wait for his PR to make it into the next release.

But I can't wait! So, I'll kill two birds with one stone - solve my HMR problem and teach you about patch-package 💥!

Step 1: Edit the wrangler distribution

First, fix the problem in the wrangler distribution at node_modules/wrangler/wrangler-dist/cli.js.

Replace line 124103:

buildWatchPaths: [functionsDirectory],

with:

buildWatchPaths: [functionsDirectory, "./app"],

Step 2: Add the patch-package to package.json

In the scripts section, modify post-install to look like this:

"postinstall": "remix setup cloudflare-pages; patch-package",

Now, install patch-package as follows:

npm i patch-package

NOTE: There are additional steps if you are using yarn instead of npm!

Step 3: Create a patch file for the changes to wrangler

yarn patch-package wrangler

This command will download the REAL Wrangler module to a temporary folder. Then, it will perform a diff of the real Wrangler against the changes made in Step 1.

Here's a sample of the newly created file:

diff --git a/node_modules/wrangler/wrangler-dist/cli.js b/node_modules/wrangler/wrangler-dist/cli.js
index 803053a..9aba97e 100644
--- a/node_modules/wrangler/wrangler-dist/cli.js
+++ b/node_modules/wrangler/wrangler-dist/cli.js
@@ -124100,7 +124100,7 @@ var pages = (yargs) => {
       const scriptPath = (0, import_path6.join)((0, import_os3.tmpdir)(), "./functionsWorker.js");
       miniflareArgs = {
         scriptPath,
-        buildWatchPaths: [functionsDirectory],
+        buildWatchPaths: [functionsDirectory, "./app"],
         buildCommand: `npx @cloudflare/pages-functions-compiler build ${functionsDirectory} --outfile ${scriptPath}`
       };
     } else {

Step 4: Commit all changes to git

In order for your changes to make it to production or to other developers, be sure to commit the changes for package.json and the patches/wrangler+0.0.0-1fdcfe3.patch file.

Step 5: Celebrate 🎉

💥 That's all there is to it. Now, any patches you've created will be available to other developers or put into your production code!