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

Conclusion