How to get live reload working locally with a Cloudflare Pages project

[swelham]

I can't seem to work out how to get live reload in development when using Cloudflare Pages.

It seems wrangler pages dev only works with a static build using remix vite:build and does not support the remix vite:dev command in anyway. Based on this I assumed rerunning the build command would allow the wrangler server to pick up the new changes however, this also doesn't work without restarting the wrangler command.

Is there any guidance on this?

[admirsaheta]

Let me break this in a few simple steps, first validate your packages:
e.g

"dependencies": {
  "@remix-run/cloudflare": "^1.x.x",
  "@remix-run/cloudflare-pages": "^1.x.x",
  "@remix-run/react": "^1.x.x"
},
"devDependencies": {
  "@remix-run/dev": "^1.x.x",
  "cross-env": "^7.0.3" // Optional, for setting environment variables
}

Now you need to go into remix.config.js and turn on the future.unstable_dev flag

module.exports = {
  // ... other Remix configuration
  future: {
    unstable_dev: {
      appServerPort: 8788, // Default port, can be adjusted if needed
    },
  },
};

Now create a new run script in package.json e.g

"scripts": {
  // ... other scripts
  "dev:remix": "remix dev",
  "dev:wrangler": "cross-env NODE_ENV=development npm run wrangler", // Set NODE_ENV for Wrangler
  "dev": "npm run remix:dev -- --live-reload ./public", // Starts Remix dev server and Wrangler with live reload
}

Now run the combined script using your package manager e.g npm run dev

HMR and Live Reload should work now on Cloudflare Pages with no issues since it will reload the public dir :)

[swelham]

Thanks for the detailed answer.

I should have included my Remix version in my questions, but I'm using Remix v2 with Vite, which has a different configuration. The missing link between the two appears to be the part where the appServerPort is configured to the wrangler server port.

Is this something that only works with Remix v1?

[admirsaheta]

Should not be a problem in v2 if you run wrangler with the --live-reload on .public folder
e.g

"scripts": {
  "dev:remix": "remix dev",
  "dev:wrangler": "cross-env NODE_ENV=development npm run wrangler", // Set NODE_ENV for Wrangler
  "dev": "npm run remix:dev -- --live-reload ./public", // Starts Remix dev server and Wrangler with live reload
}

[swelham]

I gave this a try, and after a few variations, it doesn't look as though the --live-reload arg is a valid option anymore (seeing ArgError: unknown or unexpected option: --live-reload).

Is there a working example anywhere that I could reference?

[borontion]

I can't seem to work out how to get live reload in development when using Cloudflare Pages.

It seems wrangler pages dev only works with a static build using remix vite:build and does not support the remix vite:dev command in anyway. Based on this I assumed rerunning the build command would allow the wrangler server to pick up the new changes however, this also doesn't work without restarting the wrangler command.

Is there any guidance on this?

i think if you have included the remixCloudflareDevProxy in your vite config, then you can just use remix vite:dev to simulate cloudflare environment (see this post) without using wrangler pages dev?

[omonk]

I wish this was included in the cloudflare remix template readme documentation.

In the remix on cloudflare workers template I started using after your comment last year there are two commands, start and dev, so dev is now the one to use... thanks for linking to this blog post