Publishing Electron App to Mac App Store

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.

1. Building an electron app
2. Sign the build with certificates
3. Publish the app

Prerequisites

1. Apple developer account -> in which you need to enroll in their Apple Developer Program (which may cost you some bucks);).
2. From developer.apple.com -> account -> Certificates, Identifiers and Profile we can get certificates, identifier and provision profile for our app.
3. After enrolling yourself you need following certificates from your account. for more reference
   • 3rd Party Mac Developer Application certi
   • 3rd Party Mac Installer certi
   • Developer ID application certi
   • Developer ID Installer certi
   • Mac Developer certi
4. provision profile -> which also you can download from your apple account.

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.

src/
public/
     electron.js
     icon.icns
     entitlements.mas.plist
embedded.provisionprofile

Note that we need embedded.provisionprofile file at the root of the project.

Here is the example of my entitlements.mas.plist file

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

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.

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.

• Follow below give path:
  1. Open Xcode in your mac.
  2. From Xcode menu bar, open Xcode Menu -> Open developer tool -> Application Loader.
  3. From given 2 options, choose deliver your app option and choose .pkg file of your application.
  4. Next screen will look like this.
  5. Click on next and it will upload your build.
  6. Go to appstoreconnect.apple.com and fill up all the necessary fields.
  7. Find the Build section in that form from which you can select your uploaded build version for submitting for review. (After uploading the build it will be in processing state for some time)
  8. After submitting the build successfully. It will take around 24 hours for reviewing the build.
  9. Your app will be ready for sale now :)

Build the electron app with electron-packager

Why?

• I recently faced one issue like I am not able to build and upload build to Mac App Store with electron latest version 6.0.12 and electron-builder version 21.2.0. It was giving me helpers error while uploading build from Xcode.

So I chose another way to upload build which is electron-packager.

• Steps:
  1. Install electron-packager via yarn or npm.
  2. Now let's build app with following command.

     electron-packager . "MyApp" --app-bundle-id=com.myapp.macapp -- 
     helper-bundle-id=com.myapp.macapp.helper --app-version=2.0.7 -- 
     build-version=2.0.7 --platform=mas --arch=x64 --electron- 
     version=6.0.12 --icon=path/to/icns --overwrite

  3. After successfully building .app file let's sign the app with following command.

     electron-osx-sign MyApp-mas-x64/MyApp.app --provisioning- 
     profile=embedded.provisionprofile -- 
     entitlements=public/entitlements.mas.plist

  4. Now if you noticed, we are still playing with .app file, so let's build .pkg file to upload it to the Mac App Store. For generating .pkg file we are going to use electron-osx-flat.

     electron-osx-flat MyApp-mas-x64/MyApp.app --verbose

  5. Now you have signed .pkg file, so follow upload procedure as mentioned earlier in this post.

If you want to publish electron app to windows store here is my friend's article.

Thank you for reading.
Keep exploring :)

Comments

[Yogesh]

We have issue with icons , It is saying we have to add two icon icns and icns@2x but there is not option to add second icon. Please suggest.

dev-to-uploads.s3.amazonaws.com/up...

dev-to-uploads.s3.amazonaws.com/up...

[kaoben]

I have issue when I set com.apple.security.app-sandbox
true
it show error │ Error: Command failed: codesign --sign E283EE7D322597B023B2613C5D608E11E1D11DCC --force --options runtime --entitlements /var/folders/c0/gmwzy_rx0299f4n94z0pngpm0000gn/T/tmp-entitlements-97ee-0.plist /Users/ezpizee/Desktop/Ezpizee/ezpizee-pos-desktop-app/build/mas/Ezpizee POS Desktop.app
│ Could not create string from entitlements data when I build