Electron
Useful links
- Egghead - Hello world app using Electron
- Electron Docs - Quick Start
- Electron API Demos
- Electron Docs - API
Electron information
Main vs renderer process
There are two .js files in an Electron app: by default a main.js
and a renderer.js
.
The main process in the main.js
file can display a GUI by creating web pages. Main process creates web pages in Electron.
The renderer process in the renderer.js
file is a process runned by each web page in Electron.
So there is one main process and many renderer processes.
In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions.
To access dependencies of the main process in the renderer process you have to use remote
:
const { remote } = require('electron');
const updater = remote.require('electron-simple-updater');
Tools for building, updating and publishing
- Building
- electron-builder - built-in code signing
- electron-packager
- electron-osx-sign / electron-osx-flat for code signing
- Updating with dedicated server
- autoUpdater - needs dedicated server with correct responses
- electron-release-server - Node.js + PostgreSQL
- Build own release server on Node.js - Auto-updating apps for Windows and OSX using Electron: The complete guide
- Updating without dedicated server
- electron-simple-updater - doesn't need a dedicated server
- Publishing
- electron-simple-publisher - SSH, github, ftp, Amazon S3 and local release transports are supported
Publishing an app outside the MAS (darwin
)
Only team agents belonging to either the Apple Developer Program or the Apple Developer Enterprise Program are allowed to create Developer ID certificates and sign apps or installer packages using them.
Using the electron-builder
Useful links:
- electron-builder wiki: Code Signing
- electron-builder wiki: Options
- App rejected when Mac Developer certificate is in keychain
Steps:
Generate certificates on the website:
https://developer.apple.com/account/mac/certificate/distribution."For distribution outside the Mac App Store, you will need the following:
- The first is a Production > Developer ID > Developer ID Application certificate.
- The second is a Production > Developer ID > Developer ID Installer certificate."
- Generate an app bundle ID:
https://developer.apple.com/account/mac/identifier/bundle/
and properly updatepackage.json
according to the created bundle ID. - Build signed app by disabling the
asar
property of the electron-builder for a Mac build and by running commands:sudo spctl --master-disable #disables Mac GateKeeper, after build you can enable it npm run build:mac
- To check signature:
or:codesign -dv "PATH/NAME.app" codesign -vv "PATH/NAME.app"
codesign --verify -vvvv "PATH/NAME.app" spctl -a -vvvv "PATH/NAME.app"
Using the electron-packager
Only the 3rd step is different. You have to use commands:
sudo spctl --master-disable #disables Mac GateKeeper, after build you can enable it
# EITHER pack your app and sign it both at once
electron-packager . "My App" --platform=darwin --arch=x64 --version=0.35.6 --app-bundle-id="com.mysite.myapp" --app-version="1.0.0" --build-version="1.0.100" --osx-sign
# OR pack your app first then manually sign it
electron-packager . "My App" --platform=darwin --arch=x64 --version=0.35.6 --app-bundle-id="com.mysite.myapp" --app-version="1.0.0" --build-version="1.0.100"
# Code-sign app bundle
electron-osx-sign "My App-darwin-x64/My App.app"
# OPTIONAL: Create installer package for shipping
electron-osx-flat "My App-darwin-x64/My App.app"