Publishing Electron App to Mac App Store
Tags: electronjs, mas, electronbuilder, react
Published: 2019-10-21 07:43:53

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](https://github.com/varisbhalala/electron-react) 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](developer.apple.com) -> 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] (https://github.com/nwjs/nw.js/wiki/MAS%3A-Requesting-certificates)
      * 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](https://github.com/electron/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.
<pre>
src/
public/
     electron.js
     icon.icns
     entitlements.mas.plist
embedded.provisionprofile
</pre>

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

Here is the example of my entitlements.mas.plist file
{% gist https://gist.github.com/varisbhalala/10b217d7a41d3d24dcbfeac751165924 %}

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](https://developer.apple.com/library/archive/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/AboutEntitlements.html)

For building the electron app let's configure `package.json` file.
{% gist https://gist.github.com/varisbhalala/39ab8cdd614bc7ee9b77b2500ccb487e %}

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](https://github.com/varisbhalala/electron-react/blob/master/package.json)'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](http://files.simformsolutions.com.s3.amazonaws.com/simformscreen/Deliver_Your_App_2019-10-21_11-01-27.png).
   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.
     <pre>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</pre>
   3. After successfully building .app file let's sign the app with 
      following command.
      <pre>electron-osx-sign MyApp-mas-x64/MyApp.app --provisioning- 
      profile=embedded.provisionprofile -- 
      entitlements=public/entitlements.mas.plist</pre>
   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] 
      (https://github.com/electron/electron-osx-sign/blob/master/bin/electron-osx-flat-usage.txt).
      <pre>electron-osx-flat MyApp-mas-x64/MyApp.app --verbose</pre>
   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](https://medium.com/@sangamrajpara/publishing-electron-app-to-windows-store-3cadeed26a32) is my friend's article.

Thank you for reading.
Keep exploring :)