Enable HMR in Remix Cloudflare

UPDATE: Since v2.7.0, Remix migrated to Vite as the default compiler. Which means you no longer need to follow this guide to enable HMR as Vite has built-in support for HMR.

Hot Module Replacement (HMR) is a game-changing feature that speeds up the development process by allowing to add or remove modules while the application is running without the need for a full reload. It's been one of the most requested features by developers ever since Remix was launched publicly, and now, it's finally coming to v1.14.0.

What the heck is HMR anyway?

In simpler terms, HMR allows you to update your code in real-time and instantly see the changes in your browser, making it almost comparable to changing styles directly in the browser's dev tools. This is especially useful for retaining the application state, which is often lost during a full reload, and for saving valuable development time by only updating what's changed.

How to enable HMR in a Remix app?

1. Update remix to v1.14.0 (Currently it is live on v1.14.0.pre-1).

2. Enable the new dev server by adding this to your remix.config.js.

    module.exports = {
    .....
        future: {
            unstable_dev: {
                appServerPort: 8788, // default port in cloudflare
            },
        },
    };
   

3. Update these scripts in your package.json. Add --live-reload in the wrangler command, and change remix watch to remix dev.

        "scripts": {
            "build": "remix build",
            "dev:remix": "remix dev",
            "dev:wrangler": "cross-env NODE_ENV=development npm run wrangler",
            "dev": "remix build && concurrently \"npm:dev:*\"",
            "start": "cross-env NODE_ENV=production npm run dev:wrangler",
            "wrangler": "wrangler pages dev --live-reload ./public"
        },
   

4. Right now HMR is provided through React Refresh. So, you will have to react-refresh to your packages.

    npm i react-refresh
    yarn add react-refresh
    pnpm i react-refresh
   

5. Done, now run the app locally and try to make some changes, and save the file, you will see the changes are reflected almost instantly without any reload.

I created a GitHub repo with all this setup, check it out: https://github.com/kishanhitk/remix-clodflare-hmr

Overall, HMR is a powerful tool that can help developers save time and streamline their workflow. With the release of v1.14.0, Remix users can now take advantage of this feature and enjoy a smoother, more efficient development experience. So why wait? Give it a try and see how much time and frustration it can save you!