DEV Community

montoyaaguirre
montoyaaguirre

Posted on

Adding a splash screen to portable electron builder apps

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.
Alt Text
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.
Alt Text
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.

Build your electron app and behold the splash screen

Alt Text

Latest comments (2)

Collapse
 
samantrader profile image
samantrader

Hi I used electron-builder version 23.6.0
that this problem is solved but I have another problem
when create portable exe
when splashImage start to show a installation form is show same time and immediately close how can I
Image description fix it

thanks

Collapse
 
sambittechy profile image
sambit

I know that PR has not yet been merged, but I tried all the steps explained in this article, but it is throwing error which creating the portable application. I manually copied the spalsh.bmp file inside the node_modules\app-builder-lib\templates and inside nsis also, still it is not working. Please help me.