David.dev 🎪

about ~ apps

Oct. 26, 2019, 12:07 p.m. #electron

Electron: cannot build MAS with electron-builder on Mac OS X Mojave

As you can read in my how to notarize an electron package I did manage to have my OS X app notarized (so it doesn't show a warning when a user tries to install from thee dmg) but what if I want to publish my app on the apple store ?

To do that you need a MAS package. So I am trying to build a MAS package for distribution in the Apple store (now you need to use transporter from Apple, you can't do it anymore with Xcode on the new version) using electron 6.0.12 and electron-builder 21.2.0. I did check several tutorials (like this one that was just a few month old) with no luck.

Building a notarized DMG works fine but I can't get a valid Mas package. I made a special package.json just for the MAS to see where the problem is

{  
  "name": "elektro",  
  "version": "1.0.0",  
  "description": "elektro editor",  
  "main": "main.js",  
  "scripts": {  
    "start": "electron .",  
    "build": "electron-builder"  
  },  
  "author": "david.dev",  
  "license": "ISC",  
  "dependencies": {  
    "electron-is-dev": "^1.1.0"  
  },  
  "devDependencies": {  
    "electron": "^6.0.12",  
    "electron-builder": "^21.2.0",  
    "electron-packager": "^14.0.6",  
    "electron-notarize": "^0.1.1"  
  },  
  "build": {  
    "appId": "dev.david.elektro",  
    "directories": {  
      "buildResources": "resources"  
    },  
    "extraResources": \[  
      {  
        "from": "./resources/elektro.png",  
        "to": "elektro.png"  
      }  
    \],  
    "mac": {  
      "target": \[  
        "mas"  
      \],  
      "hardenedRuntime": true,  
      "entitlements": "./resources/entitlements.mac.plist",  
      "provisioningProfile": "./resources/prod.provisionprofile"  
    },  
    "mas": {  
      "entitlements": "./resources/entitlements.mas.plist",  
      "provisioningProfile": "./resources/prod.provisionprofile"  
    }  
  }  
}

Pre-requisites

you will need to have a provisioning profile, entitlements file and a 3rd party signing certificate from apple developer. (more info in another tutorial I found online)

Now the resulting package will not be accepted for upload to the apple store with transporter. There will be a number of "issues" reported by Apple. 

Here an highlight of the issues and how I solved them:

Issue #1

ERROR ITMS-90277: "Invalid Bundle Identifier. The application bundle contains a tool or framework Electron Helper
(GPU) \[dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/elektro Helper (GPU).app\] 
 using the bundle identifier 'dev.david.elektro.helper.(GPU)', which is not a valid bundle identifier."  
ERROR ITMS-90277: "Invalid Bundle Identifier. The application bundle contains a tool or framework Electron Helper (Plugin) 
\[dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/elektro Helper 
(Plugin).app\] using the bundle identifier 'dev.david.elektro.helper.(Plugin)', which is not a valid bundle identifier."  
ERROR ITMS-90277: "Invalid Bundle Identifier. The application bundle contains a tool or framework Electron Helper (Renderer) 
 \[dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/elektro Helper (Renderer).app\]
 using the bundle identifier 'dev.david.elektro.helper.(Renderer)', which is not a valid bundle identifier."

Solved with:

https://github.com/electron-userland/electron-builder/issues/4151

change node\_modules/app-builder-lib/out/electron/electronMac.js line 178

to

helper.CFBundleIdentifier = ${helperBundleIdentifier}.${postfix.replace(/\[^a-z0-9\]/gim,"")};

Issue #2 Sandboxing

 ERROR ITMS-90296: "App sandbox not enabled. The following executables must include the "com.apple.security.app-sandbox" entitlement with a Boolean value of true 
in the entitlements property list: \[( "dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Resources/crashpad\_handler", 

"dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/Squirrel.framework/Versions/A/Resources/ShipIt", 
"dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/elektro Helper (GPU).app/Contents/MacOS/elektro Helper (GPU)", 
"dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/elektro Helper (Plugin).app/Contents/MacOS/elektro Helper (Plugin)", 
"dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/elektro Helper (Renderer).app/Contents/MacOS/elektro Helper (Renderer)", 

"dev.david.elektro.pkg/Payload/elektro.app/Contents/Frameworks/elektro Helper.app/Contents/MacOS/elektro Helper",
 "dev.david.elektro.pkg/Payload/elektro.app/Contents/MacOS/elektro" )\] Refer to App Sandbox page at
 https://developer.apple.com/devcenter/mac/app-sandbox/ for more information on sandboxing your app."

Solved with https://github.com/electron/electron-osx-sign/issues/192

Workaround

Add

<key>com.apple.security.app-sandbox</key>  
<true/>  
to node\_modules/app-builder-lib/templates/entitlements.mac.plist  
<key>com.apple.security.app-sandbox</key>  
<true/>

to node_modules/app-builder-lib/templates/entitlements.mac.plist

Issue #3

Icon needs to be 1024x1024 and this was easy to solve.

After "fixing" these 3 issues I have a package that I can upload on the apple store without any further warnings but the app doesn't run anymore so after review apple with reject it.

I am not sure on what goes wrong but I assume that fixing the issue 1,2 and changing the NPM packages causes the package to be valid for apple but not functional anymore. I will investigate some more but so far it seems that the publishing to the apple store process is not as easy. It is seems to be poorly documented and I am not sure on how other people running on Mojave can still manage to build a valid package. May be I should try electron-packager. I will of course report back if I find a way to fix this and generate a valid package for the apple store (here is an idea for the ambitious developers out there: why not make a simple bash script that takes care of all this? It would be really amazing!).