Electron — Apps desktop avec les technos web

mon-app/
├── package.json
├── main.js          ← Main Process (Node.js)
├── preload.js       ← Pont sécurisé main ↔ renderer
└── renderer/
    ├── index.html
    ├── styles.css
    └── app.js       ← Renderer Process (Chromium)

# Créer un nouveau projet
mkdir mon-app && cd mon-app
npm init -y

# Installer Electron
npm install --save-dev electron

# Ou utiliser le template officiel (recommandé)
npm create electron-vite@latest
cd mon-app && npm install

# Lancer en mode développement
npm run dev

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'),
      contextIsolation: true,   // sécurité : obligatoire
      nodeIntegration: false    // sécurité : désactiver
    }
  })
  win.loadFile('renderer/index.html')
}

app.whenReady().then(createWindow)

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('api', {
  // Renderer → Main
  ouvrirFichier: () => ipcRenderer.invoke('dialog:open'),
  lireFichier:   (p) => ipcRenderer.invoke('fs:read', p),

  // Main → Renderer (événements)
  onProgress: (cb) => ipcRenderer.on('progress', (_, v) => cb(v))
})

const { ipcMain, dialog } = require('electron')
const fs = require('fs')

ipcMain.handle('dialog:open', async () => {
  const { filePaths } = await dialog.showOpenDialog({ properties: ['openFile'] })
  return filePaths[0]
})

ipcMain.handle('fs:read', async (_, path) => {
  return fs.promises.readFile(path, 'utf8')
})

// window.api est exposé par le preload — pas d'accès Node.js direct
const btn = document.getElementById('open')
btn.addEventListener('click', async () => {
  const filePath = await window.api.ouvrirFichier()
  const content  = await window.api.lireFichier(filePath)
  document.getElementById('content').textContent = content
})

# Installer electron-builder
npm install --save-dev electron-builder

# Package.json — configuration build
{
  "build": {
    "appId": "com.monapp.desktop",
    "win": { "target": ["nsis", "portable"] },
    "mac": { "target": "dmg", "category": "public.app-category.utilities" },
    "linux": { "target": ["AppImage", "deb"] }
  }
}

# Générer les installateurs pour toutes les plateformes
npx electron-builder --win --mac --linux