[Bug]: Hot Reload not working with Cloudflare Pages

[wallyfaye]

trafficstars

What version of Remix are you using?

^1.1.1

What version of Node are you using? Minimum supported version is 14.

v17.0.1

Steps to Reproduce

npx create-remix@latest
# choose Cloudflare Pages
cd [whatever you named the project]
npm run dev

• Edit the file app/routes/index.jsx
• Observe the File changed log in your console as well as the related logs
• Observe that http://127.0.0.1:8788/ has not changed
• Refresh the page
• Observe that http://127.0.0.1:8788/ has not changed
• Ctrl+C to stop the npm script
• run npm run dev again
• Observe that the edit to app/routes/index.jsx is now present
• edit the file again
• observe that the change are still not present

Expected Behavior

We'd expect the changes to be immediately apparent

Actual Behavior

The changes are not visible until the process has be stopped and restarted using the npm run dev command

[jacob-ebey]

This is a known issue and is in Cloudflare's hands to get Wrangler@v2 to support additional watch directories: https://github.com/cloudflare/wrangler2/issues/49

[drewdecarme]

If you haven't seen it, checkout this comment where you can now install wangler@pages and hot reloading should work. It doesn't seem like other attached issues have been updated... but for now, installing the pages package enables hot reloading for me.

I believe the create-remix CLI has the wrangler package set at alpha... so just update it to pages and things should start working.

[schpet]

@drewdecarme appreciate the tip! that worked for me as well

[dan-cooke]

Hot reload is not working on Architect Sandbox either. #1601 I mentioned this here.

[and3rsonsousa]

Not working on o remix 1.1.3 and 1.2.2 even with wrangler@pages.

[tulup-conner]

For me, the browser needs to refresh twice in order to see updates.

So each hot reload shows the second-most-recent update, not the one I just made.

This is pretty annoying for my workflow. :(

"@remix-run/cloudflare": "^1.5.1",
"@remix-run/cloudflare-pages": "1.5.1",
"@remix-run/dev": "^1.5.1",
"@remix-run/react": "1.5.1",
"wrangler": "^beta"

I started another project with Remix + Cloudflare Pages about 8 weeks ago and I remember noticing that one of the version upgrades I made caused this to start happening. I don't really know enough about what's going on to say if this might be an issue with wrangler also/instead.

Edit:

I have an app with the following versions where the live reload works:

"@remix-run/cloudflare-pages": "^1.1.3",
"@remix-run/dev": "^1.1.3",
"@remix-run/react": "^1.1.3",
"@remix-run/serve": "^1.1.3",
"wrangler": "^0.0.16"

[lili21]

not working with cloudflare workers too.

[acoreyj]

Anyone making any progress on this or can point me in the right direction to make a fix? having the issue myself.

Edit:

Not sure if they have been updated in the last couple days but using the current versions from the create -> cloudflare pages script do work

"dependencies": { "@remix-run/cloudflare": "^1.9.0", "@remix-run/cloudflare-pages": "^1.9.0", "@remix-run/react": "^1.9.0", "cross-env": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@cloudflare/workers-types": "^3.18.0", "@remix-run/dev": "^1.9.0", "@remix-run/eslint-config": "^1.9.0", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.8", "eslint": "^8.27.0", "npm-run-all": "^4.1.5", "typescript": "^4.8.4", "wrangler": "^2.2.1" },

[pcattori]

We've implemented a new platform-agnostic dev server in #5133 which will be available under the unstable_dev flag in the next minor release.

[kishanhitk]

@pcattori Can you help me make it work with cloudflare-pages? Here is the discussion.

[acusti]

i’m trying to make the new dev server + HMR work with cloudflare-workers (using miniflare). i would love to help debug by testing any suggestions and combinations / permutations of configs to see if i can get it to work. my current issue is that i cannot get the websocket server to run, or at least not on any port that i can identify. i documented some of my attempts in this discussion.

[pcattori]

Obsoleted by #6133 .

You should now be able to use the -c/--command to run miniflare or any other local app server w/ the Remix dev server. Be sure to follow the instructions in the 1.16 release notes to set up the dev server correctly.

[jacob-ebey]

You can give the unstable dev server a run on cf pages and cf workers with the following commands:

Pages

npx create-remix@latest --template https://github.com/remix-run/remix/tree/templates_v2_dev/templates/cloudflare-pages

Workers

npx create-remix@latest --template https://github.com/remix-run/remix/tree/templates_v2_dev/templates/cloudflare-workers