Differences

This shows you the differences between two versions of the page.

--- guida_operativa_per_creare_applicazioni_npm [2026/04/02 09:29]
team created
+++ guida_operativa_per_creare_applicazioni_npm [2026/04/02 11:10] (current)
team
@@ Line 5: / Line 5: @@
 ===== 1. Scopo della guida =====
-Questa guida spiega come usare una configurazione **npm + Electron + Vite + electron-builder** simile a quella del progetto LibrePM per creare nuove applicazioni desktop che:
+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
@@ Line 19: / Line 19: @@
 Il `package.json` di LibrePM implementa una pipeline molto concreta:
-  * **Vite** costruisce il frontend
+  * Vite costruisce il frontend
-  * *Electron** avvia l’app desktop
+  * Electron avvia l’app desktop
-  * **electron-builder** impacchetta l’app per macOS, Windows e Linux
+  * electron-builder impacchetta l’app per macOS, Windows e Linux
-  * la build desktop include anche **risorse extra** esterne al bundle frontend
+  * 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)
+  * 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
+  * 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
+  * 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.
@@ Line 58: / Line 58: @@
 ==== Nota importante ====
-In questa configurazione il progetto usa **ESM a livello package** ma il processo principale Electron è in **CommonJS** con file `.cjs`
+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:
@@ Line 82: / Line 82: @@
 ```
 </code>
+**Logica operativa**
+  * `dev` avvia frontend Vite ed Electron insieme
+  * `wait-on` evita che Electron parta prima che il renderer sia disponibile
+  * `dist` esegue la pipeline completa con:
+   - build del backend
+   - build del frontend
+   - packaging desktop
+**Perché questa impostazione è utile anche per nuovi progetti**
+Per nuove app puoi mantenere lo stesso schema anche se:
+  * non hai backend Java
+  * hai un backend Node separato
+  * vuoi solo una desktop app frontend-only
+Ti basta sostituire la parte centrale della pipeline
+Ad esempio:
+<code>
+```json
+"dist": "vite build && electron-builder"
+```
+</code>
+oppure
+<code>
+```json
+"dist": "npm run build:backend && vite build && electron-builder"
+```
+</code>
+===== 5. Quando usare questa architettura =====
+Usa questa struttura quando vuoi realizzare:
+  * gestionali desktop
+  * dashboard locali con database locale o backend embedded
+  * software offline-first
+  * tool professionali distribuiti come installer
+  * applicazioni che devono installarsi come programma “vero” su Linux, Windows e macOS
+Non è invece la scelta più leggera se vuoi solo:
+  * una SPA da deployare su hosting web
+  * una utility CLI
+  * una libreria npm
+===== 6. Struttura progetto consigliata =====
+Una struttura chiara per replicare questa configurazione è la seguente
+<code>
+```text
+my-app/
+├─ desktop/
+│  ├─ electron/
+│  │  ├─ main.cjs
+│  │  └─ preload.cjs
+│  ├─ src/
+│  │  ├─ assets/
+│  │  │  ├─ icon.png
+│  │  │  ├─ icon.ico
+│  │  │  └─ icon.icns
+│  │  ├─ App.jsx
+│  │  └─ main.jsx
+│  ├─ dist/
+│  ├─ dist-electron/
+│  ├─ index.html
+│  ├─ package.json
+│  └─ vite.config.js
+├─ backend/
+│  └─ ... eventuale backend
+└─ build/
+   └─ libs/
+      └─ my-backend.jar
+```
+</code>
+**Osservazione importante**
+Nel caso di LibrePM, la cartella `desktop/` vive dentro un progetto più grande e la build desktop pesca il backend da:
+<code>
+```json
+"from": "../build/libs"
+```
+</code>
+Questa è una soluzione ottima per applicazioni ibride in cui il pacchetto desktop deve incorporare un backend compilato altrove.
+===== 7. Dipendenze principali e loro ruolo =====
+**Dipendenze runtime**
+Nel progetto di partenza sono presenti React, i18n, Bootstrap, charting, drag and drop, datepicker, gantt e altri componenti di UI
+Per nuove app non devi copiarle tutte: devi selezionare solo ciò che serve.
+**Dev dependencies essenziali per replicare la pipeline**
+<code>
+```bash
+npm install -D electron electron-builder vite @vitejs/plugin-react concurrently wait-on
+npm install react react-dom
+```
+</code>
+Aggiungi poi solo i pacchetti necessari per la tua UI.
+===== 8. File minimi per partire =====
+==== 8.1 `electron/main.cjs` ====
+<code>
+```js
+const { app, BrowserWindow } = require('electron')
+const path = require('path')
+const isDev = !app.isPackaged
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.cjs'),
+      contextIsolation: true,
+      nodeIntegration: false
+    }
+  })
+  if (isDev) {
+    win.loadURL('http://127.0.0.1:5173')
+  } else {
+    win.loadFile(path.join(__dirname, '../dist/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()
+})
+```
+</code>
+==== 8.2 `electron/preload.cjs` ====

wiki

User Tools

Site Tools

Differences

Page Tools