In this article I'll try to provide a step-by-step guide describing publishing of MacOS Electron.JS application to Mac App Store highlighting all tricky moments.
16 January 2020
First of all, everything said here is relevant to the early 2020.
The most important thing: only applications based on Electron 5.0.13 and 6.1.7 can be published due to Apple policy. Probably something will be changed soon.
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application. Compatible with Mac, Windows, and Linux, Electron apps build and run on three platforms.
Important definitions
Sandboxing - isolation of your application in special environment with restricted access almost to everything. See original apple video explaining this.
Entitlements - request for permissions for your sandboxed application. Full security entitlements list can be found here.
Provisioning profile - it's something that connect your developer account (certificate), bundle and devices that can install your application.
Publication
Let's imagine that you already have Electron application and you are using Electron builder to build your application.
All listed code can be found at our Electron Nuxt repository.
Other posts
As this process is not documented properly anywhere so here is my try to simplify this process for you.
You can go through my repository which uses the latest version of electron and electron-builder.
The whole process can be divided into the below steps.
Prerequisites
![]()
For now, we are building the desktop app using an electron-builder later in this blog will show you how to make the build using an electron-packager.
So now install all the certificates in your mac system's keychain.
First of all please go through the file structure which I am following.
Note that we need embedded.provisionprofile file at the root of the project.
Here is the example of my entitlements.mas.plist file
Best mac app videos 2x. Update the
TEAM_ID with your TEAM_ID which you can get from your apple account and update necessary entitlements according to your project's requirement. You can find the documentation of entitlements here
Electron Mac App Store App
For building the electron app let's configure
package.json file.
As mentioned in above gist you have to change target for mac to mas which is short term for Mac App Store. With that you need to provide path for provision profile and mas plist file. Change the type parameter to distribution, as we are signing the app for public distribution on mac app store.
Now all we want is right here, So let's build the app.
Fire your mac build command according to your package.json configuration.
As you seen in my repository's package.json script, I have to fire
yarn build command to generate MAS build. Electron Mac App Store Settings
Main thing is that electron-builder is using
[electron-osx-sign](https://github.com/electron/electron-osx-sign) package to sign your .app file internally so you don't have to worry about it.
Now you can see
.pkg file in your output folder which we are going to use for publication.
Now you can see
.pkg file in your output folder which we are going to use for publication.
Finally, It's time to upload the build to Mac App Store.
Build the electron app with electron-packager
Why?
So I chose another way to upload build which is electron-packager.
If you want to publish electron app to windows store here is my friend's article.
Electron Builder Mac App Store
Thank you for reading.
Keep exploring :) Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |