Electron apps

doc
1

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.

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.

2 Likes
2

Again there’s no external links to “continue”.

3

You’re absolutely right. We need to fix these references, and I’m sorry they’ve been left hanging for so long. I know you’ve seen Snapcraft build, debug and publishing docs roadmap, but this will fix these continuity issues in the building docs, and we’re working on creating those docs right now.

1 Like
4

To get this to work I had replace:
"dist": "build --linux snap"

with:
"dist": "electron-builder --linux snap"

(from https://www.npmjs.com/package/electron-builder)

Also, +1 on the “Continue on to learn how…” part.

1 Like
6

@degville ping on:

`"dist": "build --linux snap"`

to:

`"dist": "electron-builder --linux snap"`

Thanks!
7

Thank you! I’ve updated this, and also taken the opportunity to update the example and test the output. :+1:

2 Likes
8

Get it working when added “electron-builder” to devDependencies:

  "devDependencies": {
    "electron": "^11.2.1",
    "electron-builder": "^21.2.0"
  }

@degville I’ve probably missed something

1 Like
9

Thanks for looking into this and for your solution - I just ran through the same script and you’re correct. I’ve updated the docs to reflect the electron-builder dependency.

10

I would recommend changing this part " * Upgrades are not disruptive. Because upgrades are not in-place, users can keep your app open as it’s upgraded in the background." It’s true that it updates in the background and copies the files to the new snap folder, but as of today when the update is done… it force kills the running snap and reloads the new version. That’s extremely disruptive and crashes systems that are not ready for a hard disconnect. We have been asking for a long time to no switch to the updated folder until the snap is manually restarted or the system is rebooted.