In our Previous Article we implemented splash screen in Electron App. If you are directly arriving on this article, please you must first go through Basics of electron js.
As soon as we have developed an Electron application, then the question arises to create installer and distribute it across various platforms like macOS, Linux, Windows and in different formats msi, exe, dmg, 7z, zip etc.
When we talk about application distribution there are numerous questions come in our mind:
- What platform are we targeting ?
- Are we using some publishing artifact ?
- How to manage different versions of installer ?
In this article, we will be covering up packaging electron application in nsis format for windows platform. You can use similar configuration
to target other formats and platform as well. To achieve packaging we will use electron-builder
as packaging artifact and GitHub
as publishing artifact. electron-builder
also supports Amazon S3, Bintray etc as publishing artifacts.
Create Package:
Let us start by installing electron-builder
in our electron application. Install it using npm install electron-builder --dev
command.
Update the package.json
with following code snippet.
{ "name": "electron-steadyreaders", "version": "1.0.0", "description": "", ... "build": { "appId": "electron-steadyreaders", "productName": "Electron App for Steady Readers", "directories": { "output": "release/" }, "win": { "target": "nsis", "icon":"dist/assets/images/light-bulb-icon.ico" }, "nsis":{ "oneClick":false }, }, ... "scripts": { ... "publish": "electron-builder", ... } ... }
It is time to hit the publish command. npm run publish
• electron-builder version=21.2.0 os=6.1.7601 • loaded configuration file=package.json ("build" field) • writing effective config file=release\builder-effective-config.yaml • packaging platform=win32 arch=x64 electron=6.0.1 appOutDir=release\win-unpacked • building target=nsis file=release\Electron App for Steady Readers Setup 1.0.0.exe archs=x64 oneClick=false perMachine=false • building block map blockMapFile=release\Electron App for Steady Readers Setup 1.0.0.exe.blockmap
Here you go !! Let us open release
folder in root of our project and you must be able to install Steady Readers Setup 1.0.0.exe
Publish to GitHub:
Well, Let us quickly configure options to publish application. Add command publish:github
and update build
section in package.json
as follows:
"scripts": { ... "publish:github": "electron-builder -p always" ... }, "build": { ... "publish": { "provider":"github", "owner":"owner-name", "repo":"repo-name", "token":"token-value" } ... }
Set "provider":"github"
as we are using github repository to publish. In case you are using S3, you should set it to "provider":"s3"
.
owner
is your username in github account. repo
is repository name where you want to publish. and token
to authenticate
user while publishing. You can generate it using url https://github.com/settings/tokens
This time if we execute npm run publish:github
, as soon as package is created it gets published to github repository too.
Key points to note here,
- Your repository should not be empty before you start publish otherwise it will throw an error unless
"releaseType":"draft"
. It must have source code pushed there. - By default, it publishes in
draft
mode. It you want it to release directly, then you must pass"releaseType":"release"
. - It publishes package for public and private repository both.