Проект на Electron Forge

Electron Forge — официальный набор инструментов Electron. Он создаёт проект по шаблону, запускает его при разработке и собирает установщики для Windows, macOS и Linux. Для настоящей программы удобнее начинать с него, а не с пустой папки.

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

npm init electron-app@latest notes
cd notes
npm start

Первая команда скачивает генератор Forge и создаёт папку notes с готовым проектом. npm start открывает окно с надписью «Hello World!» и сразу показывает DevTools.

Структура

notes/
├── src/
│   ├── index.html     страница окна
│   ├── index.css      стили страницы
│   ├── index.js       главный процесс
│   └── preload.js     скрипт preload
├── forge.config.js    настройки сборки
└── package.json

Это тот же набор файлов, что в ручном проекте, только в папке src и с другими именами. В уроках курса файлы называются main.js, index.html, preload.js и лежат в корне. В проекте Forge то же самое пишется в src/index.js, src/index.html и src/preload.js.

package.json

Главное, что отличает его от ручного варианта, — поле main и скрипты:

{
  "main": "src/index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish"
  }
}

start запускает программу для разработки, package собирает папку с готовой программой, make — установщик, publish выкладывает сборку, например в GitHub Releases. Сборке посвящён отдельный урок.

Главный процесс шаблона

Откройте src/index.js. Его начало выглядит примерно так:

// src/index.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
 
if (require('electron-squirrel-startup')) {
  app.quit();
}

Проверка electron-squirrel-startup нужна установщику Windows: при установке и удалении он ненадолго запускает программу, и в этот момент окно открывать не надо. Остальная часть файла — создание окна и обработка событий жизненного цикла, о них следующие уроки.

Шаблоны

Генератор умеет создавать проект и со сборщиком:

npm init electron-app@latest notes -- --template=vite

Шаблоны vite, vite-typescript, webpack, webpack-typescript нужны, когда интерфейс пишется на React или Vue. Об этом — урок «Vite и React».

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

Если запустить в проекте Forge команду electron . вместо npm start, программа откроется, но Forge не подготовит её: в шаблонах со сборщиком окно останется пустым. Запускайте проект Forge только через npm start.