Первое приложение вручную

Проект Electron — это обычный проект npm, в котором Electron установлен как зависимость. Если собрать его вручную из трёх файлов, сразу становится понятно, что за что отвечает. В следующем уроке то же самое сделает готовый инструмент.

Создание проекта

mkdir notes
cd notes
npm init -y
npm install --save-dev electron

Команда npm init -y создаёт package.json, вторая команда скачивает Electron в папку node_modules. Electron ставят в devDependencies: при сборке программы он встраивается в неё целиком, отдельно его не устанавливают.

package.json

Откройте package.json и приведите его к такому виду:

{
  "name": "notes",
  "version": "1.0.0",
  "description": "Простые заметки",
  "type": "commonjs",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^38.0.0"
  }
}

Поле main говорит Electron, с какого файла начать. Скрипт start запускает Electron в текущей папке. Номер версии у вас может быть новее — оставьте тот, что записал npm.

main.js

Создайте в корне проекта файл main.js:

// main.js
const { app, BrowserWindow } = require('electron');
 
function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

Когда Electron готов, функция createWindow создаёт окно 800 на 600 точек и загружает в него страницу index.html.

index.html

Создайте рядом файл index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    <title>Заметки</title>
  </head>
  <body>
    <h1>Заметки</h1>
    <p>Здесь будет список заметок.</p>
  </body>
</html>

Тег meta с Content-Security-Policy запрещает странице загружать скрипты и стили не из папки программы. Зачем он нужен, объяснено в уроке о безопасности.

Запуск

npm start

Откроется окно с заголовком «Заметки» и текстом страницы. Над страницей — стандартное меню Electron с пунктами File, Edit, View. Закройте окно, и программа завершится; в терминале снова появится приглашение командной строки.

Структура

notes/
├── node_modules/
├── index.html
├── main.js
├── package.json
└── package-lock.json

Дальше в эту папку добавятся preload.js, renderer.js и styles.css.

Частая ошибка

Если поле main указывает на несуществующий файл, например осталось значение index.js от npm init, Electron покажет окно с ошибкой о том, что не может найти приложение. Проверьте, что имя в main совпадает с именем файла главного процесса.