/

How to Set Up Hot Reload on Electron

How to Set Up Hot Reload on Electron

When developing an Electron app, it’s incredibly useful to enable hot reload functionality, which allows the application to update without requiring a restart.

To achieve this, you can leverage the npm module electron-reloader.

Let’s assume you have a sample Electron application with the following files:

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  })

 win.loadFile('index.html')
}

app.whenReady().then(createWindow)

index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />
 <title>Hello World!</title>
 </head>
 <body>
 <h1>Hello World!</h1>
 </body>
</html>

To set up hot reload, install electron-reloader as a development dependency:

1
npm install -D electron-reloader

Next, add the following line to your index.js file:

1
2
3
try {
  require('electron-reloader')(module)
} catch (_) {}

That’s it! Now, whenever you start the application using electron . or npm start (if your package.json has "start": "electron .",), any changes you make to the application files will automatically be reflected in the application window.

tags: [“hot reload”, “Electron”, “npm module”, “electron-reloader”]