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.