Electron#

Предварительные шаги#

Перед тем как устанавливать любые пакеты проверим подключение репозиториев Astra Linux командой в консоли:

cat /etc/apt/sources.list

Для Astra Linux 1.7 список возможных репозиториев будет таким:

# Основной репозиторий
deb https://dl.astralinux.ru/astra/stable/1.7_x86-64/repository-main/     1.7_x86-64 main contrib non-free

# Базовый репозиторий
deb https://dl.astralinux.ru/astra/stable/1.7_x86-64/repository-base/     1.7_x86-64 main contrib non-free

# Расширенный репозиторий
deb https://dl.astralinux.ru/astra/stable/1.7_x86-64/repository-extended/ 1.7_x86-64 main contrib non-free

Для Astra Linux 1.8 список возможных репозиториев будет таким:

# Основной репозиторий
deb https://dl.astralinux.ru/astra/stable/1.8_x86-64/main-repository/     1.8_x86-64 main contrib non-free non-free-firmware

# Расширенный репозиторий, включающий так же репозиторий для разработчиков
deb https://dl.astralinux.ru/astra/stable/1.8_x86-64/extended-repository/ 1.8_x86-64 main contrib non-free non-free-firmware

После проверки необходимо обновить список доступных пакетов командой в консоли:

sudo apt update

Совет

Подробнее о репозиториях можно прочесть в статьях Репозитории и Организация репозиториев

Установка пакетов#

Node.js и npm#

Чтобы использовать Electron вы должны установить Node.js и NPM (менеджер пакетов, входящий в состав Node.js):

Установка из репозиториев#

sudo apt install nodejs npm

Предупреждение

При такой установке, для Astra Linux 1.7.x, рабочая версия Electron будет не выше 28 и сборка deb-пакета значительно усложнится.

Установка с помощью NVM#

Node Version Manager (NVM) - это инструмент для управления версиями Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
#необходимо закрыть и открыть терминал, чтобы продолжить установку nodejs
nvm ls-remote #команда для просмотра доступных версий, рекомендуется устанавливать последнюю LTS версию
nvm install 20.18.0
node -v # должен вывести `v20.18.0`
npm -v # должен вывести `10.8.2`

Установка electron#

Создадим директорию, где будем размещать проект и инициализируем пакет npm

mkdir my-electron-app && cd my-electron-app
npm init

После npm init запустится утилита создания шаблона приложения, необходимо ответить на несколько вопросов:

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-electron-app)
version: (1.0.0)
description: Description my-electron-app
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: astra-author
license: (ISC)
About to write to /home/astra/my-electron-app/package.json:

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Description my-electron-app",
"main": "main.js",
"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "astra-author",
"license": "ISC"
}


Is this OK? (yes)

Важно

Значение entry point должно быть main.js.

Поля author и description могут быть любыми, но необходимы для создания пакета.

В результате в папке проекта будет создан package.json.

Далее установите пакет electron как devDependencies.

npm install --save-dev electron

Предупреждение

Для Astra Linux 1.7 последняя рабочая версия Electron - 28.0.0.

В таком случае установка будет выглядеть так:

npm install --save-dev electron@28.0.0

Совет

Чтобы стал возможен запуск приложения, добавьте команду «start»: «electron .» в разделе scripts файла package.json

В итоге наш файл package.json будет иметь такой вид:

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Description my-electron-app",
"main": "main.js",
"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "electron ."
},
"author": "astra-author",
"license": "ISC",
"devDependencies": {
   "electron": "^33.0.2"
}
}

Примеры работы#

my-electron-app#

main.js

const { app, BrowserWindow } = require('electron')
const path = require('node:path')

const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {
      preload: path.join(__dirname, 'preload.js')
   }
})

mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
createWindow()

app.on('activate', () => {
   if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})

preload.js

window.addEventListener('DOMContentLoaded', () => {
   const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
   }

   for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
   }
})

index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
      <title>Страница</title>
   </head>
   <body>
      <h1>Страница для просмотра версии пакетов</h1>
      Мы используем Node.js <span id="node-version"></span>,
      Chromium <span id="chrome-version"></span>,
      и Electron <span id="electron-version"></span>.

      <script src="./renderer.js"></script>
   </body>
</html>

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

npm start

Предупреждение

Если запустить приложение до создания файлов, то будет ошибка «не найден файл main.js»

Создание deb пакета#

Вариант 1 - Electron Forge#

Electron Forge — это универсальный инструмент для упаковки и распространения приложений Electron.

Установим зависимости в нашем проекте:

npm install --save-dev @electron-forge/maker-deb

npm install --save-dev @electron-forge/cli

npx electron-forge import

Предупреждение

Если вы получили предупреждение о том, что не установлен git, то выполните команду:

sudo apt install git

Electron Forge автоматически создает локальный репозиторий и добавляет исключения в .gitignore.

В package.json в поле «scripts» автоматически добавятся пункты «package» и «make».

Блок scripts будет выглядеть так:

"scripts": {
   "start": "electron-forge start",
   "package": "electron-forge package",
   "make": "electron-forge make"
},

Предупреждение

Необходимо закомментировать или убрать следующие строчки в файле forge.config.js

{
   name: '@electron-forge/maker-rpm',
   config: {},
},

Для сборки RPM необходимо дополнительно установить пакеты по этой инструкции.

Выполняем команду

npm run make

Cоберется приложение под текущую платформу, а на его основе deb-пакет. Всё будет лежать в папке «out» в корне проекта.

Совет

Для сборки под другую платформу необходимо добавить флаг, например:

npm run make -- --arch="arm64"

Подробнее можно узнать здесь.

Установка пакета командой:

sudo apt install ./my-electron-app_1.0.0_amd64.deb

Вариант 2 - electron-installer-debian#

Инструмент для создания deb-пакетов

npm install --save-dev electron/packager

npm install --save-dev electron-installer-debian

В package.json добавить в поле «scripts» пункты «build» и «deb64»:

"scripts": {
   "build": "electron-packager . my-electron-app --platform linux --arch x64 --out dist/",
   "deb64": "electron-installer-debian --src dist/my-electron-app-linux-x64/ --dest dist/installers/ --arch amd64"
},

npm run build

npm run deb64

Совет

Подробная информация о сборке под другие архитектуры и возможные флаги - electron-installer-debian

Установка пакета командой:

sudo apt install ./dist/installers/my-electron-app_1.0.0_amd64.deb

Иконка в трее#

example

Скачиваем архив, распаковываем, затем переходим в полученную папку «example».

npm init
npm install --save-dev electron

Совет

Чтобы стал возможен запуск приложения, добавьте команду «start»: «electron .» в разделе scripts файла package.json

Данный пример уже настроен для использования второго способа сборки deb пакета, поэтому выполняем:

npm install --save-dev electron/packager

npm install --save-dev electron-installer-debian

Для запуска:

npm start

Ожидаемый результат прячется в трее.

Для сборки пакета:

В package.json добавить в поле «scripts» пункты «build» и «deb64»:

"scripts": {
   "build": "electron-packager . example --platform linux --arch x64 --out dist/",
   "deb64": "electron-installer-debian --src dist/example-linux-x64/ --dest dist/installers/ --arch amd64"
},

npm run build

Установка пакета командой:

sudo apt install ./dist/installers/example_1.0.0_amd64.deb

Изменение темы страницы#

example-auto-theme

Скачиваем архив, распаковываем, затем переходим в полученную папку «example-auto-theme».

npm init
npm install --save-dev electron

Совет

Чтобы стал возможен запуск приложения, добавьте команду «start»: «electron .» в разделе scripts файла package.json

Данный пример уже настроен для использования второго способа сборки deb пакета, поэтому выполняем:

npm install --save-dev electron/packager

npm install --save-dev electron-installer-debian

Для запуска:

npm start

По нажатию кнопок будет меняться цветовая тема страницы.

Для сборки пакета:

В package.json добавить в поле «scripts» пункты «build» и «deb64»:

"scripts": {
   "build": "electron-packager . example-auto-theme --platform linux --arch x64 --out dist/",
   "deb64": "electron-installer-debian --src dist/example-auto-theme-linux-x64/ --dest dist/installers/ --arch amd64"
},

npm run build

Установка пакета командой:

sudo apt install ./dist/installers/example-auto-theme_1.0.0_amd64.deb

Уведомления#

example-notifications

Скачиваем архив, распаковываем, затем переходим в полученную папку «example-notifications».

npm init

npm install --save-dev electron

Совет

Чтобы стал возможен запуск приложения, добавьте команду «start»: «electron .» в разделе scripts файла package.json

Данный пример уже настроен для использования второго способа сборки deb пакета, поэтому выполняем:

npm install --save-dev electron/packager

npm install --save-dev electron-installer-debian

Для запуска:

npm start

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

Для сборки пакета:

В package.json добавить в поле «scripts» пункты «build» и «deb64»:

"scripts": {
   "build": "electron-packager . example-notifications --platform linux --arch x64 --out dist/",
   "deb64": "electron-installer-debian --src dist/example-notifications-linux-x64/ --dest dist/installers/ --arch amd64"
},

npm run build

Установка пакета командой:

sudo apt install ./dist/installers/example-notifications_1.0.0_amd64.deb

Дополнительная информация#

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

Примеры приложений

Electron Forge

Electron

Содержание

Electron#

Предварительные шаги#

Установка пакетов​#

Node.js и npm#

Установка из репозиториев#

Установка с помощью NVM#

Установка electron#

Примеры работы#

my-electron-app#

Создание deb пакета#

Вариант 1 - Electron Forge#

Вариант 2 - electron-installer-debian#

Иконка в трее#

Изменение темы страницы#

Уведомления#

Дополнительная информация#

Установка пакетов#