In this article, we’ll look at boilerplates for desktop applications using React and Electron.
What is Electron?
Its secret power is the ability to extend the functionality of web technologies with native code; wherever your web app bumps against the confines and constraints of a web browser, Electron allows you to work with Node.js, even allowing developers to directly write C, C++, Objective-C, or Rust.
React has a proven track record of being a solid choice for applications. However, it’s 2021 – and most web apps aren’t written the way they’re executed.
Transpilers, compilers, and bundlers are almost expected, so whenever you’re starting to write a new Electron application, you’re asked to arrange your many web tools in a way that’ll work well with Electron.
Electron and React boilerplates: Needs and expectations
Then, we need to take care of the Electron side of things. We need our app to have a main process entry point — and a different entry point for the renderer processes.
If the difference between the two process types is new to you, check out Electron’s Quick Start Guide because understanding how Electron handles your application will be important later on and make working with any given boilerplate a whole lot easier.
In other words, our Electron boilerplate will contain multiple entry points, unlike a traditional web app. Then, we need our boilerplate to perform the many compilation operations required for building a proper desktop application.
We need to compile binaries for all our target operating systems, possibly code-sign those binaries so that macOS and Windows don’t display nasty warnings, and create installers. Oh, and we want our app to auto-update itself.
Lastly, we don’t want the boilerplate to lock us into any bad practices. This is particularly relevant to the Electron side of things. Desktop applications are powerful software, have access to the entire machine, and need to consider security more than pure web apps.
Using electron-react-boilerplate as a boilerplate
Going by raw numbers, electron-react-boilerplate has won hearts and minds. With more than 16,000 stars on GitHub, it’s currently the most popular boilerplate choice. It combines TypeScript, Babel, webpack, and eslint, handling Electron’s compile and package operations by utilizing electron-builder.
Upon inspecting the boilerplate a little closer, we can see why you’d want to choose it. webpack is already configured to handle both “main” and “renderer” process entry points, understands which dependencies are needed where, and creates bundles.
As of the time of writing, dependencies have been kept mostly up-to-date. Pre-configured code takes care of debugging, logging, and auto-updating. The packager CLI, electron-builder, is already set up to spit out binaries and installers for all operating systems.
If you’re merely looking to start building your application without worrying about how the internals work, this boilerplate will have you writing code within minutes — without asking you to think at all about the build process.
# Clone the boilerplate: git clone --depth=1 \ https://github.com/electron-react-boilerplate/electron-react-boilerplate \ your-project-name cd your-project-name # Install dependencies with yarn: yarn
All that pre-configured convenience comes at a cost though, both to you, the developer, and to the users of your app.
As for the developer cost, check out the electron-builder, which advertises itself as “a complete solution to package and build a ready-for-distribution Electron app”.
That’s accurate. This tool will take care of virtually all aspects of compiling a cross-platform app, hiding all of the underlying complexities from the developer. As such, it’s a bit of a one-size-fits-all solution, making many decisions for the developer.
To abstract away these complexities, the team behind electron-builder has forked and modified many of the original tools and packages provided by the Electron maintainers.
When you’re merely trying to prototype, such a one-size-fits-all solution lets you focus on the creative aspect of coding your app. However, once your app grows a little, you’ll sooner or later run into scenarios that require advanced customization of the build process.
Abstracted away, it’ll be hard for you to make those changes. As many of electron-builder’s internal packages and dependencies differ from the official Electron ones, you might be getting security updates and bug fixes later, never, or encounter an entirely different set of bugs altogether.
When the Electron team recently embarked on the major project of getting Electron ready for Apple’s new “Apple Silicon” processor, it did that work for its own maintained packages.
For that reason, you’ll find most of the bigger Electron applications forgoing the convenience of electron-builder for more control over the build process.
Whether you want to take the shortcut or invest in a more solid build foundation now is up to you, your project’s needs, and your curiosity in how an Electron app is packaged. If you do want to take that shortcut, you can stop reading here, use electron-react-boilerplate, and build the next big thing!
Using electron-forge as a boilerplate
If you’ve made it this far in this article, you’re interested in a boilerplate that’ll let you use the official Electron tools and packages and allow you to control the build process. To build, package, and auto-update apps, the Electron maintainers offer dozens of individual small packages, all responsible for an important step in the process.
As an example, electron-installer creates installers for Windows while electron-notarize takes care of notarizing a built .app bundle with Apple’s Gatekeeper services. Slack’s build process makes use of about ten of these packages, orchestrated with dozens of custom build files.
The whole idea of a boilerplate is that you don’t want to know about all those dependencies and don’t want to think about “dozens of custom build files”. You want to focus on your application.
A good compromise between configurability in the future and convenience today is electron-forge, a set of CLI tools orchestrating the many official Electron packaging tools.
yarn create electron-app my-new-app --template=typescript-webpack
The “typescript-webpack” template provided by electron-forge contains features TypeScript, webpack, eslint, and the latest version of Electron and its various packaging tools.
Notably missing is React though. Luckily, adding React to our project takes less than two minutes, a time investment that’s absolutely worth the benefit of using electron-forge. Start by adding dependencies:
yarn add react react-dom yarn add @types/react @types/react-dom --dev
Then, in “tsconfig.json”, add support for the JSX file format by adding a
"jsx": true to your
compilerOptions. That’s it! You now have a working boilerplate featuring React, TypeScript, ESLint, webpack, and are ready to conquer the world.
Electron-react-boilerplate vs. electron-forge
You might be thinking, “Just tell me which one to use.” Well, I manage one of the two teams maintaining Electron, have worked on and with Electron for years, and have built a number of Electron applications (Slack, windows95, macintosh.js).
If you want a single recommendation, I’d tell you to go with electron-forge. Yes, it’ll ask you to learn more about the inner workings of Electron than the most popular option out there, but I personally guarantee that the additional understanding of how an Electron app works will allow you to write an app that’s more performant, secure, and stable. If and when you have questions, join the community of Electron developers on our newly opened Discord server.
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.