Wie eine React App erstellt wird
React vorbereiten für Electron
Build erstellen für Mac
Lesezeit: 10 Minuten
Der Klassiker: Create React App
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
Projekt anpassen für Electron
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.
Die App bereitstellen
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.