Nachdem wir im dritten Teil unsere Demoanwendung fertiggestellt haben, werden wir nun installierbare Pakete für die unterschiedlichen Plattformen bauen.
Stellvertretend für Linux-Systeme werden wir ein Debian Paket bauen. Für Windows werden wir ein Squirrel-Paket bauen und für Mac OS eine ZIP-Paket.
Wer seine App in die App Stores der jeweiligen Plattform bringen will, kann dies auch mit electron-forge machen.
Die Dokumentation gibt ausführlich Auskunft über die Möglichkeiten, wie man seine Pakete bauen kann und man sie auch gleichzeitig veröffentlichen kann.
Vorbereitung
In der package.json geben wir unserer Demo-App eine ordentliche Beschreibung und legen fest, dass wir für Linux nur ein Debian-Paket erstellen möchten.
Darüber hinaus geben wir Anwendungsdatei einen Namen und definieren den Pfad zum App-Icon.
"description": "Rebuild of the gtk3-demo-application with electron",
...
"linux": [
"deb
]
...
"electronPackagerConfig": {
"packageManager": "yarn",
"executableName": "electron-react-example",
"icon": "./icon.svg"
}
...
Da unser Anwendungsname electron im Namen hat müssen wir die Abfrage für den Entwicklungsmodus ein ganz wenig anpassen. In der index.js fragen wir deswegen nicht nur, ob der Fahrt zur Anwendungsdatei electron enthält, sondern das electron ein Unterverzeichnis ist.
const isDevMode = process.execPath.match(/[\\/]electron[\\/]/);
Nun können wir mit unserem Linux-Build anfangen.
Linux-Build
Als Icon für die Anwendung habe ich mir von openclipart.org ein einfaches Icon heruntergeladen. Grundsätzlich reicht uns hierfür jegliche SVG- oder PNG-Datei.
Für den Linux-Build legen wir in der package.json dann unter electronInstallerDebian Werte für das Icon und die Kategorie fest.
...
"electronInstallerDebian": {
"icon": "./icon.svg",
"categories": [
"Utility"
],
"homepage": "https://foo.com"
},
...
Nun können wir in der Kommandozeile mit electron-forge make unsere Anwendungen bauen. Wenn alles gut gegangen ist findet man unter out/make das Debian-Paket.
Mac OS-Build
Für den Mac-Build habe ich mir in einer virtuellen Maschine das Repo geklont und unser Icon in das icns-format konvertiert.
In der Kommandozeile habe ich dann mit NPM alle Abhängigkeiten installiert und dann wieder mit electron-forge make den Build angestoßen. Mehr war nicht notwendig.
Am Ende sollte eine ZIP-Datei stehen, die eine ausführbare Anwendung enthält.
electron-forge bietet auch die Möglichkeit DMGs für den Mac zu erstellen.
Windows-Build
Als Vorbereitung für den Windows-Build habe ich unser Icon diesmal in eine ico-Datei konvertiert. Dann habe ich wieder mit electron-forge den-Build in einer virtuellen Maschine angestoßen. Mehr ist auch hier nicht nötig.
Grundsätzlich ist es auch möglich electron-Pakete mit Wine zu bauen. Allerdings ist in der aktuellen Version von electron-forge diese Funktionalitäten nicht eingebaut. Wer trotzdem unter Linux Windows-Pakete bauen will, sollte sich das Paket electron-packager einmal anschauen.
Wir haben jetzt mit geringem Aufwand Pakete für alle bekannten Plattformen gebaut. Damit endet unser Tutorial. Ich hoffe ich konnte zeigen, dass Electron mit React eine interessante Alternative ist, wenn man plattformübergreifende Desktop-Applikation bauen möchte.
electron-react-example für Ubuntu
electron-react-example für Mac OS
electron-react-example für Window
Unsere Anwendung passt sich gut in allen Umgebungen ein, ist mit Web-Technologien umgesetzt und hat keine externen Abhängigkeiten.
Du findest den Source-Code für dieses Tutorial auf Github: https://github.com/rockiger/electron-react-example