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.