Несколько дней назад у меня была возможность создать простое настольное приложение на работе. Цель состоит в том, чтобы быстро и легко реализовать это. Я мобильный разработчик и использую React Native, поэтому изучать C #, C ++ для создания winform - не лучший способ в данном случае.
Наконец, я обнаружил, что Electron, говоря кратко, Electron помогает вам преобразовать ваше веб-приложение в настольное приложение самым простым способом («Если вы можете создать веб-сайт, вы можете создать и настольное приложение» - electronicjs.org).
Поэтому я решил реализовать свое приложение на ReactJS (поскольку оно похоже на React Native), а затем использовать Electron для распространения его в настольной версии.
Сегодня я попробую проделать то же самое с моим предыдущим веб-чатом:
Ознакомьтесь с моим репо в ветке build-electronic, чтобы узнать подробности в конце статьи.
Демо
Давайте начнем
1. Некоторые отличия при выпуске в настольном режиме
С аутентификацией firebase нам нужен авторизованный домен localhost, которого у нас нет в режиме рабочего стола, поэтому я использую метод signInAnonymously() вместо signInWithPopup() и меняю некоторые вещи в файле Login.js, чтобы разрешить пользователю вход с помощью анонимный режим.
Если вы используете response-router-dom для управления навигацией в своем веб-приложении, обратите внимание, что BrowserRouter следует заменить на HashRouter, поскольку вся маршрутизация в приложении Electron больше не обрабатывается на стороне сервера.
2. Установите необходимые пакеты и настройте файл package.json
Сначала запустите эту команду, чтобы установить зависимости
npm i electron-is-dev
electronic-is-dev позволяет узнать, в какой среде работает.
Во-вторых, запустите эту команду, чтобы установить эти пакеты на devDependencies
npm i -D concurrently electron electron-builder wait-on cross-env
одновременно и ожидание: принудительно дождаться запуска сервера, затем открыть окно Electron.
electronics-builder: распространяет приложение Electron.
В-третьих, только для Windows - установите эти пакеты, чтобы исправить ошибку при выпуске сборки с firebase (перезагрузите компьютер, чтобы вступили в силу).
npm --add-python-to-path='true' --debug install --global windows-build-tools npm install grpc --build-from-source
Наконец, такие скрипты в package.json
Использование cross-env BROWSER=none npm start вместо BROWSER=none&&npm start в качестве других инструкций, поскольку команда SET не найдена в macOS.
main указывает на файл конфигурации Electron.
домашняя страница устанавливает домашнюю страницу пакета, в противном случае упакованное приложение не найдет файлы .js и .css.
electronics-dev, если вы хотите запустить окно Electron в режиме разработки.
electronics-pack соберет релиз приложения Electron, пакет будет создан в rootProject / dist. Он создает релиз вашей реактивной сети, а затем использует электронный конструктор для распространения электронного приложения.
3. Config Electron
Создайте файл с именем electronics.js и поместите в общедоступную папку.
В режиме разработки код довольно простой, он создает окно и загружает контент с http: // localhost: 3000. Вот и все.
Теперь, когда вы запускаете свой проект ReactJS (npm start), после запуска сервера запустите electron ., чтобы открыть окно Electron и посмотреть, что произойдет (или просто запустите вместо этого команду npm run electron-dev).
Запустите npm run electron-pack, чтобы распространить настольное приложение.
По умолчанию сборка для текущей платформы и текущей арки. Используйте флаги CLI --mac, --win, --linux, чтобы указать платформы. И --ia32, --x64 указать арку.
E.g:
Для текущей платформы:
"electron-pack": "electron-builder -c.extraMetadata.main=build/electron.js -mwl"
Для MacOS, Windows и Linux:
"electron-pack": "electron-builder -c.extraMetadata.main=build/electron.js",
При успешном построении файл помещается в папку dist с файлом .exe для установки, или вы можете запустить его прямо в папке win-unpacked.
И файл .dmg для установки в macOS или в папку Mac и запускается напрямую.
Были сделаны
В этой статье основное внимание уделяется тому, как создать релизное настольное приложение с помощью Electron из существующего проекта ReactJS. Если вы хотите узнать о коде логики, посетите мою предыдущую статью о создании веб-чата с помощью ReactJS.
Исходный код здесь, в ветке build-electronic
Увидимся в следующий раз 👋
