electron-builder
A complete solution to package and build a ready for distribution Electron app with โauto updateโ support out of the box
Top Related Projects
Make any web page a desktop application
Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
Portable and lightweight cross-platform desktop application development framework
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
- 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"]
}
}
}
- Configuring auto-update:
const { autoUpdater } = require("electron-updater");
autoUpdater.checkForUpdatesAndNotify();
- Custom installer configuration:
{
"build": {
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true
}
}
}
Getting Started
-
Install electron-builder:
npm install electron-builder --save-dev
-
Add build configuration to
package.json
:{ "build": { "appId": "com.example.myapp", "productName": "My Electron App", "directories": { "output": "dist" } } }
-
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" } }
-
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.
Build smaller, faster, and more secure desktop and mobile 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.
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
electron-builder
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
Documentation
See the full documentation on electron.build.
- NPM packages management:
- Native application dependencies compilation (including Yarn support).
- Development dependencies are never included. You don't need to ignore them explicitly.
- Two package.json structure is supported, but you are not forced to use it even if you have native production dependencies.
- 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.
- All platforms:
- 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.
Question | Answer |
---|---|
รขยย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.
-
Specify the standard fields in the application
package.json
รขยย name,description
,version
and author. -
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
, andjson
/json5
. See read-config-file for supported extensions. JS Example for programmatic API -
Add icons.
-
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)) oryarn 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 yourpackage.json
. -
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.
Top Related Projects
Make any web page a desktop application
Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
Portable and lightweight cross-platform desktop application development framework
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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot