Base di partenza: configurazione `package.json` in stile LibrePM

Questa guida spiega come usare una configurazione npm + Electron + Vite + electron-builder simile a quella del progetto LibrePM per creare nuove applicazioni desktop che:

• si sviluppano con tooling npm moderno
• usano una UI web locale renderizzata in Electron
• generano build desktop multipiattaforma
• producono anche pacchetti .deb installabili su Debian/Ubuntu e derivate in modo ordinato
• possono includere anche risorse esterne, ad esempio un backend `.jar`, binari, template, file statici o altri asset di runtime

L’obiettivo non è solo “far partire Electron”, ma usare una struttura replicabile per nuovi progetti con una pipeline di build pulita, comprensibile e pronta per crescere.

Il `package.json` di LibrePM implementa una pipeline molto concreta:

• Vite costruisce il frontend
• *Electron avvia l’app desktop * electron-builder impacchetta l’app per macOS, Windows e Linux * la build desktop include anche risorse extra esterne al bundle frontend * su Linux sono esplicitati i target `AppImage`, `snap` e `deb` (è possibile il `flatpak` ma non è molto stabile) * per Linux viene personalizzato anche il blocco `desktop`, utile per il file `.desktop` così da permettere l'inserimento di icone e altri oggetti utili alla build * in LibrePM la build completa lancia prima il backend Java con `gradlew bootJar`, poi il frontend Vite, poi il packaging Electron * NOTA BENE: il backend Java può essere sostituito con uno Python/Go/altri linguaggi a scelta, purché si espliciti nel pacchetto e si includa poi tutto il necessario In pratica è una soluzione ideale quando vuoi costruire una desktop app npm-based ma con capacità più enterprise rispetto a una semplice web app. ===== 3. Anatomia della configurazione ===== Di seguito i punti più importanti della configurazione di partenza e il loro significato operativo ==== 3.1 Metadati di base ==== <code> ```json { “name”: “nometuaapp-desktop”, “version”: “0.1.0”, “description”: “NomeTuaApp - Descrizione”, “type”: “module”, “main”: “electron/main.cjs” } ``` </code> ==== Perché conta ==== * `name` influenza il nome tecnico del pacchetto * `version` viene usata anche negli artefatti prodotti * `description` aiuta packaging e identificazione * `type: “module”` abilita l’uso di ESM nel progetto Node lato tooling * `main` indica l’entrypoint Electron principale ==== Nota importante ==== In questa configurazione il progetto usa ESM a livello package ma il processo principale Electron è in CommonJS con file `.cjs` È una scelta pratica e sensata quando vuoi: * tooling moderno lato frontend * meno attrito nel bootstrap Electron * compatibilità elevata con dipendenze e script di runtime ===== 4. Gli script che rendono la pipeline riusabile ===== Script presenti**

```json
"scripts": {
  "dev": "concurrently -k \"vite --host 127.0.0.1\" \"wait-on http://127.0.0.1:5173 && electron .\"",
  "dev:renderer": "vite",
  "dev:electron": "wait-on http://localhost:5173 && electron .",
  "build": "vite build",
  "dist": "cd .. && ./gradlew bootJar && cd desktop && vite build && electron-builder",
  "preview": "vite preview"
}
```