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 snippet 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": "^10.1.3"
  }
}

As illustrated above, electron-builder has been added to the devDependencies of this project. You can do the same for your own projects by running:

npm install --save-dev electron-builder

A new script target named dist has been added. This script 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.

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.