Electron & React Template für Mac

Wir generieren in diesem Artikel eine React App welche mit Electron auf einem Mac mit M1 Chip laufen soll. Sobald wir fertig sind, haben wir ein praktisches Template, dass als Startpunkt für eigene Apps verwendet werden kann.

Ab in euren IDE und los gehts 🙂 Wir starten ganz klassisch mit der Create React app Anweisung.

npx create-react-app <App-Name>

Anschließend wechseln wir in das gerade erstellte Verzeichnis:

cd <App-Name>

Jetzt installieren wir in diesem Verzeichnis Electron:

npm i -D electron electron-is-dev

Im Ordner „Public“ eine Datei mit dem Namen „electron.js“ erstellen und folgendes in diese Datei einfügen:

const path = require('path');

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  );
  // Open the DevTools.
  if (isDev) {
    win.webContents.openDevTools({ mode: 'detach' });
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Nun die package.json öffnen und folgendes vor den scripts einfügen:

"main": "public/electron.js",

Folgenden Befehl über das Terminal ausführen:

npm i -D concurrently wait-on

Wieder die package.json öffnen und diesmal die script wie folgt abändern:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:3000 && electron ."
  },

Alles abspeichern und mit

npm run dev

im terminal ausführen.

Es sollte nun die Standard React App anzeigen in einem seperatem Fenster.

Herzlichen Glückwunsch du hast gerade deine erste React-Electron-App gestartet. Zeit um an deiner eigenen Entwicklung zu arbeiten. Sobald du fertig bist, stellst du dir bestimmt die Frage: Und wie bekomme ich die App jetzt in einen Nicht-IT-Menschen freundlichen Zustand?

Zuerst müssen wir einen Packager-Service installieren über das Terminal:

npm install --save-dev electron-packager

ACHTUNG! Jetzt muss gecheckt werden, ob die entsprechenden Dev-dependencies auch in den „normalen“ dependencies enthalten sind (Falls du nicht weißt was hier gemeint ist, schau in die Datei package.json und checke ob unter „dependencies“ die gleichen stehen wie unter „devDependencies“). Ggf. nochmal npm install ausführen.

In der package.json unter dem Punkt name folgendes einfügen:

"homepage": ".",

Jetzt muss ein Build erstellt werden:

npm run build

Und um die App bereitzustellen kann nun der Packager verwendet werden:

electron-packager . <AppName freiwählbar> --overwrite --plattform=mac

In der Konsole wird nun das Verzeichnis ausgegeben, in welcher die App liegt.