Introduction to Electron Builder

Electron Builder is a powerful and easy-to-use solution for packaging and distributing your Electron applications. It automates the entire build process and supports many platforms like macOS, Windows, and Linux.

Getting Started

First, let’s install Electron Builder:

    
      npm install electron-builder --save-dev
    
  

Basic Configuration

To get started with Electron Builder, you need to add a few configuration options in your package.json:

    
      {
        "name": "your-app-name",
        "version": "1.0.0",
        "main": "main.js",
        "scripts": {
          "build": "electron-builder"
        },
        "build": {
          "appId": "com.example.yourapp",
          "mac": {},
          "win": {},
          "linux": {}
        },
        "devDependencies": {
          "electron": "^14.0.0",
          "electron-builder": "^22.11.7"
        }
      }
    
  

API Examples

Build Command

The build command packages the app for the target platform:

    
      npm run build
    
  

Publish

Automate publishing artifacts to various platforms with the following configuration:

    
      {
        "build": {
          "publish": [
            {
              "provider": "github",
              "owner": "your-github-username",
              "repo": "your-repo-name"
            }
          ]
        }
      }
    
  

Custom Asar Archives

Create custom asar archives for your app:

    
      {
        "build": {
          "asar": true,
          "files": [
            "src/**/*",
            "!node_modules/*"
          ]
        }
      }
    
  

Extra Resources

Include extra files that should be part of the final package:

    
      {
        "build": {
          "extraResources": [
            "path/to/file_or_directory"
          ]
        }
      }
    
  

Example App

Below is an example of a simple Electron app with a few basic functionalities:

main.js

    
      const { app, BrowserWindow } = require('electron');
      
      function createWindow() {
        const win = new BrowserWindow({
          width: 800,
          height: 600,
          webPreferences: {
            nodeIntegration: true
          }
        });
      
        win.loadFile('index.html');
      }
      
      app.whenReady().then(createWindow);
      
      app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
          app.quit();
        }
      });
      
      app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow();
        }
      });
    
  

index.html

    
      
      
        
          
        
        
          
Hello World!
          
This is my first Electron app with Electron Builder.
        
      
    
  

Conclusion

Electron Builder is an excellent tool for managing the complexities of packaging and distributing your Electron applications. By leveraging its powerful APIs and configuration options, you can streamline your development workflow and focus on building great apps.

Hash: c687d598bace08d2c45b840131c1a8662561dd796350d4deec064f738eae9233