Electron + React (march 2021)

Приложение на Electron - по сути приложение со своим собственным браузером для отображения контента и интерфейса. Electron отвечает за взаимодействие с операционной системой: свойства окна всего приложения (размеры, границы, цвет  и т.п.), основное и контекстное меню, системный трей, диалоговые окна и т.д.

Логичнее всего использовать этот браузер для SPA (Single Page Application) - одностраничного web-приложения.

Тут же на ум приходят фреймворки для эти самых SPA - React, Vue, Angular, Svelte и т.д.

Я опишу, как создать проект Electron + React, чтобы было комфортно разрабатывать и в конце концов собрать (если до этого дойдёт :-).

Начинающие веб-разработчики тут же сталкиваются с проблемой: "а как это всё запускать-то?"

Задача нетривиальная...

Самый простой способ, который можно найти в Интернет - копировать какой-нибудь соответствующий шаблон (boilerplate) из GitHub. Например, этот.
Но скорее всего, легче не станет - либо много лишнего, либо чего-то не хватает, а то и всё сразу...

Для тех, кто с React уже знаком, я предложу вариант более знакомый - с использованием create-react-app.

1. Создаем React приложение:
       # npx create-react-app <your_app_name>
   
   
2. Устанавливаем необходимые npm-пакеты для запуска Electron и его связи с React приложением во время разработки и правильной сборки:
       # yarn add cross-env electron-is-dev
   и
       # yarn add --dev concurrently electron electron-builder wait-on
   
   
3. Создаем типовой стартовый скрипт Electron - файл main.js в папке, например, electron, которую необходимо создать в корне проекта, - следующего содержания:
   
4. Для корректного запуска Electron в файл package.json yеобходимо добавить следующую информацию (особенно важны последние две строчки):
   "description": "<your project description>",
   "author": "<author of app>",
   "build": {
       "appId": "<com.your_app>"
   },
   "main": "public/electron.js",
   "homepage": "./",
   
   
5. Обновляем скрипты запуска:
   "scripts": {
       "react-start": "react-scripts start",
       "react-build": "react-scripts build",
       "react-test": "react-scripts test --env=jsdom",
       "react-eject": "react-scripts eject",
       "electron-build": "electron-builder",
       "release": "yarn react-build && electron-builder --publish=always",
       "build": "yarn react-build && yarn electron-build",
       "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\""
   },
   
   Скрипт start собирает React приложение и запускает его на 3000 порту без открытия браузера, а после этого запускает приложение Electron с отображением React приложения в главном окне приложения Electron:
       # yarn start
   
   Изменения React приложения отображаются автоматически после их сохранения.
   Если закрыть окно приложения Electron, React приложение продолжает работать и запустить приложения Electron заново можно командой
       # electron .
   

Сборка проекта осуществляется командой
    # yarn build

При этом сборка React помещается в папку build, а дистрибутив всего приложения - в папку dist.