Установка Electron React без глютена [ft. live reload]

Есть много хороших электронных шаблонов и генераторов cli. Я пробовал большинство из них при настройке базы для HTTPSLocalhost (самый быстрый способ запустить https локально).

Оказывается, у них либо отсутствует базовая функциональность, либо есть избыточные функции.

Другая проблема заключалась в том, что большинство электронных установок решают создание электронных приложений как узловых приложений. Я хотел, чтобы это было больше похоже на создание приложений для реагирования. Я искал опыт работы в CRA.

В этой статье рассказывается, как настроить электронное приложение:

• с приложением create-react-app
• живая перезагрузка для основного процесса (т.е. собственный интерфейс api)
• горячая перезагрузка модуля для процесса рендеринга (т. е. пользовательского интерфейса)
• нет конфигураций веб-пакетов (и нет извлечения)

Структурирование вашего приложения

Мой первоначальный подход был похож на эту статью, где у меня был только один package.json. Когда мое приложение росло, было неестественно держать электрон внутри реагирующего src.

Было очевидно, что электрон заслужил собственный модуль. Приложение, которое мы собираемся создать, будет иметь два пакета: основной и рендерер.

Думайте о main как о вашем бэкэнде, а о рендерере как о вашем интерфейсе.

Шаг 0: Создайте пустую папку для хранения приложения

$ mkdir electron-app

Шаг 1. Создайте приложение для визуализации реакции

Внутри каталога электронного приложения используйте create-react-app cli, чтобы создать приложение для рендеринга.

$ cd electron-app
$ create-react-app renderer

Я стараюсь заменить стандартные скрипты create-response-app package.json следующими:

"scripts": {
  "start": "BROWSER=none NODE_PATH=./src react-scripts start",
  "build": "NODE_PATH=./src react-scripts build"
}

BROWSER=none сообщает, что при запуске приложения браузер не запускается. NODE_PATH=./src помогает нам импортировать модули с абсолютными путями.

Шаг 2. Создайте главное электронное приложение

Основное приложение само по себе является пакетом. Создайте новую папку в электронном приложении и запустите там пакет.

$ cd ..
$ mkdir main
$ cd main
$ yarn init
$ yarn add electron --dev

На этом этапе ваша файловая структура должна выглядеть как на изображении ниже.

Шаг 3. Настройте основной процесс

Теперь нам нужен основной процесс для запуска электрона. Я скопировал свой main.js из образца по умолчанию, удалил комментарии и настроил его для загрузки React UI (вместо статического файла html).

Создайте файл electron-app/main/src/index.js и добавьте в него следующий код. Чтобы узнать, что делает скрипт, проверьте комментарии к исходной версии.

const {app, BrowserWindow} = require('electron');
let win;
function createWindow () {
  win = new BrowserWindow({
    width: 800, height: 600, transparent: false,
    webPreferences: { // <--- (1) Additional preferences
      nodeIntegration: false,
      preload: __dirname + '/preload.js' // <--- (2) Preload script
  }});
win.loadURL('http://localhost:3000'); // <--- (3) Loading react
  
win.webContents.openDevTools();
win.on('closed', () => {  
    win = null
  });
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
});

Наша версия отличается от оригинала тремя способами:

1. У нас есть дополнительные настройки, которые подавляют некоторые предупреждения на консоли.
2. У нас есть специальный скрипт предзагрузки
3. Мы используем реактивный URL-адрес веб-пакета вместо статического index.html.

Мы сказали электрону загрузить сценарий предварительной загрузки, но мы его еще не создали.

Шаг 4. Создайте сценарий предварительной загрузки

Это необходимо, чтобы открыть электронный API внутри приложения React. Это позволяет вашему пользовательскому интерфейсу взаимодействовать с собственными электронными API-интерфейсами (также известными как межпроцессное взаимодействие или ipc). Нам это понадобится по мере того, как наше приложение становится все сложнее. А пока просто добавь это. Пожалуйста.

Создайте файл electron-app/main/src/preload.js. Добавьте к нему следующую строку.

// preload.js
window.electron = require('electron');

В идеале вам не нужно выставлять электронный пакет как глобальную переменную. Вы можете просто импортировать его как обычный модуль, но импорт электрона в response выдает ошибку. Это поможет вам обойти проблему.

Шаг 5. Добавьте скрипты электронного запуска

Перейдите к main/package.json и добавьте следующий скрипт.

"scripts": {
  "electron": "electron src"
},

Также обновите основной package.json и определите расположение индексного файла, добавив основную точку входа. Это важно для работы вышеуказанной команды.

{
  ...
  "main": "./src/index.js",
  ...
}

Шаг 6. Проверьте свою настройку

На данный момент у вас есть полностью работающая установка. Вам нужно запустить сервер приложения create-response-app и электрон в двух разных терминалах.

$ cd electron-app/renderer
$ yarn start

В другом терминале:

$ cd electron-app/main
$ yarn electron

И через несколько секунд вы увидите окно с целевой страницей create-react-app. Нечто похожее на скриншот ниже.

Молодец товарищ. Вы только что создали свое электронное приложение.

Включение автоматической перезагрузки

Часть вашего приложения, отображающая рендеринг, автоматически перезагружается, а основная часть - нет. Автоматическая перезагрузка безумно улучшает DX. Мы будем использовать nodemon для перезапуска электронной оболочки каждый раз при внесении изменений.

Шаг 7: Установите nodemon в основное приложение

$ yarn add nodemon

Шаг 8: Добавьте основной скрипт package.json для наблюдения за электроном

Это говорит nodemon убивать и перезапускать электрон каждый раз, когда изменяется файл внутри src или ..

{ ...
  "scripts": {
    "electron": "electron src",
    "start": "NODE_ENV=dev nodemon --watch ./src/**/* --watch . --exec 'yarn electron'",
  },
 
  ...
}

Примечания

• Я не использую Babel для электронной стороны вещей. Следовательно, мы не можем использовать синтаксис import в электронном коде. И вместо export нам нужно использовать module.exports. Большинство других конструкций, таких как let, const, map, reduce etc, прекрасно работают без babel.
• Создание приложения React с помощью Electron очень похоже на создание обычного пользовательского приложения API.

Привет, если вам понравилась эта статья и вы хотите быть в курсе, подпишитесь на меня: Medium, Github или Twitter

Вам также может понравиться:

• Как встроить базу данных в электронное приложение
• Представляем Eiphop - электронную оболочку IPC [хорошо подходит для приложений React]
• Доставка исполняемых файлов с вашим приложением Electron
• Fractal - структура приложения React для бесконечного масштаба

Ta.