Electron – Desktop Beispiel App erstellen

Downloads:

Projekt erstellen

Es wird auf das Erstellen einer Desktop Applikation eingegangen. Dabei wird vorausgesetzt, dass eine einfache HTML 5 Anwendung vorhanden ist, welche über Electron als Desktop Applikation angezeigt wird.
Hierfür erstellen wir einen neuen Ordner und führen folgenden Befehl in einer Kommandozeile aus:
npm init
Dies erstellt eine node Applikation, die vorerst nur aus einer „package.json“ Datei besteht.

Electron installieren

Nun installieren wir Electron als Dev Dependency um Abhängigkeiten klar in der package.json einzutragen.
npm install electron --save-dev

Projekt Einstieg

Für den Projekteinstieg erstellen wir im Root-Verzeichnis die Datei „index.js“, welche grundsätzliche Informationen enthält.

const {app, BrowserWindow} = require("electron");

let win = null;

app.on("ready", function () {
    win = new BrowserWindow({
    width: 1200,
    height: 720
});

//Einstieg index.html definieren
win.loadURL('file://' + __dirname + '/src/index.html');

//zusätzlich zum Start auch die DevTools anzeigen
win.webContents.openDevTools();

//Window beim Minimieren leeren
win.on('closed', function () {
    win = null;
    });
});

app.on('activate', function () {
    if (win == null) {
        createWindow();
    }
})

//Prozess beim Schließen beenden 
app.on('window-all-closed', function () {
    if (process.platform != 'darwin') {
        app.quit();
    }
});

Wichtig ist hier der Abschnitt „win.loadUrl“, welcher die index.html Seite unserer HTML 5 Anwendung lädt.

package.json anpassen

Nun ergänzen wir in package.json Datei den scripts-Bereich um folgenden Eintrag.

"scripts" : {
    "start": "electron ."
}

Somit lässt sich die Electron App schnell über npm start starten.

Live Reload integrieren

Durch das Integrieren von „electron-reload“ wird bei jeder Änderung das Fenster aktualisiert.
Man muss somit nicht selber das Fenster manuell neu laden.
Dafür führen wir in einer Kommandozeile folgenden Befehl aus.
npm install electron-reload --save-dev

Applikation starten

Die Applikation lässt sich nun über folgenden Befehl starten und beinhaltet bereits das Live-Reload Feature.
npm start

App Build integrieren

Damit wir aus unserer Electron Anwendung auch verteilbare ausführbare Windows Programme erstellen können, benötigen wir ein weiteres Package.
Hierfür installieren wir über eine Kommandozeile „Electron Packager“ über folgenden Befehl.
npm install electron-packager --save-dev

.exe erstellen

Über das eben installierte Package lässt sich nun aus der Electron Anwendung eine ausführbare „.exe“ erstellen.
electron-packager ./ App-Name --platform=win32 --arch=ia32

Weitere Informationen zur Api gibt es hier – link