Questa guida assume che si conoscano i frameworks ElctronJs e React, che si abbia installato nel proprio computer NodeJs e che si possa utilizzare npm o yarn ed npx. Lo scopo è quello di utilizzare Electron per realizzare applicazioni cross platform fruttando lo sviluppo web tramite React, così da rendere il tutto più strutturato e modulare.
Purtroppo questi due framework di sviluppo non sono nativamente comunicanti tra loro, ma essendo uno – Electron – un generatore di pagine che sfrutta Chromium per la renderizzazione e l’altro – React – un framework per lo sviluppo UI, diciamo che con poco lavoro riusciremo a far comunicare entrambe le parti.
Attualmente le versioni dei framework e software che andrò ad utilizzare sono i seguenti:
- node 12.18.3
- npm 6.14.8
- React 17.0.1
- Electron 11.0.3
Creare una React app
Per prima cosa, partiremo dalla creazione di una nuova React app, così da avere l’intero progetto.
$ npx create-react-app <app-name>
Nel mio caso ho realizzato la mia React app dal nome maggioli ed il risultato è il seguente
Adesso con il nostro IDE preferito, apriamo il progetto. (Io utilizzo VSCode, ma qualsiasi editor va benissimo lo stesso)
Per evitare conflitti o malfunzionamenti causati dalle più recenti versioni di Electron, installeremo anche il supporto a Typescript.
Dirigiamoci nella root del progetto e lanciamo npm install typescript
$ cd <app-name>
$ npm install typescript
Al termine delle operazioni dovremmo avere una situazione come questa in foto
Arrivati a questo punto, abbiamo la nostra applicazione basica di React e non ci resta che farla girare sotto Electron, quindi per prima cosa installiamo qualche modulo che ci tornerà comodo:
$ npm install --save cross-env electron-is-dev
Nota: cross-env lo utilizzeremo per impostare da comando la variabile d’ambiente BROWSER=none evitando la normale apertura del browser all’avvio dell’applicazione React.
electron-is-dev è un modulo che da la possibilità di utilizzare le funzioni di debug esclusivamente su ambiente di test o sviluppo
A scaricamento completato, terminiamo la nostra installazione dei moduli aggiungendo ora electron ed electron-builder
$ npm install concurrently wait-on
$ npm install electron --save-dev
$ npm install electron-builder --save-dev
Nota: concurrently ci da la possibilità di eseguire più applicazioni node simultaneamente, mentre wait-on è un modulo che ci permetterà letteralmente di “attendere” una risposta.
Bene! Adesso abbiamo tutto il necessario per lanciare il nostro progetto. Purtroppo per noi però, la cosa non è proprio finita qui.
Infatti adesso dovremmo integrare React in Electron, attraverso pochi e semplici step.
Step 1: Generare il file electron.js
Nella cartella del nostro progetto, creiamo un file chiamato electron.js e posizioniamolo all’interno della cartella ./public
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const isDev = require("electron-is-dev");
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 900,
height: 680
});
/**
* Controllo di versione
*/
mainWindow.loadURL(
isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html")}`
);
mainWindow.on("closed", () => (
mainWindow = null
))
}
app.on("ready", createWindow)
app.on("window-all-closed", () => {
process.platform !== "darwin" && app.quit()
})
app.on("activate", () => {
mainWindow === null && createWindow()
})
Step 2: Modifica del file package.json
Ora non ci resta che modificare il file package.json in modo da eseguire sia gli script di React, che quelli di Electron.
Andremo ad aggiungere delle definizioni che servono esclusivamente ad Electron in fase di build ed i relativi comandi di start/build/etc con l’ingresso del nuovo main file che abbiamo appena creato.
"name": "maggioli",
"version": "0.1.0",
"private": true,
"author": {
"name": "Stefano Pascazi",
"email": "stefano.pascazi@maggioli.it",
"url": "https://www.stefanopascazi.com"
},
"build": {
"appId": "com.maggioli"
},
"main": "public/electron.js",
Ed aggiungiamo i comandi:
"scripts": {
"react:start": "react-scripts start",
"react:build": "react-scripts build",
"react:test": "react-scripts test",
"react:eject": "react-scripts eject",
"electron:build": "electron-builder",
"release": "npm run react:build && npm run electron-builder --publish=always",
"build": "npm run react:build && npm run electron:build",
"start": "concurrently \"cross-env BROWSER=none npm run react:start\" \"wait-on http://localhost:3000 && electron .\""
},
Abbiamo finito! Non ci resta che testare la nostra applicazione.
$ npm start
Oppure se vogliamo fare la nostra build:
$ npm run build
Tips. Come si legge dal package.json, ho lasciato – riscritto in realtà – anche i comandi per interagire con React o Electron singolarmente, in questo modo abbiamo comunque la possibilità di visualizzare la nostra React app via browser o di eseguire delle build di Test.