Electron сборка под linux

Сборка приложения с помощью electron-builder

Выполнить сборку приложения можно с помощью различных инструментов в число которых входят electron-builder, electron-forge, electron-packager и др. Мы воспользуемся пакетом electron-builder. Установим пакет с помощью команды:

В секцию scripts файла package.json добавляем скрипт:

Флаг -w означает, что мы выполняем сборку под Windows. Запускаем процесс сборки с помощью команды:

После сборки будет создан каталог C:\book\e1\dist внутри которого расположен файл e1 Setup 1.0.0.exe . С помощью этого файла можно установить приложение. Кроме того, в каталоге C:\book\e1\dist\win-unpacked можно найти файл e1.exe , с помощью которого можно запустить приложение.

Перед сборкой убедитесь, что в каталоге C:\book\e1 не присутствуют файлы, которые не нужны для работы приложения. Ведь все содержимое каталога C:\book\e1 будет упаковано в один файл app.asar , расположенный в каталоге C:\book\e1\dist\win-unpacked\resources .

С помощью различных опций, описание которых вы найдете в документации, можно изменить сборку по умолчанию. Например, создадим, помимо установщика, portable- и zip-версии приложения. Для этого добавляем следующий фрагмент в файл package.json :

В результате в каталоге C:\book\e1\electron\dist будут созданы три версии приложения: программа установки, portable-версия и zip-версия.

Аналогичным образом можно выполнить сборку приложения под MacOS и Linux. Но лучше выполнять сборку на целевой платформе, а не на Windows. Для MacOS нужно в составе команды указать флаг -m , а для Linux — флаг -l :

Учебник по Electron js в формате PDF

Помощь сайту

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Источник

Документация Electron

Docs / Guides / Распространение приложений v15.0.0

Распространение приложений

Обзор

To distribute your app with Electron, you need to package and rebrand it. Для этого можно использовать специализированный инструментарий или ручной подход.

С инструментами

Вы можете использовать следующие инструменты для распространения вашего приложения:

Эти инструменты позаботятся о всех шагах, которые вам нужно предпринять, чтобы получить распространяемое приложение Electron, такие как сборка вашего приложения, ребрендинг выполнения и установка нужных иконок.

You can check the example of how to package your app with electron-forge in the Quick Start guide.

Ручное распространение

С предустановленными бинарными файлами

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

ПРИМЕЧАНИЕ: расположение заранее встроенных двоичных файлов Electron указывается на примерах ниже, начиная с electron/ .

На Windows и Linux:

Then execute Electron.app on macOS, electron on Linux, or electron.exe on Windows, and Electron will start as your app. The electron directory will then be your distribution to deliver to users.

С архивом исходного кода приложения

Вместо того, чтобы отправлять ваше приложение, копируя все исходные файлы, вы можете запаковать ваше приложение в asar архив, чтобы улучшить производительность чтения файлов на платформах, таких как Windows, если вы еще не используете такой пакет как Parcel или Webpack.

Чтобы использовать архив asar для замены каталога app , необходимо переименовать архив в app.asar и положить его в каталог ресурсов Electron, как показано ниже, и Electron будет пытаться прочитать архив и начать с него.

На Windows и Linux:

Более подробную информацию об использовании asar вы можете найти в репозитории electron/asar .

Ребрендинг скачанных бинарных файлов

После построения вашего приложения в Electron и перед распространением вам следует провести его ребрендинг.

macOS

Вы можете переименовать Electron.app , а также вы должны переименовать поля CFBundleDisplayName , CFBundleIdentifier и CFBundleName в следующих файлах:

• Electron.app/Contents/Info.plist
• Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

Вы также можете переименовать helper приложения, чтобы избежать показа Electron Helper в Activity Monitor, но убедитесь, что вы переименовали имя исполняемого файла helper приложения.

Структура переименования app будет такая:

Windows

Вы можете сменить имя файла electron.exe на любое понравившееся, отредактировать его значок и другую информацию такими инструментами, как rcedit.

Linux

Electron исполняемый файл можно переименовать на любое имя, которое вам нравится.

Проведите ребрендинг, пересобрав Electron из исходных кодов

Можно изменить бренд Electron путем изменения имени продукта и сборки его из исходных кодов. Для этого вам надо установить аргумент, отвечающий за имя продукта ( electron_product_name = «YourProductName» ) в файле args.gn и пересобрать Electron.

Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Источник

electron-builder ¶

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

• NPM packages management:
  • Native application dependencies compilation (including Yarn support).
  • Development dependencies are never included. You don’t need to ignore them explicitly.
  • Two package.json structure is supported, but you are not forced to use it even if you have native production dependencies.
• Code Signing on a CI server or development machine.
• Auto Update ready application packaging.
• Numerous target formats:
  • All platforms: 7z , zip , tar.xz , tar.lz , tar.gz , tar.bz2 , dir (unpacked directory).
  • macOS: dmg , pkg , mas , mas-dev .
  • Linux: AppImage, snap, debian package ( deb ), rpm , freebsd , pacman , p5p , apk .
  • Windows: nsis (Installer), nsis-web (Web installer), portable (portable app without installation), AppX (Windows Store), Squirrel.Windows.
• Publishing artifacts to GitHub Releases, Amazon S3, DigitalOcean Spaces and Bintray.
• Advanced building:
  • Pack in a distributable format already packaged app.
  • Separate build steps.
  • Build and publish in parallel, using hard links on CI server to reduce IO and disk space usage.
  • electron-compile support (compile for release-time on the fly on build).
• Docker images to build Electron app for Linux or Windows on any platform.
• Proton Native support.
• Downloads all required tools files on demand automatically (e.g. to code sign windows application, to make AppX), no need to setup.

Question	Answer
“I want to configure electron-builder”	See options
“I have a question”	Open an issue or join the chat
“I found a bug”	Open an issue
“I want to support development”	Donate

Installation¶

Yarn is strongly recommended instead of npm.

yarn add electron-builder —dev

Boilerplates¶

• electron-webpack-quick-start — A bare minimum project structure to get started developing with electron-webpack. Recommended.
• electron-react-boilerplate A boilerplate for scalable cross-platform desktop apps.
• electron-react-redux-boilerplate A minimal boilerplate to get started with Electron, React and Redux.
• electron-boilerplate A minimalistic yet comprehensive boilerplate application.
• Vue CLI 3 plugin for Electron A Vue CLI 3 plugin for Electron with no required configuration.

Quick Setup Guide¶

electron-webpack-quick-start is a recommended way to create a new Electron application.

Specify the standard fields in the application package.json — name, description , version and author.

Specify the build configuration in the package.json as follows:

Add the scripts key to the development package.json :

To ensure your native dependencies always matched the electron version, simply add script «postinstall»: «electron-builder install-app-deps» to your package.json .

If you have native addons of your own that are part of the application (not as a dependency), set nodeGypRebuild to true .

Please note that everything is packaged into an asar archive by default.

For an app that will be shipped to production, you should sign your application. See Where to buy code signing certificates.

Programmatic Usage¶

See node_modules/electron-builder/out/index.d.ts . Typings for TypeScript is provided.

Pack Only in a Distributable Format¶

You can use electron-builder only to pack your electron app in a AppImage, Snaps, Debian package, NSIS, macOS installer component package ( pkg ) and other distributable formats.

—projectDir (the path to project directory) option also can be useful.

Debug¶

Set the DEBUG environment variable to debug what electron-builder is doing:

FPM_DEBUG env to add more details about building linux targets (except snap and appimage).

On Windows the environment variable is set using the set command.

PowerShell uses different syntax to set environment variables.

Источник

Electron: от мотивации до публикации

— Хотел бы я иметь приложение, которое умеет что-то такое, что мне надо. Жаль такого нет.
— А почему бы тебе его самому не написать?
— Это сложно, мне потребуется куча времени, чтобы понять теорию, приступить к практике и, скорее всего, ничего хорошего не выйдет. А вообще я frontend-разработчик и привык к HTML, CSS и JS. Этот стек не позволяет писать десктопные приложения.
— Electron!

Уверен, большинство из нас обмениваются скриншотами. Существует большое количество приложений, способных делать скриншоты и как-то их редактировать (обрезать, рисовать что-то итд). Первые 3, которые мне приходят на ум: Joxy, Monosnap, Gyazo.

Казалось бы, чего ещё желать, когда есть задача и инструменты для неё? Но нет, всё не так просто.

Критерии, по которым я искал приложение

Сохранение скриншота на сервере

Намного удобнее скинуть ссылку на скриншот, чем искать, куда приложение сохранило картинку, а потом прикреплять её. Конечно, некоторым не понравится идея хранить скриншоты неизвестно где. Но, с другой стороны, это позволяет быстро решить задачу — поделиться скриншотом. Такая модель поведения приложения мне вполне подходит.

Рисование на скриншоте

По своему опыту могу сказать, что стрелка у меня присутствует чуть ли не на каждом скриншоте. Намного проще указать на какую-то деталь, чем писать что-то вроде: «Вот эта вот штука между. ». Также в стандартный набор инструментов для рисования на скриншоте, по моему мнению, должны входить карандаш, прямоугольник и текст. При этом должна присутствовать возможность переместить, перевернуть и удалить нарисованный элемент.

Версия для Linux

Как оказалось, не так и много приложений существует для этой задачи под Linux. Долгое время я использовал Gyazo и использовал бы дальше, если бы за «рисовашки» на скриншоте не приходилось платить.

Из коробки

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

На протяжении года я периодически занимался поиском, но в итоге так и не нашёл приложение, удовлетворяющее моим требованиям.

Electron

Время шло и я решил поближе познакомиться с Electron, чтобы понять что он умеет в принципе. Для тех кто не в курсе, Electron — технология, позволяющая создавать десктопные приложения, используя HTML, CSS и JavaScript.

И вот одной из демок демонстрировалось получение скриншота экрана пользователя. Это означало следующее:

• можно наконец-то написать приложение, отвечающее моим требованиям,
• появилась возможность познакомиться с новой для себя технологией на реальном проекте

Куда идти, с чего начать, как оно работает

Эти вопросы я задаю себе каждый раз, когда хочу изучить что-то новое. Зачастую решение одно и то же — документация и какой-нибудь официальный «Get started». У Electron и с тем, и с другим всё в полном порядке. По крайней мере они так пишут на сайте проекта — «It’s easier than you think». Это действительно так! Единственное, что надо сразу понять — приложение составляют 2 процесса: Main и Renderer. В Main мы работаем с окнами приложения, меню и т.д., а в Renderer у нас по-сути просто наша страничка.

С чего начать приложение

Сперва давайте создадим проект со следующей структурой:

— package,json
— main.js
— scripts
— renderer.js

Для начала нам этого вполне достаточно. В main.js у нас будет содержаться код, относящийся к главному процессу, а в scripts -> renderer.js рендер. Теперь необходимо создать само приложение. Для этого в main.js пишем:

Что в итоге мы сделали? Мы подключили Electron, создали само приложение и описали два обработчика. Когда наше приложение будет готово, мы вызовем функцию создания нового окна. А в тот момент, когда все окна будут закрыты — убьём процесс приложения.

Окей, теперь у нас есть сам процесс приложения. Теперь хотелось бы создать для него окно. Помните мы вызывали функцию createWindow();? Так вот пришла пора описать её.

Также необходимо подключить:

Таким образом мы создали окно с заданными размерами. Очень просто, не правда ли?

У окна есть очень много свойств, методов и событий, связанных с ним. К примеру: title, icon, x, y, show(), hide(), close(), minimize, closed, restore, resize. Перечислять весь список бесполезно, поэтому вот ссылка на Browser WIndow.

Но смотреть на пустое окошко не очень весело, да? Давайте подгрузим туда какую-нибудь простую страничку, которая содержит заголовок «Hello, world!». На уровне с main.js создаём файл index.html, который выглядит как самая обычная страница с

Hello, World!

Запускаем наше приложение и видим:

Прям какая-то магия 🙂 Но на секундочку о грустном.

Дебаг

А как же собственно отлавливать ошибки? Всё максимально просто! Если ошибка в главном процессе, то она и вывалится вам в консоль, из которой вы запускаете приложение. Для ловли ошибок на самой странице мы будем использовать браузерную консоль. Да, именно так! Наше приложение по факту является страничкой, запущенной в браузере. Чтобы включить консоль давайте допишем в createWindow(); строчку: appWindow.webContents.openDevTools(); . Теперь при запуске приложения мы сразу же увидим консоль.

Пока что всё что мы получили — это страничка в окне. Хочется как-то взаимодействовать с ней, к примеру, с помощью меню. Для этого в Electron есть специальный класс Menu. Поставим себе задачу — создать меню из одного элемента, при нажатии на который мы увидим системное всплывающее окно с тайтлом «Hello», сообщением: «Do you like this?» и вариантами ответа [‘Yes’, ‘No’].

И создаём файл appMenu.js в директории scripts. Внутри себя он содержит следующий код:

Идём далее. В app.on(‘ready’. дописываем:

После запуска приложения мы увидим, что наше меню стало меньше и теперь содержит один элемент. Нажав на него, мы увидим следующее:

Собственно, мы решили поставленную задачу. Я мог бы посвятить всю статью созданию какого-либо абстрактного приложения (например, аудио-плеера), но тогда бы она вся состояла из «какой-то код» -> «результат», что, согласитесь, не очень интересно (лично я бы закрыл вкладку и пошёл писать что-то своё). Поэтому остальную часть статьи я уделю обзору некоторых важных, на мой взгляд, возможностей Electron на примере моего проекта —shots. Не беспокойтесь, приложение, создание которого я описал выше, можно найти по ссылке

Больше возможностей Electron на примере —shots

Согласитесь, не очень удобно каждый раз заходить в меню за инструментами которые вы часто используете (кроп, стрелка и т.д.). Решить данную проблему можно созданием панельки в области страницы, на которую их и вынести. Уже удобнее (не надо пробираться через громоздкое меню), но всё ещё не идеально (тянуться-то надо).

Можно лучше?

Конечно, можно! Давайте использовать контекстное меню. Его будет вызывать клик правой кнопкой мыши в области окна. Такое меню будет состоять из пунктов, каждый из которых при нажатии вызовет свою функцию. К примеру, я разместил в этом меню следующие элементы:

Этот набор инструментов даст воспользоваться практически всеми возможностями приложения.

А может ещё лучше?

Да, можно ещё больше упростить доступ к возможностям приложения. Добьёмся мы этого при помощи хоткеев. Хоткеи регистрируются при помощи модуля globalShortcut и метода register. Необходимо помнить о различиях клавиатур в различных ОС. Так, например, слушать Command на Linux и Windows бесполезно. Поэтому разработчики Electron предлагают слушать CommandOrControl.
Хоткей в стандартном случае состоит из модификатора (CommandOrControl, Alt, Option. ) и кода клавиши (0 — 9, A — Z, Space, Tab. ). Стоит отметить, что он не обязательно должен состоять из комбинации двух клавиш. Может встретиться как одна, так и три (возможно и больше, но я не проверял). Например, для вызова модального окна со списком хоткеев я использую F2, а для того, чтобы увеличить масштабирование (zoom in) — CommandOrControl+shift+Plus . Мне пришлось добавить в эту цепочку shift, потому что иначе комбинация CommandOrControl+shift+Plus преобразуется в сontrol+shift+= .

Общение процессов

Скорее всего, вы столкнётесь с необходимостью передать сообщение из одного процесса в другой (вызови мне такую-то функцию, к примеру). Для этого существуют ipcRenderer и ipcMain. Поставим себе простую задачу, чтобы разобраться как это работает. Допустим, при нажатии на пункт в меню мы хотим вызвать некую функцию, которая выведет нам alert. В обработчике клика пропишем что-то вроде appWindow.webContents.send(‘show’); . Это означает следующее: при нажатии на пункт меню в renderer-процесс будет послано асинхронное сообщение по каналу ‘show’. Также можно передать дополнительные аргументы, так что пусть наш alert выведет и переданный аргумент. Немного модифицируем написанное ранее appWindow.webContents.send(‘show’, ‘content’); .
Теперь в renderer-процессе напишем:

Как видите, всё очень просто!

Полезно чтобы приложение не висело свёрнутым или, что хуже, было просто открыто. Для решения этой проблемы существует трей. И Electron даёт возможность поработать и с ним через класс Tray.
Что по сути такое приложение в трее? Это иконка и меню, вызываемое кликом правой клавиши мыши. Интересно подметить, что конструктор класса Tray принимает ровно один параметр — иконку. Если этот параметр отсутствует, то будет выброшена ошибка. Сначала это ничуть меня не удивило. Есть в конструкторе обязательный параметр, будь добр — передай. Чуть позже расскажу почему в дальнейшем обязательность этого параметра мне показалась странной.

Иконка приложения

Давайте ещё немного поговорим об украшательствах. Как же наше приложение будет жить без иконки?! Добавляется она там же, где мы создавали новое окно, дописыванием в конец icon: __dirname + ‘/icon.png’. Стоит отметить, что для Windows рекомендуется использовать иконку в формате *.ico. Не страшно, ведь можно воспользоваться os.platform() .

Моя страничка может достучаться до системы?

Да, конечно. На момент написания этой статьи актуальная версия Electron — 1.4.6, которая работает с NodeJS 6.5. К примеру, у —shots есть возможность локального сохранения файла. Для этого я использую fs.writeFile . И каждый раз перед таким сохранением проверяю есть ли директория для скриншотов (я назвал её «—shots»). Если она отсутствует, то просто её создаю.

Очень важно понимать, что ваше приложение на Electron — это не просто страничка в стандартном окошке, а вполне себе полноценное приложение.

Дополнительные возможности, которых нет в —shots

Естественно, работая над —shots, я использовал не все возможности Electron.
Например, можно загрузить своё приложение в AppStore и WindowsStore. Но —shots задумывался как приложение для LInux, поэтому особо я не влезал во все эти дебри публикации приложения. Но знаю, что для того чтобы выложить приложение в AppStore, необходимо его подписать. Каждый раз при сборке новой версии —shots я вижу этот warning в консоли и скрещиваю пальцы, чтобы он ни на что не повлиял в дальнейшем.

Ещё на сайте Electron можно встретить один замечательный пункт: «Automatic updates». Но и его я не смог прикрутить к —shots, т.к. открыл статью и увидел:

«There is no built-in support for auto-updater on Linux, so it is recommended to use the distribution’s package manager to update your app».

Проще говоря, на LInux это не работает, так что выкручивайтесь. Например, я делаю запрос на сервер, который возвращает мне номер текущей актуальной версии и, если он не совпадает с версией приложения, вывожу сообщение с просьбой его обновить.

Подводные камни

Вроде, звучит всё круто, должен же быть подвох. Безусловно, есть некоторые неприятные моменты:

Не всё кроссплатформенно

Это заметно даже на примере того же самого авто-апдейта. С прозрачным окном тоже не всё так просто. К примеру, на Linux нужно вбить в командную строку —enable-transparent-visuals —disable-gpu , а иначе никакого прозрачного окна вы не увидите. Согласитесь, приложение, которое после установки просит пользователя вбить что-то в терминал, уже начинает вызывать подозрение.

Minimize

Очень много времени я потратил на разрешение проблемы с этим. Суть её такова: когда мы сворачиваем окно приложения — срабатывает событие minimize, и окно сворачивается. Вроде всё окей. Но приложение, висящее и в трее, и в доке — это уже странно. Поэтому хотелось бы отлавливать minimize и как-то убирать приложение из дока, оставляя лишь в трее. Для этого есть метод hide(). Пишем обработчик для minimize, вызываем hide — всё отлично. Затем я захотел добавить возможность из меню трея развернуть приложение обратно, и сразу же нашёл метод show(). Всё логично show/hide, но нет. Когда я пытаюсь развернуть приложение из трея, оно намертво зависает. Очень долго я думал, что упускаю что-то важное, но никаких ошибок в консоли не видел. В том числе, выводил само окно перед тем как вызывать show() — окно существует. В общем, отказался от подобного механизма работы приложения и решил попробовать вызвать hide(), когда окно приложения открыто. И да, чудо свершилось. Всё заработало ровно так, как надо. Несколько часов было потрачено на поиск ответа на вопрос: «Да почему ты не работаешь?», а в итоге решение мне подсказал Telegram. Я просто добавил в меню пункт «minimize to tray», а заодно и хоткей повесил на него.

В общем-то для меня подводные камни Electron’а закончились. Скорее всего, мне просто повезло…

Сборка

Настало время поговорить об ещё одной достаточно занимательной вещи — сборке. Electron даёт вам возможность собрать своё приложение и потом проинсталлировать его в различных ОС. Пользователь даже может не догадываться что вы написали своё приложение на web-технологиях. Давайте приступим!

Стандартный подход

На официальном сайте в разделе документации есть 3 ссылки на инструкции по сборке (Linux, MacOS, WIndows). Так как приложение изначально затачивалось под Linux, то сначала я открыл ссылку для него. Первое системное требование сразу же напугало меня: «At least 25GB disk space and 8GB RAM» (не менее 25GB свободного места и 8GB оперативки). «Ладно, что поделать?» — подумал я и начал пытаться собрать приложение из примера. В итоге, сам процесс сборки занял у меня минут 20-30, более того, пользоваться компьютером было невозможно! Я очень рад, что не продолжил работать с этим сборщиком, т.к. узнал об одной пренеприятнейшей вещи: чтобы собрать приложение под какую-то ось, его надо собирать именно из под этой оси!

«Должен быть другой способ,» — говорил я себе. И да, действительно он существует.

Electron builder

Достаточно было просто загуглить «electron builder» и перейти по первой ссылке. С тех самых пор я и использую это сборщик, и вот почему:

сборка —shots для Linux стала занимать

минуту,

из-под Linux можно собрать и .exe-шник (надо ещё Wine ставить, но ок),

в процессе сборки можно смотреть мемы, ничего не тормозит.

Всё что вам остаётся — правильно дополнить свой проект.

Подготовка проекта

Этот процесс можно разбить на 2 этапа:

• подготовка иконок,
• подготовка package.json.

Иконки

Приложения, будучи установленными, хотят иметь свои иконки. Для этого в корневой директории проекта необходимо создать директорию «build», которую заполнить по следующей схеме:

— build
—— icons
——— 32×32.png
——— 32×32.png.ico
—— icon.icns
—— icon.ico

Package.json

Если вы просто попробуете собрать свой проект, то консоль начнёт плеваться в вас ошибками. Это происходит по той причине, что в файле должны содержаться стандартные строки:

Затем надо описать «build» и «scripts». Я намеренно быстро пробежался по этим двум пунктам, т.к. запоминать, что внутри, не требуется, да и вряд ли возможно, особенно если учесть, что есть огромное количество настроек (для «build»), которые могут зависеть от ОС, к которой он и собирается. Например, для Windows можно собрать portable-версию своего приложения и указать gif-файл, который будет отображаться в момент запуска.

В общем, рекомендую использовать именно Electron builder для сборки. Это сэкономит вам кучу нервов, поверьте.

Добавляем своё приложение на сайт Electron

Я считаю неплохой идеей рассказать о своём проекте на Electron на сайте самого Electron. Для этого достаточно послать им pull request, содержащий:

• отредактированный «_data/apps.yml» (добавив ваше приложение в конец);
• иконку приложения 256px на 256px в формате png;
• сообщение о том, что вы связаны с проектом и все члены вашей команды согласны с тем, что приложение появится на сайте Electron.

Опять же, в этом нет ничего сложного. После отправки pr необходимо лишь запастись терпением и ждать когда его примут (в моём случае это заняло около недели).
Подробную инструкцию по добавлению можно найти здесь.

Подводя итог

Нет, Electron не вытеснит нативщиков с рынка, так же как и React Native не убьёт Swift. Electron годится для создания простых приложений и является достаточно интересным проектом. И он чертовски прост! Мне удалось написать —shots, используя стандартный стек технологий frontend-разработчика:

Первый коммит был сделан 24 сентября 2016 года, а первый релиз вышел 17 октября того же года. Это значит, что спустя всего 24 дня я получил версию приложения, которую уже можно было использовать. Это достаточно быстро, если учесть, что я работаю и люблю отдыхать. Так что вперёд, всё в ваших руках!

Источник