Package a React application with Electron in 3 minutes

Author owns image rights. Icons from app developers.

Not a member? Read this article for free.
For more information read the extended version.

React has established itself as one of the most popular libraries. However, as applications grow, the need arises to take these applications further. With Electron, you can package your application and distribute it as a desktop application without rewriting the code.
I will guide you step by step to package your application using Electron. Let’s get to it!

What is React and what is Electron?

React is a JavaScript library widely used for building web applications. Electron allows us to package web applications as desktop applications without rewriting code.

Before we begin…

It is important to have NodeJS installed. To install it we can do it through its web page. In addition, this project uses Vite.

How do we package our application?

First we will have to go inside our project through a terminal to install Electron by typing the following command:

npm i electron electron-is-dev
npm install electron electron-builder --save-dev