- App Title Electron Macos Capture
- App Title Electron Macos Configurations
- App Title Electron Macos Configuration
Electron webview.loadURL crash. GitHub Gist: instantly share code, notes, and snippets. Signing Windows apps on Unix is supported. There are multiple methods to achieve this. Basically you need an application that is able to sign code using PKCS. Electron is one of the most popular frameworks in building native desktop applications compatible for Windows, Linux and MacOS systems. We can start using Electron if we already know web development because Electron is also using HTML, CSS, and JS to build native desktop applications. Another great desktop app using this JavaScript desktop framework is Slack Desktop for macOS. Why Slack Desktop uses Electron? It was built with the Electron framework that can be easily seen thanks to its faster performance and the frameless look unlike the browser experience. Customizing Electron’s window title look on Mac. September 02, 2015. Electron is a nice shell for building native apps with web technologies. It doesn’t support all possible window styles on Mac out of the box, and I did a small investigation on how to get different window looks and behaviors working on Mac.
1- Create a Bundle ID for your app
The very first step to be able to send a mac app to the appStore is to create a unique Bundle ID for it:
- go to your Apple Developer Account
- click Certificates, IDs & Profiles
- select macOS in the top-left dropdown list
- click on App IDs under the Identifiers menu
- click the + sign on the upper-right part of the screen
- give a description to your app, choose Explicit App ID and enter a Bundle ID (usually something like com.domain.appname)
- click Continue and then Register
2- Create your developer certificates
![Electron Electron](https://www.deskmodder.de/blog/wp-content/uploads/2020/07/mac-os-8-als-app-003-261x205.jpg)
You need two types of certificate as a developer to submit an app to the mac appStore:
- click Certificates, IDs & Profiles
- select macOS in the top-left dropdown list
- click on All under the Certificates menu
- click the + sign on the upper-right part of the screen
- in the Production section choose Mac App Store
- in the next page select Mac App Distribution, click Continue
- create your Certificate Signing Request as indicated, click Continue
- load your CSR file and download the generated certificate
In addition to the Mac App Distribution certificate, one also need a Mac Installer Distribution certificate. You need to perform the same steps as previously and select Mac Installer Distribution on step 5.
All your certificates should be ready now.
All your certificates should be ready now.
3- Package your Electron app
It is now time to prepare your app for the submission. You first need to install electron-packager. This module will be helpful to create the .app and package everything we need. To install :
And then run:
Change ELECTRON_VERSION to the correct version of Electron installed in your machine (run “electron -v” if you are not sure).
This will create your appName.app in a new folder named mas-build. This is usually enough if you want to distribute your app. However, a few more steps are required to submit it properly to the appStore.
As you can see, you also need the .icns file with the requested icon format. You can check here to see how to prepare the perfect .icns.
This will create your appName.app in a new folder named mas-build. This is usually enough if you want to distribute your app. However, a few more steps are required to submit it properly to the appStore.
As you can see, you also need the .icns file with the requested icon format. You can check here to see how to prepare the perfect .icns.
4- Sign your app
You need then to sign your app, so everybody knows it’s coming from a trustworthy developer ?
The codesign command already exists by default on mac, you will use it to sign your app. Run the following command by properly adding the name of your certificate and the correct path to your appName.app.
The codesign command already exists by default on mac, you will use it to sign your app. Run the following command by properly adding the name of your certificate and the correct path to your appName.app.
5-Prepare additional files
5.a- Update the Info.plist
Your app is now signed. The next step is to find your appName.app, right-click and select Show Package Contents.
Go to the Contents folder and open the Info.plist file with a text editor (not Xcode).
Add the following code
Go to the Contents folder and open the Info.plist file with a text editor (not Xcode).
Add the following code
Just before
Here you need to replace TEAM_ID with your teamID, you can find it on your Apple developer account (click Membership then you’ll see a row named Team ID).
5.b- Add child.plist and parent.plist
Create the two following files with the corresponding content:
- child.plist
- parent.plist
Replace TEAM_ID by your Team ID and your.bundle.id by the unique Bundle ID of your app (we previoudly used com.domain.appname).
6- Create a .pkg of your app
Create a new file and name it packageAppStore.sh with the following content.
You need to do some changes on this file on the first lines:
- l4: change YourApp.app by the name of your app (with the .app extension), in our case appName.app
- l6: change /path/to/YourApp.app to the path to your appName.app
- l8: change ~/Desktop/$APP.pkg to the directory where you want to save your final .pkg, don’t modify the $APP.pkg part
- l10 and l11: Enter the corresponding names of your two certificates
- l13: change /path/to/child.plist to the path to your child.plist file
- l14: change /path/to/parent.plist to the path to your parent.plist file
Finally, run the following command to generate your appName.pkg :
7- Launch Application Loader and load the .pkg
Archiver mac app store. If you already installed Xcode, you should also have an application called Application Loader. Launch Application Loader and login with your account. You might need to get an app specific password, for this connect to appleid.apple.com and click Generate Passwords… on the APP-SPECIFIC-PASSWORDS section. Enter a Label (for example Application Loader) and copy paste the code to the Application Loader app.
Click Choose and select the freshly generate appName.pkg. This should automatically identify your app based on the Bundle ID.
Finish the whole process of uploading your app.
Click Choose and select the freshly generate appName.pkg. This should automatically identify your app based on the Bundle ID.
Finish the whole process of uploading your app.
8- Complete your app information
You app build should be available on your iTunesConnect account soon. In the meantime, you need to complete the information about your app. Once done, you can select the build that you want to upload to the appStore and click Submit.
9- Some potential issues
If you submitted the .pkg file but it does not appear on itunesConnect, check your email. If you received something like:
Invalid Signature – The executable at path appName.app/Contents/Resources/app/node_modules/robotjs/build/Release/robotjs.node has following signing error(s): code object is not signed at all In architecture: x86_64 . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.
You need to sign the different modules mentioned in this email. For that, just do as follow for each module:
Voilà ? You can now enjoy some coffee while waiting for the review. Congratulations!
Source: https://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/
We can work together
Share this post on social media:
Recently I was working in an Electron app, to set up a live video. It was a very basic set up. I am using MAC OS - Catalina.
I am new to Electron and forked the repo that has the basic set up. Firewall app blocker mac.
I followed all the steps, but I could not get my video or audio consent window.
After spending some on debugging it, came across the doc,
App Title Electron Macos Capture
electron-docs
systemPreferences.askForMediaAccess('camera').then((allowed)=>console.log('Camera is allowed'))
Adding the above lines in
However, I ran
main.js
, should solve the issue.However, I ran
electron .
in my folder and the whole app crashed.I was doing all this from my VS Code terminal, which crashed the app. We need to get permission to access the camera for the electron app and looks like the permissions were requested for VS Code.
App Title Electron Macos Configurations
Starting the server from Terminal or iTerm (I used iTerm), solved the issue, which requested permission for the app. Once the permission or user consent is given, I was able to access the camera, for other electrons app as well. It is a one time setup and it enables us to access the camera for other apps as well, without going over the above code set up.