Skip to content

How to set up hot reload on Electron

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

When working on an Electron app, itโ€™s very handy to set up hot reload, so that the application updates without having to restart it.

You can do that using the npm module electron-reloader.

Suppose you have this sample Electron application:

index.js

const { app, BrowserWindow } = require('electron')

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  })

  // and load the index.html of the app.
  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>

Install electron-reloader as a development dependency:

npm install -D electron-reloader

Then add this line to the index.js file:

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

and thatโ€™s it! Now when you start the application using electron ., or npm start if you have

"start": "electron .",

in your package.json, any change you apply to the application files will be reflected in the application window.

  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)