< Electron

Angular-Electron

Szerző: Sallai András

Copyright © 2024, Sallai András

Licenc: CC BY-SA 4.0

Web: https://szit.hu

Bevezetés

Manapság népszerű asztali alkalmazásként egy Electron alapú alkalmazást létrehozni. Itt megnézzük, hogyan kell ezt elkezdeni Angular keretrendszerrel.

A leírásban elkészített alkalmazás elérhető itt:

https://github.com/oktat/electron-app.git

Projekt létrehozása

Legyen a projekt neve „electron-app”. Létrehozzuk az ng paranccsal, majd VSCode-dal szerkesztjük a projektet.

ng new electron-app
cd electron-app
code .

Függőségek hozzáadása:

npm install --save-dev electron electron-builder

A projekt beállítása

Az alábbi minta nem a teljes package.json, csak amivel ki kell egészíteni:

{ "main": "src/electron.js", "scripts": { "electron": "ng build && electron --disable-gpu .", "electron-build": "ng build && electron-builder" }, "build": { "files": [ "./src/electron.js", "./dist/electron-app/browser/*" ] } }

A --disable-gpu kihagyható.

A „build” rész, a „scripts”: { „electron-build” } számára szükséges. Ennek hatására a dist könyvtárat is figyelembe veszi az alkalmazás létrehozása során.

Az electron-app helyett minden helyen saját projekt nevünk kell szerepeljen.

A scripts nevek lehet más nevek, ez csak egy ajánlás.

Az src/index.html fájlban javítsuk a <base> elem href tulajdonságának értékét:

<base href="./">

Az Electron belépési pontja

Hozzunk létre az src könyvtárban egy electron.js fájlt:

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

A win.loadFile() paraméterében javítsuk a saját projektünk nevére az útvonalat.

Fejlesztés

A fejlesztés során használhatjuk továbbra is a ng serve beépített szervert.

Ha szeretnénk megnézni hogyan fog ez kinézni asztali alkalmazásként:

npm run electron

Az asztali alkalmazás elkészítése

npm run eclectron-build

Az utasítás hatására létrejön a dist könyvtárban (verziószámtó függően) egy ehhez hasonló nevű futtatható fájl:

electron-app-0.0.1.AppImage

Próbáljuk ki a futtatást, például egy fájlkezelőből.