Hot Reload in ElectronJS

In this lesson we want to talk about Hot Reload in ElectronJS, ElectronJS is framework that allows developers to build cross platform desktop applications using web technologies such as JavaScript, HTML and CSS. it is built on top of Chromium, the open source version of Google Chrome and Node.js which provides runtime environment for JavaScript.

Hot Reloading in ElectronJS allows developers to see the changes made to their code in realtime without having to manually stop and restart the application each time. this can be achieved by using a package called electron-reload.

This is an example of how to use electron-reload in your ElectronJS application:

Install the package by running npm install electron-reload in the terminal.
In main.js file, require the package at the top of the file:

const { app, BrowserWindow } = require('electron')
const electronReload = require('electron-reload');

1 2	const { app, BrowserWindow } = require('electron') const electronReload = require('electron-reload');

Add following code before creating the window:

electronReload(__dirname, {
    electron: require(`${__dirname}/node_modules/electron`)
});

electronReload(__dirname, {

electron: require(`${__dirname}/node_modules/electron`)

});

This will enable hot reloading for all files in the directory.

You can also specify only certain files or directories to be watched for changes by passing in an options object to the electronReload function, like so:

electronReload(__dirname, {
    electron: require(`${__dirname}/node_modules/electron`),
    hardResetMethod: 'exit',
    ignored: /node_modules|[\/\\]\./
});

electronReload(__dirname, {

electron: require(`${__dirname}/node_modules/electron`),

hardResetMethod: 'exit',

ignored: /node_modules|[\/\\]\./

});

Now, when you make changes to your code the application will automatically reload and display the updated changes.

More on ElectronJS

You can use the code like this

const {app} = require('electron')
require('electron-reload')(__dirname, {
  electron: require(`${__dirname}/node_modules/electron`)
});
app.on('ready', () => {
  // create window here
});

const {app} = require('electron')

require('electron-reload')(__dirname, {

electron: require(`${__dirname}/node_modules/electron`)

});

app.on('ready', () => {

// create window here

});

More on ElectronJS

Leave a Comment Cancel reply