Installazione e Setup

Per iniziare a sviluppare con Electron è necessario configurare l’ambiente di sviluppo con Node.js e creare un progetto con le dipendenze corrette.

Prerequisiti

Prima di installare Electron, assicurati di avere:

Node.js versione 18 o superiore
npm (incluso con Node.js) o yarn

Verifica l’installazione:

node --version    # v18.0.0 o superiore
npm --version     # 9.0.0 o superiore

Creare un Nuovo Progetto

Metodo 1: Electron Forge (Consigliato)

Electron Forge è la toolchain ufficiale per creare, sviluppare e distribuire applicazioni Electron:

npm init electron-app@latest mia-app
cd mia-app
npm start

Forge crea automaticamente un progetto configurato con:

Script di build e packaging
Hot reload durante lo sviluppo
Configurazione per la distribuzione

Metodo 2: Setup Manuale

Se preferisci un controllo completo, puoi configurare il progetto manualmente:

mkdir mia-app-electron
cd mia-app-electron
npm init -y
npm install electron --save-dev

Configurazione del package.json

Dopo l’installazione, modifica il package.json per configurare l’entry point e gli script:

{
  "name": "mia-app-electron",
  "version": "1.0.0",
  "description": "La mia prima app Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron . --enable-logging"
  },
  "devDependencies": {
    "electron": "^33.0.0"
  }
}

I campi importanti sono:

main: il file di entry point del Main Process (solitamente main.js)
scripts.start: il comando per avviare l’applicazione

Struttura Minima del Progetto

Crea i file essenziali per un’applicazione Electron funzionante:

mia-app-electron/
├── package.json
├── main.js          # Main Process
├── preload.js       # Preload Script
├── index.html       # Interfaccia utente
├── renderer.js      # Logica del Renderer
└── styles.css       # Stili

main.js

const { app, BrowserWindow } = require('electron');
const path = require('node:path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self'">
  <title>La Mia App Electron</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Benvenuto in Electron!</h1>
  <p>Versione Node: <span id="node-version"></span></p>
  <p>Versione Electron: <span id="electron-version"></span></p>
  <script src="renderer.js"></script>
</body>
</html>

preload.js

const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  electron: () => process.versions.electron,
});

Avviare l’Applicazione

Esegui l’applicazione con:

npm start

Si aprirà una finestra desktop con la tua applicazione. Ogni modifica al codice richiede il riavvio dell’app (oppure puoi configurare il hot reload).

Configurare il Hot Reload

Per ricaricare automaticamente l’applicazione durante lo sviluppo, installa electron-reload:

npm install electron-reload --save-dev

Aggiungi in cima al file main.js (solo per sviluppo):

if (process.env.NODE_ENV !== 'production') {
  require('electron-reload')(__dirname);
}

Configurare TypeScript (Opzionale)

Per usare TypeScript con Electron:

npm install typescript ts-node @types/node --save-dev
npx tsc --init

Configura il tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Strumenti di Sviluppo Utili

Electron DevTools: Premi Ctrl+Shift+I (o Cmd+Option+I su macOS) per aprire i DevTools del browser
Electron Fiddle: Ambiente sandbox per sperimentare con Electron senza configurare un progetto
Devtron: Estensione DevTools specifico per Electron per ispezionare IPC, eventi e dipendenze