electron-typescript-react icon indicating copy to clipboard operation
electron-typescript-react copied to clipboard

Add fast refresh (hot reload)

Open diego3g opened this issue 4 years ago • 4 comments

I didn't manage to include fast refresh keeping state through updates inside React yet.

diego3g avatar Jun 20 '21 17:06 diego3g

@diego3g Did you try electron-reload this will hot reload window on folder content changed eg:

if (isDev) {
  require("electron-reload")(path.join(__dirname, "public"), {
    electron: require(`${__dirname}/node_modules/electron`),
  });
}

ghost avatar Jun 24 '21 07:06 ghost

Hey @Abdallah-Moh, we already have live reload. I want do add React Fast Refresh that keep react state between file changes.

diego3g avatar Jul 02 '21 02:07 diego3g

@diego3g you will need to disable the live reload and update the DOM instead

ghost avatar Jul 02 '21 12:07 ghost

Just got this working. Requires "@electron-forge/plugin-webpack": "6.0.0-beta.60", because of https://github.com/electron-userland/electron-forge/pull/2444. Then you can add something similar to this to package.json:

          "@electron-forge/plugin-webpack",
          {
            "devServer": {
              "liveReload": false,
              "hot": true
            },

And from there follow the normal installation instructions according to react-refresh-webpack-plugin.

Note that you have to manually list HotModuleReplacementPlugin in your plugins, or else it won't be detected.

CGamesPlay avatar Nov 01 '21 00:11 CGamesPlay