Electron-forge vs. electron-react-boilerplate

Somehow, web technologies conquered the desktop. Countless of today’s most popular applications use JavaScript and HTML. Web tech is either embedded in bigger native applications, like Microsoft Flight Simulator’s JavaScript airplane instruments—or built on top of Electron, like Visual Studio Code, Twitch, Slack, Discord, or Facebook Messenger.

In this article, we’ll look at boilerplates for desktop applications using React and Electron.

What is Electron?

In a nutshell, Electron combines Node.js with Chrome’s rendering engine, enabling developers to build desktop applications with JavaScript and HTML.

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.

Sure, you could wrestle with TypeScript, webpack, and whatever other tools you fancy until they all click, but using a boilerplate might be an easier way to start working on your application.

Electron and React boilerplates: Needs and expectations

Our ideal boilerplate needs to take care of two massive tasks. First, it has to do everything we’re looking for in a “web app” boilerplate. For example, you possibly want to write in TypeScript, use Less or Sass, include all kinds of static assets, and turn your many JSX files into something a web browser can consume. You probably want to use a number of JavaScript dependencies and include those in your application bundle, too.

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.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

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.

Let’s start with the user cost: Some of the dependencies are questionable. Polyfills for modern JavaScript features are slow and unnecessary given that Electron’s bundled Node.js and Chrome versions would execute the non-polyfilled code fine and usually faster.

Right out of the gate, the boilerplate includes about one megabyte of JavaScript. How much of it is actually required largely depends on your personal needs, so it’s possible that some of that code will merely be eating up resources without ever being required.

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.

Much like electron-react-boilerplate, it allows you to immediately start working on your application, already having webpack configured for both process types and setup for bundling JavaScript modules.

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: Full visibility into your production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?

Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.

No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.

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.