Convert Figma logo to code with AI

electron-userland logoelectron-builder

A complete solution to package and build a ready for distribution Electron app with โ€œauto updateโ€ support out of the box

13,572
1,732
13,572
363

Top Related Projects

Make any web page a desktop application

81,614

Build smaller, faster, and more secure desktop applications with a web frontend.

Portable and lightweight cross-platform desktop application development framework

8,852

A library for building cross-platform native desktop applications with Node.js and CSS ๐Ÿš€. React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org

Quick Overview

Electron-builder is a complete solution for packaging and building ready-for-distribution Electron apps for macOS, Windows, and Linux. It provides a powerful and flexible configuration system, automates the process of creating installers and update packages, and supports code signing for enhanced security.

Pros

  • Supports multiple platforms (macOS, Windows, Linux) with a single configuration
  • Automates the creation of installers and update packages
  • Integrates well with continuous integration systems
  • Provides extensive customization options for build and distribution

Cons

  • Can have a steep learning curve for complex configurations
  • Large dependency size, which may increase build times
  • Some features may require additional setup or dependencies
  • Documentation can be overwhelming for beginners

Code Examples

  1. Basic configuration in package.json:
{
  "build": {
    "appId": "com.example.app",
    "mac": {
      "category": "public.app-category.productivity"
    },
    "win": {
      "target": ["nsis", "msi"]
    },
    "linux": {
      "target": ["deb", "rpm", "AppImage"]
    }
  }
}
  1. Configuring auto-update:
const { autoUpdater } = require("electron-updater");

autoUpdater.checkForUpdatesAndNotify();
  1. Custom installer configuration:
{
  "build": {
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true
    }
  }
}

Getting Started

  1. Install electron-builder:

    npm install electron-builder --save-dev
    
  2. Add build configuration to package.json:

    {
      "build": {
        "appId": "com.example.myapp",
        "productName": "My Electron App",
        "directories": {
          "output": "dist"
        }
      }
    }
    
  3. Add build scripts to package.json:

    {
      "scripts": {
        "build": "electron-builder build --mac --win --linux",
        "build:mac": "electron-builder build --mac",
        "build:win": "electron-builder build --win",
        "build:linux": "electron-builder build --linux"
      }
    }
    
  4. Run the build command:

    npm run build
    

This will create distribution-ready packages for the specified platforms in the dist directory.

Competitor Comparisons

Make any web page a desktop application

Pros of Nativefier

  • Simpler to use for basic web-to-desktop app conversion
  • Faster development process for quick prototypes
  • Requires less technical knowledge of Electron

Cons of Nativefier

  • Limited customization options compared to Electron Builder
  • Less control over the final application structure
  • May not be suitable for complex, feature-rich desktop applications

Code Comparison

Nativefier:

nativefier --name "My App" "https://example.com"

Electron Builder:

{
  "build": {
    "appId": "com.example.app",
    "mac": { "category": "public.app-category.productivity" },
    "win": { "target": "nsis" },
    "linux": { "target": "AppImage" }
  }
}

Nativefier focuses on simplicity, allowing users to create desktop apps from websites with a single command. Electron Builder, on the other hand, provides more extensive configuration options and is better suited for building complex Electron applications with custom features and packaging requirements.

While Nativefier is ideal for quick conversions and prototypes, Electron Builder offers greater flexibility and control over the build process, making it more appropriate for production-ready applications that require fine-tuning and advanced customization.

81,614

Build smaller, faster, and more secure desktop applications with a web frontend.

Pros of Tauri

  • Smaller application size due to native system components
  • Better performance and lower resource usage
  • Cross-platform development with native look and feel

Cons of Tauri

  • Less mature ecosystem compared to Electron
  • Steeper learning curve for developers new to Rust
  • Limited access to certain native APIs

Code Comparison

Tauri (Rust):

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

Electron Builder (JavaScript):

ipcMain.handle('greet', (event, name) => {
  return `Hello, ${name}!`;
});

Both Tauri and Electron Builder are popular tools for building cross-platform desktop applications using web technologies. Tauri offers smaller application sizes and better performance by leveraging native system components, while Electron Builder provides a more mature ecosystem with extensive documentation and community support.

Tauri uses Rust for its backend, which can be challenging for developers unfamiliar with the language. However, it offers better security and performance. Electron Builder, based on Electron, uses JavaScript throughout, making it more accessible to web developers.

The code comparison shows how both frameworks handle simple function calls, with Tauri using Rust macros and Electron Builder using IPC communication between main and renderer processes.

Portable and lightweight cross-platform desktop application development framework

Pros of Neutralinojs

  • Smaller application size due to lightweight nature
  • Cross-platform compatibility without relying on Chromium
  • Lower memory usage and faster startup times

Cons of Neutralinojs

  • Less mature ecosystem compared to Electron
  • Fewer built-in features and APIs
  • Limited access to native OS functionalities

Code Comparison

Neutralinojs:

Neutralino.init();
Neutralino.os.showMessageBox('Hello', 'Welcome to Neutralinojs!');

Electron-builder:

const { app, dialog } = require('electron');
app.on('ready', () => {
  dialog.showMessageBox({ message: 'Welcome to Electron!' });
});

Neutralinojs uses a more straightforward API for common tasks, while Electron-builder requires more setup but offers deeper integration with the OS.

Both projects aim to create cross-platform desktop applications using web technologies, but they differ in their approach and target use cases. Neutralinojs focuses on lightweight, efficient applications with a smaller footprint, while Electron-builder provides a more comprehensive framework with access to a wider range of native features and a larger ecosystem of tools and libraries.

Developers should consider their specific requirements, such as application size, performance needs, and desired native functionality when choosing between these two options for building desktop applications.

8,852

A library for building cross-platform native desktop applications with Node.js and CSS ๐Ÿš€. React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org

Pros of NodeGUI

  • Significantly smaller application size and lower memory usage
  • Native OS look and feel without web technologies
  • Better performance due to direct use of native widgets

Cons of NodeGUI

  • Less mature ecosystem and community support
  • Limited cross-platform UI consistency
  • Steeper learning curve for developers familiar with web technologies

Code Comparison

NodeGUI example:

const { QMainWindow, QWidget, QLabel, FlexLayout } = require("@nodegui/nodegui");

const win = new QMainWindow();
const centralWidget = new QWidget();
const label = new QLabel();
label.setText("Hello World");

const rootLayout = new FlexLayout();
centralWidget.setLayout(rootLayout);
rootLayout.addWidget(label);
win.setCentralWidget(centralWidget);
win.show();

Electron Builder example:

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

NodeGUI offers a more native approach with direct widget manipulation, while Electron Builder relies on web technologies for UI rendering. NodeGUI's code is more verbose but provides finer control over native widgets. Electron Builder's simplicity makes it easier for web developers to transition to desktop app development.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

electron-builder npm version downloads per month donate

A complete solution to package and build a ready for distribution Electron, Proton Native app for macOS, Windows and Linux with รขย€ยœauto updateรขย€ย support out of the box. :shipit:

Always looking for community contributions! รฐยŸย‘ย€ Setting up a dev environment is easy to do รฐยŸยชยฉ

We condemn Russiaรขย€ย™s military aggression against Ukraine. We stand with the people of Ukraine.

Sponsors

WorkFlowy
Notes, Tasks, Projects.
All in a Single Place.


Tidepool
Your gateway to understanding your diabetes data


Keygen
An open, source-available software licensing and distribution API


ToDesktop
ToDesktop: An all-in-one platform for building and releasing Electron apps


Dashcam
Dashcam: Capture the steps to reproduce any bug with video crash reports for Electron.

Documentation

See the full documentation on electron.build.

  • NPM packages management:
  • Code Signing on a CI server or development machine.
  • Auto Update ready application packaging.
  • Numerous target formats:
    • All platforms: 7z, zip, tar.xz, tar.7z, tar.lz, tar.gz, tar.bz2, dir (unpacked directory).
    • macOS: dmg, pkg, mas.
    • Linux: AppImage, snap, debian package (deb), rpm, freebsd, pacman, p5p, apk.
    • Windows: nsis (Installer), nsis-web (Web installer), portable (portable app without installation), AppX (Windows Store), MSI, Squirrel.Windows.
  • Publishing artifacts to GitHub Releases, Amazon S3, DigitalOcean Spaces and Bintray.
  • Advanced building:
    • Pack in a distributable format already packaged app.
    • Separate build steps.
    • Build and publish in parallel, using hard links on CI server to reduce IO and disk space usage.
    • electron-compile support (compile for release-time on the fly on build).
  • Docker images to build Electron app for Linux or Windows on any platform.
  • Proton Native support.
  • Downloads all required tools files on demand automatically (e.g. to code sign windows application, to make AppX), no need to setup.
QuestionAnswer
รขย€ยœI want to configure electron-builderรขย€ยSee options
รขย€ยœI found a bug or I have a questionรขย€ยOpen an issue
รขย€ยœI want to support developmentรขย€ยDonate

Installation

Yarn is strongly recommended instead of npm.

yarn add electron-builder --dev

Note for PNPM

In order to use with pnpm, you'll need to adjust your .npmrc to use any one the following approaches in order for your dependencies to be bundled correctly (ref: #6389):

node-linker=hoisted
public-hoist-pattern=*
shamefully-hoist=true

Note: Setting shamefully-hoist to true is the same as setting public-hoist-pattern to *.

Note for Yarn 3

Yarn 3 use PnP by default, but electron-builder still need node-modules(ref: yarnpkg/berry#4804). Add configuration in the .yarnrc.yaml as follows:

nodeLinker: "node-modules"

will declare to use node-modules instead of PnP.

Quick Setup Guide

electron-webpack-quick-start is a recommended way to create a new Electron application. See Boilerplates.

  1. Specify the standard fields in the application package.json รขย€ย” name, description, version and author.

  2. Specify the build configuration in the package.json as follows:

    "build": {
      "appId": "your.id",
      "mac": {
        "category": "your.app.category.type"
      }
    }
    

    See all options. Option files to indicate which files should be packed in the final application, including the entry file, maybe required. You can also use separate configuration files, such as js, ts, yml, and json/json5. See read-config-file for supported extensions. JS Example for programmatic API

  3. Add icons.

  4. Add the scripts key to the development package.json:

    "scripts": {
      "app:dir": "electron-builder --dir",
      "app:dist": "electron-builder"
    }
    

    Then you can run yarn app:dist (to package in a distributable format (e.g. dmg, windows installer, deb package)) or yarn app:dir (only generates the package directory without really packaging it. This is useful for testing purposes).

    To ensure your native dependencies are always matched electron version, simply add script "postinstall": "electron-builder install-app-deps" to your package.json.

  5. If you have native addons of your own that are part of the application (not as a dependency), set nodeGypRebuild to true.

Please note that everything is packaged into an asar archive by default.

For an app that will be shipped to production, you should sign your application. See Where to buy code signing certificates.

Donate

We do this open source work in our free time. If you'd like us to invest more time on it, please donate.

NPM DownloadsLast 30 Days