The Rise of Web Technologies on the Desktop
Web technologies have taken the desktop by storm, with many popular applications relying on JavaScript and HTML. From Microsoft Flight Simulator’s JavaScript-powered airplane instruments to Visual Studio Code, Twitch, Slack, Discord, and Facebook Messenger, which are all built on top of Electron, web tech is everywhere.
Electron: The Power Behind Desktop Applications
At its core, Electron combines Node.js with Chrome’s rendering engine, enabling developers to build desktop applications using JavaScript and HTML. Its secret power lies in its ability to extend web technologies with native code, allowing developers to work with Node.js and even write C, C++, Objective-C, or Rust when needed.
The Need for Boilerplates
With React being a solid choice for applications, getting started with a new Electron project can be overwhelming. Transpilers, compilers, and bundlers are a necessity, making it essential to find a boilerplate that works well with Electron. A boilerplate can save time and effort, but it’s crucial to choose the right one.
Electron and React Boilerplates: Needs and Expectations
Our ideal boilerplate needs to handle two massive tasks. First, it must do everything we expect from a “web app” boilerplate, including writing in TypeScript, using Less or Sass, and turning JSX files into something a web browser can consume. Then, it needs to take care of the Electron side of things, including multiple entry points, compilation operations, and auto-updating.
electron-react-boilerplate: A Popular Choice
With over 16,000 stars on GitHub, electron-react-boilerplate is a popular choice among developers. It combines TypeScript, Babel, webpack, and eslint, handling Electron’s compile and package operations using electron-builder. While it provides a convenient way to start building an application, it comes with some drawbacks, including questionable dependencies and a large JavaScript footprint.
electron-forge: A Better Alternative
For developers who want more control over the build process, electron-forge is a better alternative. It’s a set of CLI tools that orchestrate the official Electron packaging tools, providing a good compromise between configurability and convenience. The “typescript-webpack” template provided by electron-forge contains features like TypeScript, webpack, eslint, and the latest version of Electron and its packaging tools.
Adding React to electron-forge
Adding React to an electron-forge project is relatively easy, requiring only a few minutes of setup. By adding dependencies and configuring the “tsconfig.json” file, you can have a working boilerplate featuring React, TypeScript, ESLint, webpack, and more.
electron-react-boilerplate vs. electron-forge
So, which one should you use? While electron-react-boilerplate provides a convenient way to start building an application, electron-forge offers more control over the build process and is a better choice in the long run. With electron-forge, you’ll have a more performant, secure, and stable application.
Join the Electron Community
If you have questions or need help with your Electron project, join the community of Electron developers on our newly opened Discord server. With the right tools and knowledge, you can build a desktop application that rivals the best.