How to package an app created with Electron and React

These are the steps to package a macOS application. It took me a while to figure out the whole process, I hope it can help someone. 🤘

Build React App

Remember to build the React App before to follow these steps (otherwise you will see a blank screen after packaging the application).

shell
npm run build

Download packager

Go to the project folder and download electron-packager from npm:

shell
npm i -g electron-packager

It's recommended to perform a global installation because electron-packager bash command could be not recognized if not doing so.

Create the icon

You can create a simple .png of a minimum resolution of 512 x 512 px and convert it to .icns using CloudConvert.

Place the Logo.icns into the project folder.

Package the app

Run this command from the project folder:

shell
electron-packager . --overwrite --platform=darwin --arch=x64 --icon=Logo.icns --prune=true --out=release-builds

You will have a new folder release-builds with your packaged application.