Dieser Electron Quick Start Guide gibt einen Überblick über das Einrichten und die Entwicklung einer Desktop-App mit dem Electron-Framework.

Eine ausführlichere Version mit Erklärungen ist unter den folgenden Links verfügbar.

Teil 1: Vorbereitungen
Teil 2: Entwicklung der App
Teil 3: Export der App

Electron Quick Start – Inhalt

Wichtige Ressourcen

Initialisieren des Projekts

  1. Projektverzeichnis erstellen
    cd & mkdir

  2. Node / NPM updaten & Installation prüfen
    node -v
    npm -v
    npm update

  3. App initialisieren
    npm init

  4. „Scripts“ in package.json anpassen zu:
{
  ...
  "scripts": {
    "start": "electron ."
  },
  ...
}Code-Sprache: JavaScript (javascript)

Electron installieren

  1. Electron installieren
    npm install --save-dev electron

main.js 

// Module Laden
const { app, BrowserWindow, Menu, MenuItem, ipcMain } = require('electron');
const path = require("path");

// Fenster definieren
let window;

// Menü definieren
const menu = new Menu()
menu.append(new MenuItem({
  label: 'Electron',
  submenu: [{
    label: 'Dev-Tools',
    accelerator: 'Ctrl+d',
    click: () => window.webContents.openDevTools()
  },{
    label: 'App schließen',
    accelerator: 'Ctrl+q',
    click: () => app.quit()
  }],
}))
menu.append(new MenuItem({
  label: 'Test',
  submenu: [{
    label: 'IPC',
    click: () => trigger_IPC()
  }],
}))
Menu.setApplicationMenu(menu)

// Fenster definieren
const createWindow = () => {
    window = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            enableRemoteModule: false,
            preload: path.join(__dirname, "preload.js")
        },
    }),
    window.loadFile('index.html')
}

// Render-Prozess starten
app.whenReady().then(() => {  
    createWindow()
})

// Ausführung beenden, wenn Render-Prozess beendet
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

// IPC senden
function trigger_IPC () {
  window.webContents.send ('event1','Hi main.js hier!')
}

// IPC empfangen
ipcMain.on('answer1', (event, data) => {
  console.log(data)
})
ipcMain.on('answer2', (event, data) => {
  console.log(data)
})Code-Sprache: JavaScript (javascript)

preload.js

// Module laden
const {contextBridge, ipcRenderer} = require('electron')

// APIs im Render-Prozess verfügbar machen
contextBridge.exposeInMainWorld(
  'electron',
  {
    answer2: (data) => ipcRenderer.send('answer2', data),
  }
)

// IPC beantworten, wenn IPC von Main empfangen wird
ipcRenderer.on('event1', (event, data) => {
  console.log(data)
  ipcRenderer.send('answer1','Hi main.js, hier ist preload.js')
})Code-Sprache: JavaScript (javascript)

index.html, index.js & index.css

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>Tutorial-App</title>
  </head>

  <body>
    <h1>Hi, ich bin index.html!</h1>
    <a onclick="index_ipc()">Klick!</a>
  </body>

  <script src="index.js"></script>
</html>Code-Sprache: HTML, XML (xml)

index.css

body {
    background-color: darkblue;
    color: white;
}Code-Sprache: CSS (css)

index.js

function index_ipc () {
    window.electron.answer2('Hi zusammen, hier ist auch noch index.js!')
}Code-Sprache: JavaScript (javascript)

Packaging der App

  1. Electron-Packager installieren
    npm install electron-packager --save-dev

  2. PS Execution Policies anpassen
    Get-ExecutionPolicy -List
    set-executionpolicy remotesigned

    Nach Export:
    set-executionpolicy restricted

  3. Packaging starten
    electron-packager . test-app --plattform=win32 --asar

Eine ausführlichere Version mit Erklärungen ist unter den folgenden Links verfügbar.

Teil 1: Vorbereitungen
Teil 2: Entwicklung der App
Teil 3: Export der App