Skip to content

Instantly share code, notes, and snippets.

@popey
Last active February 17, 2021 15:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save popey/7803cfbda9b337fab792c403e50e4709 to your computer and use it in GitHub Desktop.
Save popey/7803cfbda9b337fab792c403e50e4709 to your computer and use it in GitHub Desktop.
Package an Electron application as a snap

We have identified a number of electron-based desktop applications which already have builds for Linux, but are not yet easily available in Ubuntu. The goal of this task it to select one of those applications and update the build system to add snap support.

Preparation:

Many of these applications require a newer version of node/npm to build than is available in Ubuntu. We recommend using Ubuntu 16.04 machine, virtual machine or container. Please do not do this task on a 17.10 system, but use 16.04.

In that 16.04 system, install node/npm from upstream nodesource as detailed at https://github.com/nodesource/distributions#debinstall

You may also want to go through the electron guide, to ensure your system is configured correctly to build electron applications successfully. https://docs.snapcraft.io/build-snaps/electron

Steps for this task

This is a high level view of the steps, more detail is provided in the "Guide" section below.

  1. Pick an application from the following spreadsheet https://docs.google.com/spreadsheets/d/15Cd1Ku2V8TLXHoKAkcgvHCkAsm3Ki1QGDrpHzqMgox4/edit#gid=0
  2. In the spreadsheet, place your name/nickname in column B to claim the application
  3. Claim this task in Google CodeIn and paste a link to this task in column C (this is to ensure two CodeIn students do not work on the same application at the same time)
  4. Go through the guide below, to enable snap build support
  5. Build a snap of the selected application and test that it works as expected
  6. Create a pull request against the upstream project to add snap support to their existing builds.
  7. Submit this CodeIn task for review

Guide

Get the code locally to work on

  1. Fork the repository on github with the fork button
  2. Clone your fork of the repository to your local machine
  3. In the directory create a new branch git checkout -b add-snap-support

Add snap support

  1. Update the version of electron-builder to “^19.53.0” in devDependencies- this builds a better snap than previous releases. Really old releases don’t support snap building by default, so it’s always good to bump this.
  2. Modify the package.json to add the necessary stanza to enable linux snap support Typically that can be as simple as ensuring something like this is added, where a deb target already exists. Do not remove targets. :-
   "linux": {
      "target": [
      "snap",
      "deb"
      ]
    },

Build the snap

  1. Run npm install to install the dependencies
  2. Run npm run dist (or appropriate script which is listed in the ‘scripts’ section of the package.json).
  3. If successful this will typically build a snap in dist/ or release/
  4. Install the snap on your machine with snap install dist/applicationname.snap --dangerous
  5. Test the snap via the launcher
  • Things to check for:-
    • Does an icon appear in the launcher?
    • Does the application launch correctly and behave as expected
  • Test the snap via the command line with snap run snapname
    • Does the application run as expected?

Note: It is crucial at this stage to confirm that the application launches and runs correctly with fonts rendered correctly, and the application functions as expected/documented upstream.

Commit the changes upstream

Ensure you check with the upstream project if there are any guidelines which you must follow for contributing. Some projects require a particular format for pull requests, or require contributors to sign a contributor agreement. Check this.

  1. Stage your changes - git add package.json (and any other files you change/add)
  2. Create a good commit message - git commit -m “Add support for snapcraft”
  3. Push your changes to your fork on github - git push https://github.com/<your_github_id>/<appname>
  4. Create a pull request - Visit your fork on github and press the ‘Create pull request’
  5. Write a pull request which has text similar to the following gist (raw markdown), ensuring links "NAME" and "VERSION" are updated correctly. Here are some further examples which contain the modified pull request text, and the actual patches.

Finally, add the link to the pull request to the task before submitting it

Common issues

  • Sometimes newer electron-builder requires that itself and other dependencies need to be moved between ‘dependencies’ and ‘devDependencies’. Typically electron-builder should move to ‘devDependencies’
  • Sometimes bumping the version of electron-builder isn’t sufficient, and other modules will need their versions bumping up too. Don’t be tempted to update them all, only those that cause errors.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment