Недавно мне было поручено перестроить внутренний веб-проект в настольное приложение. Для человека, использующего такие вещи, как Nylas, Hyper и Atom, решение казалось довольно очевидным: Electron. Для тех из вас, кто не знаком с Electron, это фреймворк для настольных приложений, который позволяет создавать приложения с использованием Javascript для клиента. Это означает, что те из нас, кто знаком с React или другими JS-фреймворками, могут перейти в сферу рабочего стола без особых накладных расходов. Нельзя сказать, что все обошлось без проб и ошибок.
Есть много стартовых комплектов и приличное количество руководств, но на самом деле не так много, что связывало бы все это воедино. Есть шаблон электронного реагирования, который, на мой взгляд, не является шаблоном, потому что все приложение обернуто вокруг redux (то есть, если вы не знаете redux или не хотите его, его действительно довольно сложно удалить). Я также попробовал meteor-desktop, потому что мне нравится Meteor, и думал, что все будет довольно гладко, пока я не попробую добавить Auth. Итак, вот и мы, я написал очень простое приложение Electron с нуля с некоторой помощью из руководств Auth0 React и Electron, которые я также настоятельно рекомендую прочесать.
Начиная
Вы можете перейти к концу и загрузить рабочий репозиторий или выполнить процесс здесь, имейте в виду, что вам нужно будет выполнить некоторую настройку на панели инструментов Auth0, а также в консоли разработчика Google.
Установите Электронный стартер, откройте его в своем любимом текстовом редакторе и запустите приложение. Поздравляем, вы теперь разработчик настольных приложений :).
Теперь давайте установим все зависимости, я хочу отметить, что Auth0-lock, который мы будем использовать для нашей аутентификации, доставил мне некоторые проблемы, живя внутри Electron, и в итоге я установил некоторые из его dep прямо в свой package.json .
Мой package.json
Вы заметите, что на самом деле мы собираемся использовать заранее собранный электронный пакет вместо электронного пакета. Я также включил упаковщик, потому что в конце мы собираемся упаковать приложение, чтобы другие люди могли его загрузить!
Далее мы собираемся настроить конфигурацию нашего веб-пакета.
Довольно прямо, мы используем HotModuleReplacementPlugin, мы также используем response и es2015 в нашем загрузчике, чтобы мы могли скомпилировать наш код реакции. Я также включил загрузчик sass, но если вы предпочитаете что-то еще, не стесняйтесь изменять его по своему усмотрению. Имейте в виду, что файл output / devServer будет использоваться только в процессе разработки, а производственная конфигурация будет немного отличаться.
Теперь давайте подготовим наш файл Index.html для среды живой перезагрузки и загрузим наш код React.
Мы выводим исходный код скрипта в зависимости от среды (это происходит в нашей команде npm run start. Теперь давайте создадим src/app.js файл в нашем корневом каталоге:
Время перерыва - вперед и вперед
Хорошо, мы сделали кучу вещей и пока ничего не видим working, так что давайте запустим этот плохой boi. Откройте свой терминал и перейдите в корень проекта. Запустите npm run build, чтобы создать каталог начальной сборки. После этого вы можете просто запустить npm run watch, и он будет следить за всеми вашими файлами в каталоге src. Теперь оставьте это включенным, откройте другую вкладку / окно терминала и запустите npm run start, чтобы запустить электрон. Вы должны увидеть следующее:
Теперь у нас есть электронное приложение с запущенными HMR и React. Вы можете внести изменения в свой компонент приложения, и он обновится внутри Electron!
React Router Time
Опять же, если вы не хотите использовать React Router, который зависит от вас, у нас будет только несколько компонентов, поэтому замена другого маршрутизатора довольно проста. Давайте взглянем на наш обновленный файл app.js:
Здесь происходит гораздо больше, у нас есть файл конфигурации, определяемый в корне (так что я не делюсь своими кредитами Auth0 в репо, ряд компонентов, включая компонент Layout, который нам нужно будет подтолкнуть auth creds в дочерние компоненты. У нас также есть AuthService файл, который я вытащил непосредственно из Учебника React через Auth0. Вы также можете просмотреть мой здесь (я также добавил эмиттер событий для отправки при обновлении профиля.
Теперь давайте добавим эти компоненты
Как видите, мы проталкиваем auth всем дочерним элементам, чтобы мы могли получить доступ ко всему в файле AuthService, например, к получению профиля / входа в систему / выхода из системы и т. Д.
Теперь не хватает только файла config:
Обработка Auth0
Теперь нам просто нужно, чтобы Auth0 и Google работали нормально (в этом примере я буду использовать интеграцию с Google).
Пожалуйста, следуйте этим инструкциям здесь: Auth0 & Electron
Вам нужно будет настроить URL-адрес обратного вызова в определении вашего приложения в Auth0, вам также потребуется настроить клиент OAuth 2.0 в Консоли разработчика Google. Затем вам нужно будет вернуться к панели управления Auth0 и добавить эти учетные данные в Connections / social here. Это потому, что мы не используем метод popup внутри приложения Electron:
При определении Auth0Lock в AuthService.js используйте эти параметры! (это, вероятно, будет самой сложной частью заставить это работать.)
Так и должно быть!
Я создал репо с некоторыми дополнительными сведениями, включая перенаправление и некоторые другие полезные элементы, но, надеюсь, небольшое разбиение на это было полезно. Если у вас есть проблемы или вопросы, не стесняйтесь комментировать здесь или в репо, и я сделаю все возможное, чтобы их решить.
Также часть настроек была взята из электронного блога романшейбала.
Имейте в виду, что некоторые вещи в репо будут продолжать меняться, и я постараюсь также обновлять статью, если что-то будет серьезным.
