15 Essential Packages to Get Started With Electron
Node is growing. The list of problems it can solve keeps getting bigger and bigger. What’s one of the most amazing solutions to programming it provides? Electron.
That said, Electron produces a new environment for developers to create in, and gives us new challenges that pull from a variety of modern and classic areas of development, such as Progressive Web Applications and native desktop application development.
We’ve compiled this list of 15 essential packages to give you a starting place to launch your Electron apps into development and get them out as solid, usable production desktop applications in no time.
Build and Package
Electron Packager does what its name suggests - it packages Electron applications for multiple platforms. Once installed and configured, run
electron-packager, and it will output the runnable applications for the target platforms (Windows, OS X + Mac App Store, Linux) that it's instructed to. Distribution of the actual final built and packaged applications is possible.
Electron Builder is a slightly more complex and complete solution to building and packaging Electron applications.
It includes native Node.js module compilation, code signing on a CI server, auto update ready application packaging, eleven target platforms across Windows, OS X, and Linux, and publishing artifacts for GitHub releases.
Electron Builder provides a wide array of tools to make a highly functional, redistributable desktop applications for target platforms out of a pure Electron application.
Nuts is a small, simple proxy for pushing out updates to Electron applications. It uses GitHub Releases as the source of an application’s updates, allowing the entire application and its workflow to be contained within GitHub.
Electron Release Server is an Express-based Node.js web application that enables pushing and managing of an Electron releases through a nice interface. This enables centralization and management of updates through one location.
Squirrel Updates Server is a dockerified Node.js application that facilitates releases of updates to an Electron application via basic endpoints. It’s a simple system, which gives a better option to roll a custom automatic updates stack than Nuts or Electron Release Server.
In case you’re interested in the underlying tool for Nuts, Electron Release Server, and Squirrel Updates Server (or want to roll a completely custom automatic update system), this is the autoUpdater module that’s built-in to Electron. It interfaces with the Squirrel framework that allows automatic updating of applications across OS X and Windows.
User-set Application Configuration
Electron Config is a module that permits simple storage and fetching of user data as a JSON file in a simple way - with eight total commands. From prototyping an idea to large-scale applications, this is an instant configuration tool that’s quick and easy to learn.
Temp handles writing temporary files to the filesystem, and takes care of having them cleaned up when the application closes. A nicety of this is that it’s not just an Electron package - it works with any Node application, and has a similar API to that of the core
Electron’s adaption of the Chrome DevTools web inspector and debugger. It has some nice extra, Electron-specific debugging tools added on top of DevTools.
These include a require graph that provides a visual way to understand an Electron app’s dependencies, an IPC monitor that enables tracking of messages sent between the renderer and the main processes of the Electron application, an Event Inspector that displays events and listeners attached to the Electron core APIs, and an App Linter that checks the Electron application for problems and functionality, with suggested code snippets for the problems it encounters.
Electron Debug enables a few basic debugging concepts, including a DevTools shortcut and window reload. It’s complimentary to the Electron DevTron project, as it automatically enables DevTron once DevTron has been installed with
--save-dev- in an Electron project.
Additionally, if you have any ideas for new debug features that could be useful, Electron Debug is willing to take any ideas and discuss them as additions to the project.
Menubar is a dead-simple boilerplate for creating a Menubar Electron application. The Menubar package is cross-platform (some Linux distros may not be compatible), and has sane default interactions pre-made. This allows fast iteration on a menubar application with little worry about making the user get what they would expect from a native menubar application.
Electron Context Menu gives a drop-in for the missing context menu in Electron. By default, Electron does not have a context menu - Electron Context Menu is aware of text, images, and links out of the box, and gives a quick and easy way to customize context menus for any specific use case.
electron-dl package is an A+ integration of the standard native OS download interaction that could be missed with a non-native application. It automatically saves downloaded files in the user’s
downloads directory, shows download progress on the application icon, and (on macOS) bounces the Downloads directory in the dock when complete.
Spectron is a framework for integrations tests within an Electron application. It’s compatible with any testing library, allows for custom helper commands to be written, allows all Electron windows to be interacted with and tested within one test, provides access to the full Chromium and Electron APIs, and - best of all - can be run completely from within a CI environment.
For an application that is ready to ship, Spectron is an amazing asset. If the application is a small, fun project, Spectron is still an amazing tool to understand and start learning and using to ensure an application doesn’t fail when it isn’t expected to - which, ideally, would be never.
The Electron NodeSchool Workshopper is an easy to run workshopper at NodeSchool that will get you started with the absolute basics of getting up and running with Electron application.
Bonus: Node.js is Everywhere @ Node.js Live in Paris with Mikeal Rogers
One last thing…