ElectronJS

Un paio di anni fa avevo scritto una web app che, finita e pronta per entrare in produzione, non e' mai stata rilasciata....adesso voglio vedere di trasformarla in una applicazione desktop con ElectronJS


Si crea una directory ed una volta entrati in questa si digita

npm init

a questo punto vengono richieste delle informazioni (come il package name, la version e cosi' via) al termine delle quali viene creato il file package.json

si deve modificare il package.json con le indicazioni di start che puntano ad electron
---------------
{ "name": "tua-app", 

"version": "0.1.0", "

main": "index.js", 

"scripts": 

     { "start": "electron ." } 

}

---------------

a questo punto si installa Electron 

npm install --save-dev electron

il file di lancio di Electron e' index.js ed ha una forma del tipo

----------------------------------
const { app, BrowserWindow } = require('electron')

 function createWindow () {

 // Crea la finestra del browser 

 win = new BrowserWindow({ width: 800, height: 600 }) 

// e viene caricato il file index.html dell' app. 

win.loadFile('index.html') 

} 

app.on('ready', createWindow)
------------------------

a questo punto ho inserito la web app che avevo scritto un paio di anni fa nella directory (con tutti gli stessi file che avevo sul web server) ed e' bastato inviare il comando

npm start

per avere la web app come un programma che gira in locale.
A questo punto sarebbe carino avere la applicazione in un pacchetto (in modo che sia un eseguibile come un altro per l'utente finale) e cio' si ha con electron packager

npm install -g electron-packager

electron-packager .  (attenzione al punto)

si creera' una subdir con il file in formato eseguibile ed una directory (bastera' distribuire il contenuto della directory in uno zip .. nel mio caso triage-electron-darwin-x64). In questo modo il codice e' pero' completamente leggibile. Puo' essere piu' comodo (non sicuro perche' comunque si riesce a leggere in ogni caso ma non in modo semplice) digitare il comando

electron-packager .  --asar

questo comando invece crea pacchetti per tutti i sistemi operativi suppportati

electron-packager .  --all

si puo' anche indicare una icona con lo switch --icon=assets/icons/png/1024x1024.png

fatto 30 faccciamo 31 ovvero l'installer per l'applicazione (nello specifico per Mac)

npm install electron-installer-dmg -g
(al momento della scrittura di questo post, nonostante la procedura sia corretta, non riesco a creare il dmg perche' su Mac ho un problema sulle dipendenze di una libreria che non si compila