Electronjs: React, Webpack and HMR

Creating a React-based Electron application with electron-webpack

In this lesson, we are going to build a React-based Electron application using the electron-webpack package. This package also provides HMR support out of the box, so we will dive deep into that as well.

(source: unsplash.com)

In the previous lessons, we worked on some simple Electron applications. In the introductory lesson, we created an Electron application to display a random image from the internet. In the File IO lesson, we worked on project structure and understood a few important development concepts.

However, during the development of these applications, wherever we made some changes in the source code, we had to rebuild the application by re-executing the $ npm run start command. This happens since $ npm run start command (which internally runs electron . command) does not watch file changes on the disk.

We have two types of processes in an Electron application. The JavaScript running in the main process handles the application state and lifecycle events while JavaScript running in the renderer process handles the user interface of the application through Chromium APIs.