Electron-builder Mac Target Zip Dmg

Target¶ Without target configuration, electron-builder builds Electron app for current platform and current architecture using default target. MacOS - DMG and ZIP for Squirrel.Mac. Linux: if you build on Windows or macOS: Snap and AppImage for x64. If you build on Linux: Snap and AppImage for current architecture. The latest-mac.json and latest-mac.yml are not generated which are required for the auto-updater to work. Note: I did see a bunch of issues where it was pointed that when the target is set to dmg, it doesn't create the json and yml files. Instead that needs to be set to dmg and zip. I tried with all the combinations and without the target. Then you can run yarn dist (to package in a distributable format (e.g. Dmg, windows installer, deb package)) or yarn pack (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.

Electron-builder

electron-builder

A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box.

Electron-builder Mac Target Zip Dmg

See 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.
  • 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 and Muon support.
QuestionAnswer
“I want to configure electron-builder”See options
“I have a question”Open an issue or join the chat
“I found a bug”Open an issue
“I want to support development”Donate

Real project example — onshape-desktop-shell.

Installation

Yarn is strongly recommended instead of npm.

yarn add electron-builder --dev

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:

    See all options.

  3. Add icons.

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

    Then you can run yarn dist (to package in a distributable format (e.g. dmg, windows installer, deb package)) or yarn pack (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. Donation can be used to increase some issue priority.

Sponsors

久しぶりにWindows向けの簡単なデスクトップアプリ開発する必要が発生したのですが、日常Mac環境の中、今更Windows環境でVisual Studio入れてFormアプリを書くのもなんなのでElectronで書こうと思った際のメモ。

追記

2019年10月30日に、Electron 7.0環境で動くよう一部コード書き換えました。

やりたいこと

まあ、HTMLとかCSSとかJSは理解してるつもりなので、HelloWorldアプリをMac用, Win用の単体アプリとしてビルドするまでの流れを確認。

完成版は下記のような感じ。

前提

MacでWindows向けのデスクトップアプリを開発したい。

準備

Electron-builder Mac Target Zip Dmg

作業スペースの確保

electronはpackage.jsonが無いと怒られる系のやつ。なので、npm initしてpackage.jsonを作っておく。

Electron-builder Mac Target Zip Dmg

何も変えなくてもいいのですが、electronではエンドポイントをmain.jsとする文化のようなので変更します。

script等は環境に合わせてお好みで（何も変更しなくても良い）。

electronのインストール

globalでもいいのですが、ものすごい頻度でバージョンアップされるのでとりあえずローカルにインストール。
作業フォルダにて以下を実行。

-Dは--save-devと同意。

必要なファイルの生成

main.jsがエンドポイントとなり、そこからindex.htmlを呼び出すような感じにするので、2つのファイルを先に作っておきます。

実装

main.js

実装内容はElectronのQuickStartにあるやつをベースに少し修正（ほぼまんまですが）。
Macだと少し余計な記述が必要らしい。

index.html

実際のアプリとなるファイル。

実行（動作確認）

npx electron . とかでもいい。

パッケージング（electron-builderによるビルド）

Electron-builder Mac Target Zip Dmg Download

単体で動くアプリケーション化する方法がいくつかあるが、electron-builderがいちばんメジャー？っぽいので使ってみます。electron-builderを使うとインストーラー形式で出力したり、アイコン設定等ができる。

まずはインストール。

下記は最低限度。

package.jsonに記述することもできるが、独立したビルド条件をjsファイルにすることもできるみたい。
Windows用に下記のように書いてみた。

zipした状態で、x64とia32(x86)用に出力する。targetをnsisとかにするとinstaller形式となる。

標準ではdistフォルダが作成され、そこの出力されるよう。gitつかうなら.gitignoreにdist/としたほうがよいかも。

appIdは必要に応じて変更。

Electron-builder Mac Target Zip Dmg File

Electron-builder Mac Target Zip Dmg

Mac用。targetをdmgとかにもできる。

Electron-builder Mac Target Zip Dmg File Size

ビルドの実行。

Electron-builder Mac Target Zip Dmg Software

環境に関係なくWin(ia64)やMac用のexeファイルはビルドされるっぽい。
なお、Win32環境はWindowsじゃないとビルドできなくなったみたいです。