Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Electron: The Boring Parts

Electron: The Boring Parts

Packaging Electron apps using electron-forge

Ana Betts

June 26, 2017
Tweet

More Decks by Ana Betts

Other Decks in Programming

Transcript

  1. Hi!

  2. What this talk is not • This talk will not

    tell you how to write your Electron app, or how Electron itself works • Lots and lots of great talks about this, I recommend Jessica Lord’s Essential Electron (http://jlord.us/essential-electron) to learn more
  3. We’re gonna go over all the other stuff • How

    to set up a project so that you can use the latest web technologies such as React, Angular, ES2017+async/await, and TypeScript • What even do Desktop apps look like in 2017 on different operating systems? • How to package up your app and give it to others, and how to build your app for production • How to set up automatic updates so that users always have the latest version of your app
  4. Introducing electron-forge • Brings together all of the separate tools

    in the ecosystem into one great command-line build system • Handles setting up new projects à la create-react-app • Packaging, compilation, and publishing are all handled
  5. Windows 10 • Modern Windows users use Windows 10, which

    unlike previous releases, is more like a service or website – new features show up for free • Major updates are free, and have weird names: “Original release => Anniversary Update => Creators Update => Fall Creators Update” • You can download apps via the Windows Store (similar to the Mac App Store), or via a standalone installer that you run
  6. Squirrel for Windows • Squirrel.Windows is the installer and update

    framework that most Electron apps use though they’re not required to. • Written by yours truly! • Squirrel.Windows’s goal is to do as little as possible to get your app running from the moment users click “Install” • Update policy is controlled by your app, and by default is designed to be silent and in the background
  7. AppX (Centennial) applications • You can ship your app in

    the Windows App Store, or distribute it as a standalone package, whose extension ends in .appx • Your apps run in a sandbox, but not nearly as restrictive as macOS or mobile • Users can install AppX files, but there’s no built-in easy way to do updates of that app which is a bummer
  8. macOS • macOS applications are typically distributed as Zip files,

    easy peasy! • Mac apps can also be distributed via the Mac App Store, but your app must live in a restricted sandbox and some Electron features are disabled as a result. • Apps are self-contained, but you get no notification of install/uninstall so no way to clean up
  9. Squirrel for Mac • Squirrel.Mac is the library that most

    Electron apps use to update (obvs there is no install step for macOS apps) • While it shares the same name as Squirrel.Windows, its design is very different. I tried to convince them! • Squirrel.Mac will update your app in the background, wait for it to exit, then move it to the new version
  10. Linux • There are so many ways to package and

    update Linux apps, but we’ll focus on the most common one, a Debian Package • Users download your package and install it via the UI, or via the dpkg command • Commercial apps typically set up an Update Repository and configure it on users’ systems. Updates are Not Easy at the moment. Room for improvement!
  11. electron-forge uses your package.json • Lots and lots of options

    to change, check the GitHub page for electron- forge • Sometimes you need to click the link to go to the backing library’s GitHub page to see options (i.e. electron-winstaller, electron-windows- store). Confusing! • electron-forge does its best to fill out everything with the sanest default, taking from other fields in package.json if it can, you don’t have to fill out everything
  12. The auto-update module • Electron module that interfaces with Squirrel.Windows/Mac

    • Easiest thing to do is to just update the app in the background • API also lets you be more visible about updates, choose to cancel them • If you need more flexibility, both Squirrel.Mac and Squirrel.Windows have super super simple server-sides, easy to implement custom policy
  13. Installation and updates on Windows • electron-forge will generate some

    files for you, you can copy all of these files directly to an S3 bucket. Bam, you’re done! • For small / internal projects, you don’t need to sign your application, but if you distribute something to the public, you need to sign it. Google for “Authenticode Certificate” and don’t pay more than $100/yr • Squirrel will notify your app on install/uninstall with a special command-line param, you must handle this!
  14. Squirrel Hooks • Squirrel will invoke your app with special

    parameters: • --squirrel-install 1.2.3 • --squirrel-uninstall 1.2.3 • --squirrel-updated 1.2.3 • --squirrel-obsolete 1.2.3 • You must immediately exit once you finish! • At minimum, you should create a start-menu shortcut. Squirrel.Windows will do this for you if you ask it
  15. Debugging Squirrel.Windows • On initial install, Squirrel.Windows will write a

    log to C:\Users\NAME\AppData\Local\SquirrelTemp • Your app itself will end up in C:\Users\NAME\AppData\Local\PACKAGE_ID • The log file for updating will end up in C:\Users\NAME\AppData\Local\PACKAGE_ID\SquirrelSetu p.log
  16. Installation and updates on macOS • macOS apps generally must

    be signed with an Apple signature to distribute apps for production because of Gatekeeper, this means you have to pay $100/yr to Apple • On your local machine, you can disable Gatekeeper, or if you right-click on an app => “Open”, you can one-off disable it • Your apps that are packaged as zip files don’t run in the sandbox by default
  17. Signatures on macOS • Xcode will give you several different

    kinds of certificates to sign your application: • A Developer certificate – works for your machine, nobody else’s. Every developer in a company will sign this, it will have your name on it • A Developer ID certificate – use this for distributing apps on your own. It will have your company’s name, and you can only download it exactly once (save the file!) If you lose this, you must contact Apple • Mac App Application / Installer certificate – this is solely for the App Store, even though it sounds like it’s what you want
  18. Signatures on macOS • Keychain utility will let you import/export

    certificates • The command line security tool will let you list signing identities, import files when the UI Keychain utility fails for no reason, etc etc • electron-forge will try to find the most appropriate signature type automatically, but if you have multiple identities you may have to specify it in your package.json
  19. Updates on Squirrel.Mac • Unlike Squirrel.Windows, Squirrel.Mac really wants to

    connect to a server that will tell it whether it should apply updates • This is a real bummer, so @felixrieseberg and I wrote some code we use for Slack to solve this, which allows you to host Squirrel.Mac updates on a simple file server like S3, https://github.com/felixrieseberg/electron-squirrel-s3 • We’re going to try to clean this up a bit more, but the idea is you have a simple JSON file alongside your released Zip packages
  20. Debugging Squirrel.Mac • It sucks. Gotta make sure your signature

    is the same as the production one, so no signing with your dev cert • Running your app directly from Terminal will give you some helpful debugging things, /path/to/Myapp.App/Contents/MacOS/Myapp (some things will act a little wonky when you do this, beware) • Make sure to handle errors thrown by auto-update framework
  21. Installation on Linux • Debian packages have a file called

    “control”, which describes what other C libraries that it needs • Native node modules often have C library dependencies on Linux, make sure to test on a clean machine! • Your app shortcut is created via a “.desktop” file. This sets up many other things, such as file associations or protocol URLs