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

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

<!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:

npm install -D electron-reloader

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

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.