MacOS con Capacitor Electon

creare un foder

inizializza Capacitor

npm install @capacitor/core @capacitor/cli
npx cap init "MyApps" "it.patachina.myapps" --web-dir=web

inserisci in name il nome che vuoi x es MyApps

in id xesemoio it.patachina.myapps

in Web asset directory metti web (la dir dove si trova il file statico)

aggiungi Electon

npm install @capacitor-community/electron electron
npx cap add @capacitor-community/electron

copia il file statico nella cartella web

per esempio

/web/index.html
/web/style.css
/web/app.js

build e sync

npx cap sync

avvia l'app macOS per testare se funziona

npx cap open @capacitor-community/electron

crea il pacchetto .app

npm install electron-builder --save-dev

modifica il tuo package.json inserendo alla fine

  "scripts": {
    "electron:build": "electron-builder -c electron-builder.json"
  }

oppure per una versione più semplice

  "scripts": {
    "electron:build": "electron-builder"
  }

inserisci anche i campi name,version,description,author,main

inoltre

"electron": "^39.2.7"

deve essere in devDependencies non dependencies il file deve diventare

{
  "name": "MyApps",
  "version": "1.0.0",
  "description": "Cross-platform launcher built with Capacitor and Electron",
  "author": "Fabio",
  "main": "electron/main.js",
  "dependencies": {
    "@capacitor-community/electron": "^5.0.1",
    "@capacitor/cli": "^7.4.4",
    "@capacitor/core": "^8.0.0"
  },
  "devDependencies": {
    "electron": "^39.2.7",
    "electron-builder": "^26.0.12"
  },
  "scripts": {
    "electron:build": "electron-builder -c electron-builder.json"
  }
}

nella root aggiungi il file electron-builder.json

{
  "appId": "it.fabio.myapps",
  "productName": "MyApps",
  "directories": {
    "output": "dist-electron"
  },
  "files": [
    "electron/**/*",
    "web/**/*"
  ],
  "mac": {
    "category": "public.app-category.productivity",
    "icon": "electron/assets/casina.icns",
    "identity": null,
    "hardenedRuntime": false,
    "gatekeeperAssess": false,
    "notarize": false
  },
  "win": {
    "target": "nsis"
  },
  "linux": {
    "target": "AppImage"
  }
}

visti i tempi lunghi di certificazione solo quando va bene puoi modificare in

    "identity": "MyCustomCert",

vedi sotto come creare la MyCustomCert

copiare casina.icns (macos vuole solo quella estensione)

cp icons/casina.icns electron/assets/

in electron/assets/

creare in electron il file main.js

nano electron/main.js

e inserire

// electron/main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

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

  win.loadFile(path.join(__dirname, '../web/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();
});

ora puoi builare

npm run electron:build

Genera chiave privata + certificato con estensioni Code Signing

openssl req -x509 -nodes -days 365 \
  -newkey rsa:2048 \
  -keyout mycert.key \
  -out mycert.crt \
  -config codesign.cnf

Unisci chiave + certificato in un PEM

cat mycert.key mycert.crt > mycert.pem

Importa nel portachiavi login

security import mycert.pem -k ~/Library/Keychains/login.keychain-db -A
```

rendere il certificato attendibile per la firma codice

1️⃣ Apri Accesso Portachiavi
Applicazioni → Utility → Accesso Portachiavi

2️⃣ Colonna sinistra → seleziona login
3️⃣ Colonna centrale → vai su I miei certificati
4️⃣ Fai doppio clic su MyCustomCert
5️⃣ Vai nella sezione Attendibilità
6️⃣ Imposta:
👉 Quando si usa questo certificato: Considera sempre attendibile
7️⃣ Chiudi la finestra
macOS ti chiede la password → conferma.