Electron Travis CI Mac automated build `.travis.yml` file -.travis.yml #mac only. I configured the build script as 'pack': 'electron-builder -dir -mwl', in script. The issue is, when i run the command npm run pack, it packages the application for all the platform, but for windows there is no single installer file either.exe or '.msi'. Electron-builder builds bunch of files for windows. Electron-Nuxt: TravisCI + Electron-Builder - Github Releases. This guide will help you setup your config files and services, so that you can easily create Github Releases from TravisCI—using Electron-Nuxt. 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.

Recently I released my first Electron application. When my application was ready to be released, it was required to have it notarized by Apple, or else nobody could use my your application. Although there are quite a few articles on this matter, it still took some trial and error because I ran into a couple of problems that were not mentioned. To save others some time figuring these things out, I've created this walkthrough to get you started.

Electron Builder

I've used Electron Builder together with the Electro Builder Vue CLI to build my first application. According to the official Electron website, it's described as a 'complete solution to package and build a ready-for-distribution Electron app that focuses on an integrated experience.'

From my experience, Electron Builder works excellent during development, but it seems a bit buggy in regards to making your application available to the general public. I've experienced some issues with notarizing and publishing. So I might give Electron Forge (maintained by Electron) a try for my next application to see how that works compared to Electron Builder (maintained by a third-party).

Apple Developer Program

In order to distribute your Electron app on macOS, you need to participate in Apple's Developer Program, which costs $99 per year. You can sign up for an developer account at https://developer.apple.com.

Head over to your Developer Portal and click on 'Certificates, IDs & Profiles.'

Next, head over to 'Certificates' and click the blue plus icon to create a new certificate. Depending on your distribution wishes, you need to select a certificate type. In this example, we will go ahead and select 'Developer ID Application,' which reads, 'This certificate is used to code sign your app for distribution outside of the Mac App Store.'

Next up, we need to upload a 'Certificate Signing Request.' You can create this with the Keychain Tool on your Mac. You can find this application in /Applications/Utilities

Next, choose Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority. Fill out the form:

User Email Address: <your email address>
Common Name: <anything>
CA Email Address: <leave empty>
Request is: Saved to disk

This will create a new file .certSigningRequest. Head back to Apple's Developer Portal again and upload the certificate signing request.

Now download your certificate to your Mac, then double click the .cer file to install in Keychain Access. If you don't do this, you will get some strange errors from Apple when notarizing your application, which doesn't tell you anything useful:

Configure after sign hook

Electron Builder also uses Electron Notarize behind the scenes. For example, this is the afterSignHook.js I'm using:

Make sure you adjust the appId to your app's name; the convention is country.company.appname. Finally, you need to set your Apple ID and password. It's recommended not to include your credentials in your code, so please use environment variables when possible. There is no API key you can use instead of a password but you can at least generate app specific passwords, so you don't need to write your personal password. Apple will provide you with something like edqv-akmn-hasr-tyui.

That should do it. You should now be able to successfully notarize your application with the npm run osx:build command.

Tip: If you want to know more about the inner workings of how your application is signed and notarized, look at the electron-osx-sign and electron-builder-notarize NPM package.

At the time of writing Electron Builder still contains a bug that causes the your-app-mac.zip file to have an unsigned copy of your application (the your-app.dmg will work just fine).

Luckily someone wrote a workaround (I've made some adjustments for it to work with my Vue boilerplate). Place this file in the root of your project.

Electron Builder has a couple of hooks you can use to run the fixMacDistributionArchive.js file. Open your vue.config.js file if you are using the Vue CLI and add the afterAllArtifactBuild:

Note: The afterAllArtifactBuild is bugged when running any publish command like publish:all. I highly recommend that you use your own publishing script to push your release up to GitHub for example.

All done! You should now be able to share your awesome notarized application app with the rest of the world. I'm working on a solution to make it easier for you to distribute your applications. If you are interested make sure you subscribe and be notified at Unlock.

I'm curious what you think of Electron Builder and if you've tried some alternatives. Tweet me @philo01 and share your experience.

Also, if you want to be notified about more articles about Electron be sure to subscribe or just follow me on Twitter, I appreciate the support 🙌🏼

Auto-updates for private repositories and licensing

Electron-builder Mac Target Zip Dmg Download

If you are building a commercial Electron product you are definitely going to be interested in Unlock. Unlock provides cloud-based licensing, distribution, and reporting for your Electron applications so you can set yourself free from logistics so you can focus on building software instead of packaging, versioning, and distributing products to your customers.

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

• 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.lz, tar.gz, tar.bz2, dir (unpacked directory).
  • macOS: dmg, pkg, mas, mas-dev.
  • 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), 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.

Installation¶

Yarn is strongly recommended instead of npm.

yarn add electron-builder --dev

Boilerplates¶

• electron-webpack-quick-start — A bare minimum project structure to get started developing with electron-webpack. Recommended.
• electron-react-boilerplate A boilerplate for scalable cross-platform desktop apps.
• electron-react-redux-boilerplate A minimal boilerplate to get started with Electron, React and Redux.
• electron-boilerplate A minimalistic yet comprehensive boilerplate application.
• Vue CLI 3 plugin for Electron A Vue CLI 3 plugin for Electron with no required configuration.

Quick Setup Guide¶

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

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. Option files to indicate which files should be packed in the final application, including the entry file, maybe required.

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.

Programmatic Usage¶

See node_modules/electron-builder/out/index.d.ts. Typings for TypeScript is provided.

Pack Only in a Distributable Format¶

You can use electron-builder only to pack your electron app in a AppImage, Snaps, Debian package, NSIS, macOS installer component package (pkg) and other distributable formats.

Electron-builder Mac Target Zip Dmg

--projectDir (the path to project directory) option also can be useful.

Debug¶

Electron-builder Mac Target Zip Dmg File Size

Set the DEBUG environment variable to debug what electron-builder is doing:

FPM_DEBUG env to add more details about building linux targets (except snap and appimage).

cmd

On Windows the environment variable is set using the set command.

PowerShell

PowerShell uses different syntax to set environment variables.

Community¶

Electron-builder Mac Target Zip Dmg File

electron-builder on Zulip.