Come installare Electron

Abbiamo visto in precedenza una panoramica su cosa sia Electron e quali siano i vantaggi. Oggi vediamo come si installa. Sebbene questo sia ben descritto sulla pagina dello sviluppatore, il consiglio che viene riportato non è il migliore approccio nel proseguo dello sviluppo di una applicazione.

Partiamo con una base zero, cioè non abbiamo installato nulla. Electron si basa su Node.Js quindi è necessario installare per primo questo software. E’ un progetto open source gratuito, e con esso verrà installato un secondo componente che andremo ad utilizzare molto spesso e risponde al nome di NPM (node package manager).

L’installazione di Node.Js avviene come un normale software attraverso il wizard di installazione ed è disponibile per Windows, MacOS e Linux. Solo per quest’ultimo si deve fare riferimento alla propria distribuzione in quanto può variare in modo consistente, ad esempio nella pagina ufficiale di Node.Js non è specificato il modello per Ubuntu / Debian che però è presente nei repository ufficiali. Consiglio ovviamente di utilizzare la versione LTS e non l’ultima poiché questa ha una “vita” di supporto breve e ci potrebbero essere incompatibilità con i pacchetti che sono ovviamente tarati per la versione a supporto esteso.

Per chi utilizza MacOS può anche fare riferimento (altamente consigliato) al sistema brew. Infatti attraverso di esso potremo mantenere in modo semplice aggiornata la versione di Node.Js con il comando “brew update“. In questo caso conviene dare il comando:

brew search node
==> Searching local taps...
node@8                libbitcoin-node        node                   node@4                 nodebrew               nodenv
leafnode               llnode                 node-build             node@6                 nodeenv

come si vede il risultato ritorna varie opzioni. Puntate il vostro interesse su node@8 o comunque la versione seguita dalla chiocciolina, sono le versioni LTS. Scegliete la vostra (ad esempio node@8 al momento in cui scrivo).

brew install node@8

Successivamente, come già anticipato, tutte le patch del ramo 8 saranno comprese ed installate con il comando “brew update” che si occuperà di scaricare e installare il necessario per noi.

Indipendentemente dalla strada scelta ora dovremo avere installato Node.Js sul nostro sistema, per fare una veloce verifica di buon proseguimento sarà sufficiente aprire una console a linea di comando del vostro sistema operativo e impartire il comando

node -v
v8.11.1

Come vedete nel mio caso ha tornato il risultato v8.11.1, questo significa che Node è installato e funzionate!

A questo punto creiamo una cartella con il nome e dove vogliamo iniziare un nuovo progetto. Entriamo con la linea di comando all’interno della cartella appena creata e diamo il comando “npm init” che, sempre a linea di comando, ci pone delle domande piuttosto semplici:

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) test
version: (1.0.0) 
description: solo per mostrare npm init
entry point: (index.js) main.js 
test command: ./node_modules/.bin/electron .
git repository: 
keywords: prova
author: Walter Tosolini
license: (ISC) 
About to write to /pathname/to/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "solo per mostrare npm init",
  "main": "main.js",
  "scripts": {
    "test": "./node_modules/.bin/electron ."
  },
  "keywords": [
    "prova"
  ],
  "author": "Walter Tosolini",
  "license": "ISC"
}


Is this ok? (yes) yes

Il risultato sarà la sola creazione di un file chiamato package.json che permette a NPM di mantenere un registro e reinstallare o condividere il progetto su altri computer.

Siamo quindi arrivati al punto di installare Electron, e qui a mio avviso ci sono delle divergenze. Infatti Electron non è propriamente un programma come Node.Js con il suo setup, ma è un modulo di node medesimo, benché eseguibile. Infatti molte guide indicano la possibilità di installarlo in modalità globale con il comando “npm install -g electron” dove -g indica appunto la modalità global, cioè viene reso disponibile sulla macchina e non sul singolo progetto.

Per le esperienze maturate trovo che sia conveniente installarlo a livello di progetto, poiché viene tracciato su package.json e viene anche indicata la versione che abbiamo utilizzato per sviluppare l’applicazione. Nel caso di avanzamento di Electron che rende obsolete alcune nostre funzioni è utile, ad esempio dopo un ripristino o un fresh start, ottenere la versione corretta per poi eventualmente svecchiare il codice. Con la versione globale rischieremo invece di trovarci con il codice corrotto in partenza con un aggravio di problematiche da risolvere. L’unico inconveniente è lo spreco di spazio su disco; se avete più progetti potreste avere N versioni uguali, ovvero circa 130/150 mega di spazio cadauno.

Quindi il comando che suggerisco è quello della installazione locale in modalità sviluppo:

npm install --save-dev electron

segue lo scarico e installazione da parte di NPM dell’eseguibile corretto in base al vostro sistema operativo. Il risultato sarà (oltre all’aggiornamento di package.json) che avrete una nuova cartella che si chiama node_modules al cui interno troverete moltissime altre sotto cartelle. Quella che a noi interessa sarà la cartella .bin (attenzione che è una cartella nascosta in Linux e MacOS) al cui suo interno troveremo l’eseguibile electron.

Se apriamo con un editor di testo package.json vedremo una sezione che si chiama “scripts“. Io ho messo preventivamente al valore di test proposto dal wizard, il comando “./node_modules/.bin/electron .” Di seguito come appare il file package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "solo per mostrare npm init",
  "main": "main.js",
  "scripts": {
    "test": "./node_modules/.bin/electron ."
  },
  "keywords": [
    "prova"
  ],
  "author": "Walter Tosolini",
  "license": "ISC",
  "dependencies": {
    "electron": "^2.0.0"
  }
}

A questo punto per avviare l’applicativo una volta iniziato lo sviluppo (in questa fase darebbe errore perché manca il file main.js dichiarato nella voce main) sarà sufficiente dare il comando npm test per avviare l’eseguibile electron del proprio pacchetto e dichiarato nel package.json.

Conclusioni.

Si tratta di un piccolo sneak-peak alla documentazione originale di Electron, con la spiegazione di come e perché lo utilizzo io personalmente. Al momento non ho trovato controindicazioni se non quella dello spazio utilizzato. Se qualcuno ha qualche altra contro indicazione che magari non ho ancora incontrato, sarebbe bello saperlo (i commenti qui sotto sono aperti al pubblico).