Create-electron-app is a boilerplate project for Electron applications. One of the challenging tasks in an electron project is setting up the initial configuration of the application with an UI framework support. Initial configuration includes Electron integration, folder structure, UI framework for the renderer processes, style framework, code bundling, packaging, etc. The Create-electron-app boilerplate is a combination of Electron, React, and Redux, with the build and package scripts, signifying the ability to initiate a project without spending a lot of time in the initial configurations.

The application code is principally divided into two-main folders and renderer. The main folder contains all the key process codes and related modules, while the UI related code and modules come under the renderer process folder. Apart from that, there are a few more folders in the app directory such as assets, modules, actions, reducers, etc. The modules folder carries all the shared modules that are used in both main and renderer processes.

Create-electron-app supports multi-window architecture, and the folder structure is designed in such a way that all the window codes (renderer/windows) are bundled into separate app files (HTML, CSS, and JS). Additionally, all third-party codes in the renderer process are packaged into “vendor.bundle.js” and injected in all the React apps. The primary reason is to reduce the output package size as much as possible, and here, every window is a separate React single page application.

So some coding standards must be followed in the renderer processes. All the screens/windows should be a React app inside the “app > renderer > windows” folder. Each window should have a unique name, and that name should be the name of the folder.

Here “home” and “settings” are the two windows, and these are two different React applications. The bundle script compiles these applications into the “dist” folder in the following structure:

Now”home.html” can be loaded inside the home window and “settings.html” inside the settings window.

React is the default UI framework. In Electron, each window has a different process, and hence, the application data also should be shared across the processes. Here, we have used Redux for application data management. Since Redux follows the “single source of truth” principle, we cannot have multiple copies of the store in an application. Wondering how to share the stored data with all the processes in an Electron application? For this, we need to configure the data in the main process as a single source of truth and create proxy stores in each of the renderer processes.

Here, the proxy stores listen to the changes in the main store and update themselves immediately. Also, the changes in the proxy store are updated in the main store immediately so that other proxy stores also get updated in tune with the new changes.

You can write the preload script inside the “app/preload” folder. The preload script is compiled into the dist folder(dist/preloads), and each preload script should be inside a separate folder. The bundle script completes the code, and the output bundle is created based on the folder name. For example, your preload folder name is “mainwindowPreload”, the bundle script generates a “mainwindowPreload.bundle.js” in the dist/preloads folder.

Start the development server using the following command:

npm start

The development server listens to the port 3000. Hot reloading is enabled by default, and it helps to test the code changes without restarting the development server every time.

The unit testing framework is integrated into the boilerplate code. The testing framework was built with the help of Spectron, Mocha, and Chai. The test cases can run using the following command.

npm run test

Package the application using the following command:

npm run package

If you want to do cross-platform packaging(Windows and Linux build from Mac machine or Windows build from Linux machine), you have to make few platform-specific changes in the build script as well as in the build configuration.

The Create-electron-app is suitable for all kinds of Electron applications, and all the modules that are available as part of this boilerplate are configurable. The default UI framework here is React, though any UI framework or application data management framework instead of React and Redux is applicable.