Electron apps

Distributing an Electron application for Linux that reached the widest possible audience was historically difficult. How applications are packaged and delivered varies from distribution to distribution. There was no built-in mechanism for notifying users of available updates.

Snaps address these issues and enable you to produce a Linux version of your app with minimal changes to your package.json.

What benefits do snaps bring to Electron apps?

• Snaps are easy to discover and install. Millions of users can browse and install snaps graphically in the Snap Store or from the command-line.
• Snaps install and run the same across Linux. They bundle Electron and all of your app’s dependencies, be they Node modules or system libraries.
• Snaps automatically update to the latest version. Four times a day, users’ systems will check for new versions and upgrade in the background.
• Upgrades are not disruptive. Because upgrades are not in-place, users can keep your app open as it’s upgraded in the background.
• Upgrades are safe. If your app fails to upgrade, users automatically roll back to the previous revision.

Do you have five minutes to get started?

Ready to get started? By the end of this guide you’ll understand how to make a snap of your Electron app that can be published in the Snap Store, showcasing it to millions of Linux users.

Diving in

The following is the typical process for running and building the Electron quick-start example:

# Clone this repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start

# Install dependencies
npm install

# Run the app
npm start

In the example above, the electron-builder tool extends the pre-existing package.json file to produce Linux, macOS and Windows builds of the quick-start app.

The package.json file can be easily extended to automatically create a Linux snap alongside the other builds. For example, adding the following scripts and devDependencies snippets to the package.json in the Electron quick-start example is all that’s needed to generate a Linux snap:

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder --linux snap"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^11.2.1", 
    "electron-builder": "^22.9.1"
  }
}

As illustrated above, electron-builder has been added to scripts and devDependencies of this project. As well as being added manually, the devDependencies requirement can be added with the following command:

npm install --save-dev electron-builder

The script snippet named dist calls the build command from electron-builder and instructs it to build a Linux snap.

 "scripts": {
    "start": "electron .",
    "dist": "electron-builder --linux snap"
  },

You can execute this script by running:

npm run dist

This will work even if you are running Mac or Windows. electron-builder is capable of building Linux snaps from any operating system.

You should now see a .snap file in the dist/ directory.

Repackaging from pre-built binaries

If you want to make a snap of a pre-built binary, from deb or tar release files, you can do that too.

For example this is how Discord is packaged as a snap

discord:
    plugin: dump
    source: https://dl.discordapp.net/apps/linux/${SNAPCRAFT_PROJECT_VERSION}/discord-${SNAPCRAFT_PROJECT_VERSION}.deb
    source-type: deb
    override-build: |
      craftctl default
      sed -i 's|Icon=discord|Icon=/usr/share/discord/discord\.png|' ${CRAFT_PART_INSTALL}/usr/share/discord/discord.desktop
    stage-packages:
      - libatomic1
      - libc++1
      - libnspr4
      - libnss3
      - libxss1
      - xdg-utils
    prime:
      - -usr/share/discord/chrome-sandbox
      - -usr/bin/xdg-open

We set the source to the official deb file that is released by Discord, and then remove the chrome-sandbox, as we do not need to enable browser-sandbox in simple electron apps.

For more help checkout the snap manifest for Discord.

Next steps

That’s it. You now have a package.json file that can be used to build a snap. To upload your snap and share it with your users, see Releasing your app.

---

Last updated 30 days ago.