Electron is a framework that packages your web application with a copy of Chrome, allowing it to run on a user’s desktop alongside native applications. It’s easy to install, and only requires you to drop in your index.html and other dependencies.
What Is Electron, and How Does It Work?
Electron is essentially a desktop container for your web app. It’s built on top of Chromium, which is the open-source branch of Google Chrome without the Google-specific features. Every time you open an Electron app, it opens a new browser window, except it’s locked to your page loaded from the app’s files, and doesn’t have the URL bar or other browser features. Though, you’ll still have access to Chromium’s Developer Tools for debugging your application.
If the app is snappy enough, you probably wouldn’t even know you were using a webpage instead of a native app.
The great benefit of Electron is that it makes your app cross-platform out of the box. Because it’s all running on a variant of Chromium, and Chromium has builds for Windows, macOS, and Linux, any Electron app can be easily bundled for any OS. You don’t have to worry about compatibility, as the only thing that changes is the base that your app runs on.
Electron is commonly used alongside a web framework like React, Vue, or Angular to make powerful web applications. You have access to the entire npm library, something you don’t have with a regular web app. The packaged Electron app can even be auto-updated just like a real website.
Plus, because Electron loads your web app from a packaged file rather than your servers, load times can be dramatically decreased, as there’s no content sent over the network (besides API calls). Additionally, this takes some load off your servers if most your userbase decides to use the desktop app.
The main downside of Electron compared to a native app is performance. Because it’s essentially opening a new instance of Chrome, Electron apps can use much more RAM than their native counterparts. You also don’t have the speed of low- level languages like C, as everything will be written in JavaScript, though it won’t be any slower than something running in a browser, and it’s not intended to replace applications that need to make full use of the metal.
How to Get Started
Electron is surprisingly easy to set up. While you could install the npm package and import it into a new Node project, the Electron team provides a quick-start project with some of the boilerplate preconfigured. You can also get other templates, such as electron-react-boilerplate, which comes with React preconfigured.
All you’ll need to run Electron is to have Node installed. Then, you can clone the repo:
cd to the project directory, and install Electron and its related dependencies with:
From here, you can run npm start to start the development server, which will open up the default index.html with the Hello World:
You can replace this index.html with your website, and move all of your dependencies over. That’s really all it takes; for example, here’s a Bootstrap template loaded into Electron, working perfectly without touching any code:
Though you could leave it like this, Electron offers other features that make the desktop experience better that you’ll want to configure.
Spicing Up Electron
Many Electron apps choose to forego the default top bar altogether, which gives the application a cleaner look. For example, Slack (which uses Electron and React) doesn’t have the top bar; instead, the content reaches all the way to the top of the window, and space is made for the macOS window controls.
This doesn’t work well on Windows, though; you can still hide the titlebar with frame: false, but it also hides the window controls altogether, making it hard to exit the app natively.
On macOS however, you can achieve this effect by editing the initialization function in main.js, where the browser window is created, and specifying titleBarStyle: ‘hidden’. This property will be ignored by Windows.
Additionally, you can use hiddenInset to put more padding in between the window controls and the edge of the window. Either way, you should probably have something static in that corner (like a sidebar) to prevent it from looking weird while scrolling.
This does disable dragging the window around, but you can add that back manually by creating an invisible div placed absolutely at the top of the screen, and give it the -webkit-app-region: drag; property.
Additionally, you can make use of other system integrations like custom desktop menus, macOS Dock, TouchBar, and Windows Taskbar integrations, and file drag & drop. All of these integrations happen through the Electron API and don’t touch your app’s code unless you want it to.
Building Your App
To actually package your app for production, you’ll want to make use of a tool like electron-builder. You could also manually download Electron’s prebuilt binaries and package it with your app, but the builder is much easier.
Add it to your project:
Specify a build configuration in your package.json (documentation of all the options):
Add your app’s icons, and add the electron-builder script to your package.json for easy use:
Now, when you run npm dist, you app will be packaged into a distributable format.
One thing you’ll want to add (and verify that it works) is auto-updating. Otherwise, you won’t have a way to push changes to users like you would with a regular web application. You can add this feature with the update-electron-app library.
