Adding a splash screen to portable electron builder apps

montoyaaguirre — Mon, 20 Apr 2020 19:58:41 +0000

Portable electron apps may take a few seconds to start. During this time there is no obvious feedback that the app is launching. Users might be confused and try to launch the app a few more times before they see a welcome screen.

It takes time to launch the application because the portable executable is extracting files to a temp folder in the background. Only after extraction is complete, the electron app will start. It can take more than a few seconds depending on the user's system and the size of the application.

To avoid this situation, we would like to see a splash screen while the extraction is taking place. Unfortunately, electron builder does not have a fully functioning implementation of this feature. (Hopefully this PR will be merged in the near future)
In the meantime this post will guide you through a workaround

Use the right version of electron builder

Use electron-builder ^22.4.0 (earlier versions will not work)

npm i electron-builder@latest

Fix portable.nsi

There is an issue with the template for portable windows applications (ROOT_OF_YOUR_PROJECT/node_modules/app-builder-lib/templates/nsis/portable.nsi) in electron builder. We will modify this file in order to fix it.
Let's take a look at the onInit function (Line 10 at the time of writing)

Function .onInit
  SetSilent silent
  !insertmacro check64BitAndSetRegView
FunctionEnd

The mode is set to silent. Because of this, the UI will not be displayed during the extraction of our electron app.
The fix is to check for an environment variable "SPLASH_IMAGE". Only if it's not defined we will start in silent mode:

Function .onInit
  !ifndef SPLASH_IMAGE
    SetSilent silent
  !endif
  !insertmacro check64BitAndSetRegView
FunctionEnd

That's it for fixing electron-builder.

Add a splash screen bitmap image file

Let's just add an image to display as splash screen.

We will name it "splash.bmp" and put it in the root of the project.

Configure electron build options

Now let's configure our electron app to build a portable executable that displays a splash image during extraction.
In package.json the build property should look like this:

 "build": {
    "portable": {
      "splashImage": "..\\..\\..\\..\\splash.bmp"
    },
    "win": {
      "target": "portable"
    }
  }

The path must be relative to "/node_modules/app-builder-lib/templates/nsis/"
Alternatively we can use an absolute path.

DEV Community: montoyaaguirre

Adding a splash screen to portable electron builder apps

Use the right version of electron builder

Fix portable.nsi

Add a splash screen bitmap image file

Configure electron build options

Build your electron app and behold the splash screen