# 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.