Rostyslav Moroziuk

Apr 13, 2021

8 min read

Migrate existing Web React App to Desktop App with Electron

What is Electron?

Why did we decide to integrate Electron into our existing React app?

Let’s code!

npx create-react-app <app_name> --template typescript
yarn add react-router-domyarn add --dev @types/react-router-dom
React Basic App

Integrate Electron and run a desktop application

yarn add --dev electron concurrently wait-on
"scripts": {  "start": "react-scripts start",  "build": "react-scripts build",  "test": "react-scripts test",  "eject": "react-scripts eject",  "electron:start": "concurrently \"yarn start\" \"wait-on http://localhost:3001 && electron .\""}
"name": "react-electron","version": "0.1.0","private": true,"main": "electron/main.ts",
Working Electron + React app

What about debugging?

DevTools in Electron
React Fast Refresh with Electron
mainWindow.webContents.on('new-window', (event, url) => {  event.preventDefault();  mainWindow.loadURL(url);});

Build for distribution

yarn add --dev electron-builder
"scripts": {
...
"build": "PUBLIC_URL=/ react-scripts build", "build-electron": "react-scripts build"
...
}
"electron:build": "yarn build-electron && electron-builder build --publish never"
yarn add electron-is
Electron app with BrowserRouter
yarn electron:build
Electron distribution folder
"electron:build:all": "yarn build-electron && electron-builder build --publish never -mwl"
Windows installer
React Electron App on Windows OS

Code signing

  1. Enroll in the Apple Developer Program https://developer.apple.com/programs/enroll/
  2. Generate two certificates: Developer ID Application and Developer ID Installer
  3. Launch Keychain, and go to ‘My Certificates’. Find these certificates and highlight all of them: Cmd+click, right click, and export as p12.
  4. Include this p12 file to build
  5. Add environment variables to build machine https://www.electron.build/code-signing

Conclusion