Get Installers for Electron Application using Electron Builder(Windows & Linux)

Electron Installer refers to a set of tools and utilities designed to package and distribute Electron applications.

When you develop an Electron application, it typically consists of multiple files and dependencies. Electron Installer tools help simplify the process of packaging these files into a distributable format and creating an installer for different operating systems (such as Windows, macOS, and Linux) so that users can easily install and run your application.

To get the installers there are many approaches out of which the Electron Forge and Electron Builder are common. Let's look into these in detail.

• Electron Forge: Electron Forge is a complete toolkit for creating, publishing, and maintaining Electron applications. It includes built-in support for generating installers using various packaging formats.
• Electron Builder: Electron Builder is a popular tool specifically designed for building Electron applications. It provides a command-line interface and configuration options to package your application for different platforms and generate installers.

We'll be using Electron Builder since it provides CLI and built-in support for Code Signing/Auto update.

Make sure you have Node.js and npm (Node Package Manager) installed on your system. Electron Builder requires Node.js version 10 or later. You can check your Node.js version by running the following command in your terminal or command prompt:

                                
                                    
  node -v
                                
                            

If Node.js is not installed, you can download it from the official Node.js website (https://nodejs.org) and follow the installation instructions.

Once you have Node.js installed, open your terminal or command prompt and run the following npm command to install Electron Builder:

                                
                                    
  npm install electron --save-dev
                                
                            

This command installs Electron Builder as a global package, allowing you to use it from any directory in your system.

                                
                                    
  npm i electron-builder
                                
                            

After the installation is complete, you can verify if Electron Builder is installed correctly by running the following command:

                                
                                    
  electron-builder --version
                                
                            

We need to add certain scripts to package.json file to get our installers. Copy the below scripts into package.json

                                
                                    
  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "dev": "concurrently -k "cross-env BROWSER=none npm start" "npm:electron"",
  "electron": "wait-on tcp:3000 && electron .",
  "build-installer": "electron-builder",
  "build-installer:linux": "electron-builder --linux deb"
  },
"build": {
  "appId": "electron-react-demo",
  "win": {
    "target": [
      "nsis"
    ]
  },
  "nsis": {
    "license": "license.txt", //include a license.txt in the root directory
    "oneClick": false
    "allowToChangeInstallationDirectory": true,
    "perMachine": true,
    "createDesktopShortcut": true //creates desktop shortcut icon
  }
  "deb": {
    "depends": [
      "" //add any dependencies that you need to add, the commands will be the ones used with apt-get
    ],
    "icon": "src/assets/images/vm.ico"
  }
  }
                                
                            

In this example we have used a react with electron kick start project, you can choose any platform if that you'd like. Since we have gone with react, we need to build the application to start the execution process.

                                
                                    
  npm run build
                                
                            

Once the build is done, we can proceed with the installer step. To ensure that the build is done in react, ensure that the build folder is created in the root directory.

To get the installer for Windows use the following command

                                
                                    
  npm run build-installer
                                
                            

Then we must register our handlers in our 'main.js' to receive the data sent from front end.

Our installers for Windows is now ready, you can check both the binaries and the installer under 'dist' folder

Now lets get into the procedure to get the build for Linux.

The steps for getting the build in same in both Windows and Linux. Once the build is done hit the below command, this will get the installer for Linux. We have chosen the installer to be of the type 'deb'

                                
                                    
  npm run build-installer:Linux
                                
                            

Similar to Windows once the build is done, we can check the binaries and the installers in the dist folder in root file. Below is the image for Linux installer

Electron Installer tools are invaluable for packaging and distributing Electron applications to end-users. These tools streamline the process of bundling an Electron application with its dependencies and creating installers or packages for different operating systems. Electron Installer tools, such as Electron Forge and Electron Builder, provide features like automatic updates, code signing, and platform-specific packaging formats. They simplify the deployment process and enable developers to reach a wider audience by making their applications easily installable on various platforms, including Windows, macOS, and Linux. With Electron Installer tools, developers can package their Electron applications into self-contained installers or packages that users can effortlessly install on their devices. These installers typically include all the necessary files, dependencies, and shortcuts required to run the application smoothly. By using Electron Installer tools, developers can enhance the user experience by providing a seamless installation process and enabling easy updates for their applications. This ensures that users can enjoy the benefits of Electron applications without any hassle or complex setup procedures.