Why Electron?

In the early '90s, Tim Berners lee founded HTML and released it for initial public release in the year 1993. Initially, it was just developed to share information between major institutes around the world.

Followed by the evolution of the World Wide Web, then CSS grooms the skeleton of the HTML program and Javascript provides life to the HTML program to react to the initial interaction of human thoughts.

 

Initially, Javascript is developed as a program that runs on only the client’s browser application. After a couple of decades until the initial public release of node.js in 2010, Javascript ruled in the back-end servers too.

The evolution of javascript makes human developer effort simple and developers do not need to know the multiple programming languages specific to each operating system. This evolution fine-tunes the cutting-edge of modern application development.

 

Here comes the electron, a modern node package manager tool that converts web applications developed in HTML, CSS, and Javascript to fine native applications for different operating systems such as Windows, Mac, and Linux.

Yes, with the help of web programing language, we can develop a Web application, Native Mobile application, and now native desktop application specific to various popular operating systems around the globe.

Electron simplifies and provides access to all the native API’s of the operating system where we can control the system taskbar, file storage, external device, default folder alert customization, and much more.

 

How does electron.js Works?

Electron performs the stage show based on Chromium the open-source project. Which converts the web app to a desktop app. Electron works on a multi-process model which makes web language utilize the native operating system api with the help of two processes.

● Main Process

● Render Process

Main Process

The Main process acts as an entry point for the application. which runs with the help of node.js api and helps developers to utilize and unleash the power of all native desktop features.

Render Process

The Render process is nothing but a web programming language compilation area. which execute the native web api with the help of HTML, CSS, and Javascript programming language.

 

How do the main process and render process communicate?

You know that the render process needs communication with the main process. to activate and utilize the native desktop api. Which is possible through the electron communication system called Inter-Process Communication. Shortly called IPC.

IPC works like broadcasting services, which execute and carry the payloads in the unique broadcasting channels and pass the action and data between the Main process and the render process, which makes the app work like an event-driven model.

In this blog, I am going to discuss electron.js and react integration. Not all API's provided by the electron. to know more about the native API's of the electron. Please learn from the official documentation of electron.js from google.

 

How to integrate Electron in React app?

In this blog, we are going to see, how to create an Electron app with react, a popular frontend web library.

Step 1:

Create react app with your preferred project name.

 

Step 2:

Install electron and electron builder, save as dev dependency is mandatory for build configuration.

 

Step 3:

Create main.js(file name is up to you) for electron configuration under the public folder.

This is the file that carries the Electrons' main process code execution.

 

Step 4:

package.json file should have the below configuration. Need to define the Electrons' main process file as the entry point.

 

Then update the script section in the package.json file with these three properties.

Here I have configured it only for Windows OS. To build the mac version of the app "--mac" needs to be inserted in the package and publish property.  

 

Note: To build the mac local file mac os workstation is necessary. Some third-party builder providers are also available online to build installation files for both windows and Mac platforms. 

 

Finally, update the build configuration properties in the package.json. These configurations will have the app installer properties.

Mark the private property to true if the app is hosted in the private git repository, otherwise ignore it.

Create the access token from the GitHub portal and apply it in the token property for the GitHub version release and deployment.

Please refer to the "electron builder" documentation to update additional configurations in build settings.

That's it. The Main configuration for react and electron integration is completed.

To run an app locally for the development environment, follow these commands in two terminals:

First, start the react local development server

 

On the success of the start action in the new terminal, follow this command

 

Yes, now React project will run on the electron stage.

Play with your react ideas in the electron stage. Try to utilize the electron APIs to use the native windows/mac features.

Here is the simple welcome screen. I made on React on electron's render stage

 

To build the local package of the react app developed with electron. Follow these two processes.

This command will build the react build developed with the Electron stage.

`

Then this command will execute the creation of an installation file from the build file.

 

On successful execution, the installation file with the .exe file extension will be found under the root/dist folder. The sample folder structure of the installation file with the .exe file extension for windows app installation is displayed below.

 

For versioning of the electron app updated with different features/fixes, the version id is to be updated in the package.json before execution and deploy online for each release. To release the build version on the github platform, follow the command below.

Execute the "npm run build" command. On Success build, deploy to GitHub with the following command.

On Successful execution of the above command, the installation file of the developed app will be published on the GitHub repository under releases in GitHub.

If the app is updated in the future release, it will be useful to update the app installed by the users, if the "electron-updater" package is utilized on the client end. We can trigger the automatic update on the user end based on their settings and preferences.

 

You can find the source code for this "Electron with React app" demo on my GitHub page.

 

To Wrap Up

In this blog, we have seen the steps in the integration of electron with react app from development to build and publishing in theGitHub repository.

Electron JS has plenty of Native OS features. Feel free to explore the Electron JS official documentation to know more about the native API of windows/mac.

Finally, unleash the power of javascript and learn with its evolution.

 

If you need help integrating Electron with React or developing React applications, you've come to the right place. Talk to our coding experts and hire a ReactJS developer today.

 

 

Recommended Articles:

1) React - Props & State

2) Redux in React

3) React Basic Hooks

4) React Additional Hooks

 

 * Happy Coding  *