Angular-Electron - Kezdés

• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

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, hogyan lesz belőle futtatható alkalmazás.

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

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

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

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

package.json

{
  "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.

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="./">

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

src/electron.js

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.

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

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.