Electron-React Boilerplate , Windows App Setup: Changing Icons, Windows Packaging, Naming Packaged Files and Installation Options.

5 min readOct 26, 2020

When I first wanted to package the Electron-React Boilerplate app (Create the installation files) I had a little bit of a challenge on figuring out the different types installation and how to change some of the install setup options. Here I hope to clarify some of this mainly for Windows for the moment.

This tutorial, I will show how to:
Package the app for windows
Setup and change the icons in dev and production
Package file naming
Setting windows installation settings

The setup is based off electron-react boilerplate version 1.3.1 and only for Windows… for now. I am working on updating the changes made from version 1.1.0 the 1.3.1 version to help make up-to-date instructions.

I am assuming that one has already installed and can run the electron-boiler plate using “yarn dev”. If not, you can clone and follow the setup instructions at the GitHub Electron-React Boilerplate.

Packaging for Windows

There isn’t much in the instructions on packaging but for me I only wanted to package install files for windows.

To package just for windows, run:

yarn package-win

This will create a release folder with the app installation files. You can run the packaged app without having to run the installation by running the “yourAppName.exe” in the “release/win-unpacked” folder created during packaging.

The production app disables the inspector for security reasons so UI debugging isn’t available. If there is a reason you need to perform some debugging in the packaged application, one way is to build it while enabling debugger. Make sure you do not use “DEBUG_PROD=true” built apps in production! I only used it on the windows-unpacked through USB key for testing on other PC’s.

yarn cross-env DEBUG_PROD=true yarn package-win

This will allow you to open the packaged app and right click to open the inspector for debugging.

There are other ways of packaging just for Linux or mac that you can see on the package.json “script” section. I wanted to mention that to help clarify to newer users. I’ll have a separate instruction set on “package-ci” at a different time. Quick note on “package-ci”, the setup will release set versions to GitHub after packaging the app which can trigger auto-updater to update installed apps on other computers.

Window Title Bar

The easiest to update the title bar for windows for both dev and packaged apps is to modify the <title> element in app/app.html file.

Here you can see that I changed it to my own electron-react example with Electron-React Tester!:

Changing Window Title Bar Icon

To change the windows title bar icon on the packaged app, you need to have a .ico file that has a minimum of 256px X 256px.

To change the DEV title bar window icon you need the same icon in .png file format.

Save the icons in the resources folder. I removed the original resources/icons and the images in it since I don’t need them. I also removed the original electron icon images as well.

I added the my icon as “myIcon” to the resources folder.

Now there are two different areas that need updated, one for the dev environment and one for the packaged production app.

FOR THE DEV WINDOW, to display the icon, you need to update the app/main.dev.ts file when the mainWindow is created. The newer electron-react boilerplate version now has it set to the icon.png electron icon, but we are going to set it to the new myIcon.png.

For the PRODUCTION PACKAGED APP, we need to update the package.json file under “build” under “win”. We need to add a line “icon” with the .ico source so when the app is packaged, it knows what icon image to use. Here we use the “resources/myIcon.ico” where we stored our icons. It needs to be this location! Otherwise you will need to add the folder and or file locations to the “build” under “files” to allow the packager to include it in the build.

Now when the “yarn package-win” is ran and opened, the newly added Icon will be used.

To change the packaged app installation file names you need to change the package.json file in “build”. Under “productName” and in “appId” is the two lines that need changed. Here is an example of what I did to update the packaged file names.

Changing Windows Installation Options

The best way to change some of the windows installation setup is setting the “nsis” settings. To do this you need to update the package.json file again. In “build” we will add a “nsis” object to setup the different nsis settings.

Here is an example on how I set mine up.

The “include” will allow us to change the default installation location. For changing the default install location, we first need to add a folder named “build” and in there add a file called “installer.nsh”. The “installer.nsh” file as you can see sets the default installation path.

Here you can see in my example on how I set the default path for installation. If changing the default location isn’t required, then just the “include” line and don’t create the “build” folder and file.

I do have the “allowToChangeInstallationDirectory” set to true so the installer can change the path but will still default to “C:\Program files (x86)”. The installer will create a new folder with the app name if one isn’t created already before installing the files.

Conclusion

You should now be able to update the simple one time pre-setup for a windows. It took me some time to figure out how to do a lot of this simple stuff and hope this resolves some confusion or setup time for others.