Привет ! 👋
Не давно была новость о то что меню пуск в windows 11 это приложение на react-native.
Введение
В этой статье расскажу, как можно сделать меню пуск как в windows, но вместо react-native буду использовать просто react, а десктоп получим через electron.
Код приложения можно найти тут 👈
В подробностях рассказывать не буду, в описании на репозитории проекта есть гайд как запустить приложение. Кода там немного, пару часов хватит чтобы понять что к чему, ну и я ниже покажу на что обратить внимание.
Запуск
Есть такой инструмент для electron, electron-forge.
Он предоставляет готовый шаблон для разработки, а это уже пол дела ! 😁
Запускается все просто:
npx create-electron-app@latest my-app --template=vite-typescript
вместо my-app - любое ваше название приложения
так же есть и другие шаблоны:
- webpack
- webpack-typescript
- vite
- vite-typescript
Мне интерес vite-typescript.
В шаблоне ни много ни мало файлов и конфигов, но на самом деле не все так страшно как на первый взгляд может показаться.
После этого можно запустить npm start и появиться окно приложения.
📁 src
🔹 main.ts
Главный процесс Electron
Создаёт окно (BrowserWindow), запускает приложение. Это точка входа backend-части Electron. Здесь происходит настройка preload.ts и загрузка index.html
В моем случае, в main.ts почти тоже самое, только добавил больше обработчиков, для рендера второго окна - скрытие/открытие, и http запросы к сайтам за инфой через прокси SOCKS5 (обход блокировки, не все сайты были доступны)
🔹 preload.ts
Preload-скрипт (мост между main и renderer)
Выполняется в контексте окна до загрузки рендерера. Используется для безопасной передачи API из main-процесса в renderer через contextBridge и ipcRenderer.
В моем случае два окна и два preloads получилось, можно и через один, но решил разделить. И поместил все в каталог preloads. Ключевой момент этих скриптов, определить апи для взаимодействия с backend-electron (см. electronAPI), и определить переменные например windowType, для определения типа окна для рендера.
🔹 renderer.ts
Точка входа для фронтенда (рендерер)
Запускается в браузерном контексте внутри окна. Именно сюда компилируется Vite + TypeScript, а дальше можно использовать React или JS
Этот скрипт уже попадает в index.html и отрисовывает UI. В нём ( renderer.ts ) нужно импортировать файлы с компонентами, vite их скопмилирует и корректно все отдаст локальному веб-серверу.
🛠 Конфигурация и мета-файлы
🔹 forge.config.ts
Конфигурация Electron Forge
Указывает, как собирать, упаковывать и распространять приложение. Например, сборка .exe, .dmg и т.п.
Шаблон уже предоставляет рабочий конфиг, в нём по мере добавления других preloads нужно дополнять в VitePlugin соответсвенно. Так же в зависимости от задач/требований в packagerConfig можно донастроить приложение. Для примера я добавил иконку приложения.
🔹 forge.env.d.ts
Типизация для переменных окружения Forge
Содержит декларации типов TypeScript, чтобы IDE понимала, что доступно в среде.
Этот файл не трогал, но в нём скорее всего можно задать глобальные переменные и функции, я их определил в globals.d.ts. Эти файлы больше нужны для typescript типизации.
🔹 index.html
HTML-файл, загружаемый в окно Electron. Он используется Vite как базовый шаблон и подключает скомпилированный JS-файл из renderer.ts.
⚙️ Vite-конфигурации
🔹 vite.main.config.ts
Vite-конфигурация для сборки main-процесса Electron.
🔹 vite.preload.config.ts
Vite-конфигурация для сборки preload-скрипта, выполняемого в изолированном контексте.
🔹 vite.renderer.config.ts
Vite-конфигурация для сборки рендерера (фронтенда). Тут подключаются плагины для React
Так как использую React, для vite нужен плагин чтобы отрисовать react-компоненты, что и нужно указать именно в этом конфиге. В остальных ничего не трогал.
📁 App
Каталог src/app находится реакт-приложение, в index.tsx рендерится окно в зависимости от windowType, эта переменная определяется в preloads, выше о этом говорил.
Описание про реакт компоненты опущу, там может быть все что угодно, но в данном примере достаточно было нескольких небольших компонентов.
Скрипт для сборки приложения npm run make
Для публикации, например в гит репозитории - npm run publish
Заключение
Минусы приложения на electron - большой размер, потребление ресурсов, безопасность. Это сразу заметно если запустить сборку (npm run make) и посмотреть во что это все превратится. Для небольших приложений, думаю, этим можно пользоваться, или когда нужны решения для рендера веб-приложения в отдельном изолированном окне.
Спасибо за внимание ! 🙂
Версия для windows 👈
Версия для macos silicon 👈
github с исходным кодом приложения:
Подписывайтесь на мой телеграм-канал - БлогНот