Use electron-packager

Now that we have installed electron-packager, we’re ready to use it. We could type out the entire command every time, but it’s best practice to add a build script to the package.json file. This means that every time we run the default build script, our specific list of commands will be run.

gif of following the directions below

  1. In the package.json file, add the following script in “scripts” of package.json.

     "build": "electron-packager . electron-app --all --overwrite"
    
  2. In the src/index.js file, the first line is pre-populated by electron-forge and doesn’t play nicely with electron-packager. Replace the first line with:

     const { BrowserWindow, app } = require('electron');
    
  3. Run the new build script with: npm run build
  4. If this doesn’t work for you, check out the troubleshooting steps below.
Help me troubleshoot

There are some inconsistencies between electron-packager and the most recent version of node. If the steps above didn’t work for you, try using node 6.11.2 with npm 3.10.10. The following steps should help you do this on macOS.

Note: We’re using nvm here instead of n, or other version manager tools. If you can duplicate successful steps to adjust your node version, please do so (and good luck!).

macOS

  1. Type brew cask install xquartz
  2. Type brew install wine
  3. Type brew install nvm
  4. Type nvm install 6.11.2
  5. Type nvm use 6
  6. Use the npm run build command again, and everything should work!
    • WARNING – It might take a long time to build the win32 package. Leave this for 5-10 minutes and return.
Tell me why

When we use electron-packager, we have some options about how and what we build the applications.

The typical form is:

    electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

However, when we use the --all flag, electron-packager creates bundles for all valid combinations of target platforms/architectures.

Stuck? Open an issue in the repository for this class and mention @githubteacher for help from one of the GitHub trainers!
Continue