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.
Top comments (2)
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.
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
fix it
thanks