Building a React Desktop App with Electron
How to build a desktop app using React, Electron and electron-react-boilerplate
If you want to make your website available as a desktop application, you don’t need to build a new application from scratch. You can convert it to a desktop app with the help of the Electron framework. It supports all the latest web technologies like CSS, JavaScript, and HTML and creates a base for your web application so that it can be executed as a desktop application.
There are multiple advantages when using the Electron framework:
- Cross-Platform: Desktop applications are mostly platform-specific, so you’ll need to create one for each platform. However, your Electron desktop application will be compatible with macOS, Windows, and Linux as it is built on node.js and Chromium.
- Open source: It is maintained in GitHub by an active community that supports its features.
- Automatic update: Enables automatic updates of the application on Mac and Windows. Any changes in your electron framework will be updated automatically via update-electron-app. This will ensure that your desktop application runs on the latest framework and platform version.
- Native desktop behavior: Your app will look and behave like a real desktop app with native menus and notifications.
- Crash Reporting: Reports crashes to the remote server.
- Content Tracing: Allows you to trace the data from Chromium or desktop applications in case the application experiences bottlenecks or slowed down operations.
- Windows installer: It provides an electron-winstaller that creates a windows installer to install your desktop application.
Why Build Desktop Apps with React
“Learn once, write everywhere”
“Build once, compose everywhere”
React Native’s slogan is “Learn once, write anywhere”. That is obviously a great advantage of using the same framework for a wide variety of platforms.
But, using React for everything brings forth another great advantage — components can be reused in different apps and pages to help us ship faster and keep a consistent UI. That means you can build your components once and use them for new compositions, even if they are for different platforms.
Bit.dev is a great tool and platform that enable us to do exactly that. It makes it easy to publish React components from any codebase so that each React project, quickly becomes another source for reusable components to use in all other projects.
Bit helps us reuse components across apps, not only by making publishing easier, but also by offering a platform to document, organize, and render our reusable components. That’s important since components that aren’t easily found will not be reused that often.
Applications Built on the Electron Framework
Here is a list of well-known desktop apps built with the Electron framework:
- Visual Studio Code: This is a popular open-source IDE developed by Microsoft.
- Slack: This is a cross-platform chat application used by many companies to manage their messaging and event notification needs.
- Tusk: This is a cross-platform app for managing and organizing notes.
- Mailspring: This is a multi-account email client.
- Skype: Skype is one of the most popular applications for chatting and video calls.
Demo: A simple React Application
To demonstrate the use of Electron for desktop applications, let’s create a simple React web app with two pages. This React application will contain two simple pages that depict a web application.
To install react, make sure you have the latest node.js and npm installed in your machine.
Let’s start by creating a folder to install react and its dependencies. We will install react-dom and react-router-dom to route between our two pages.
Let's create the page — App.js.
This is another page — Profile.js.
Modify index.js to accommodate the pages and navigation.
Once you set up your application, access it on http://localhost:3000/ via a browser to see how the navigation works.
This React app is on a web browser.
Writing your first Electron React application:
Let’s create an electron react boilerplate that can be reused for react applications.
To start, let’s install electron-builder, electron, and wait-on:
1) Electron-builder: It is necessary to have an electron builder for your electron applications. It packages and builds the application to create “ready for distribution” applications for Windows, macOS, and Linux.
2) Wait-on: We will add wait-on to the localhost before we create an electron application. Thus making sure the webpack server runs before the electron app:
Create a new folder as “Electron” and create the main.js file.
Electron-is-dev: This allows you to debug your code during development. It can be used in the main and rendered process.
First, let’s set the dimensions of the BrowserWindow to create a window for our electron app. Next, let’s set up the “startURL”. Before setting the “startURL”, let’s check if the application is running in development mode or production mode. As we are in development mode, let’s set it to localhost.
Set the script to run the application in a browser. Add the ebuild script to build the application, this builds the application in the given path.
“ebuild”: “npm run build && node_modules/.bin/build”Add the dev script, to run the Web app and electron app at the same time. We’ll use the Concurrently package of npm that runs multiple npm commands.
“dev”: “concurrently \”npm start\” \”wait-on http://localhost:3000 && electron .\””,Now set the main field to the startup of the app. The script in main.js will start the application. In case the main file is not added, the application will start from index.js.
“homepage”: “./”,“main”: “./electron/main.js”,
Create a .env file to pass the application environment variables.
//.env
BROWSER=noneYour folder structure will look like the following image after adding the .env file.
This is the entire package.json file:
To run the React application on the browser and in a separate window, run the following command:
npm run devClick on the electron app.
Conclusion
The Electron framework is used by many organizations to deploy their desktop apps. We looked at just one of the Electron boilerplates in this guide. There are many more which offer various features. The important thing to remember is that you no longer need to create a separate desktop app from scratch.
The full codebase of the app demonstrated in this guide is available in this GitHub repo. Make sure to try it out and enjoy the convenience of the Electron framework.
