Electron

Points forts

Domaines d'utilisation

• Éditeurs de code et outils pour développeurs
• Clients de bureau de messagerie et de collaboration
• Applications métier internes
• Proposer un produit web existant en application de bureau

Installation

1. 1

   Préparer Node.js

   Electron s'installe et se lance via Node.js et npm. Installez une version LTS de Node.js et vérifiez que les deux versions s'affichent.

   node -v && npm -v

   Copier
2. 2

   Ajouter Electron à un projet

   Créez un package.json dans un nouveau dossier et installez electron en dépendance de développement. Définissez ensuite le champ main sur main.js et ajoutez un script start qui lance electron .

   mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron

   Copier
3. 3

   Démarrer avec Electron Forge

   Pour un projet qui inclut déjà l'empaquetage et la publication, utilisez la commande de création d'Electron Forge, l'outil officiel. Dans le dossier généré, npm start lance l'application.

   npm init electron-app@latest my-app

   Copier

Votre premier programme

Ouvrir une première fenêtre

main.js est le point d'entrée du processus principal. Une fois l'application prête, il crée une BrowserWindow de 800×600 et charge le fichier index.html du même dossier. Sous macOS, les applications restent habituellement ouvertes après la fermeture de la dernière fenêtre ; l'application ne se ferme donc que sur les autres plateformes. Placez un index.html simple à côté de main.js et lancez npm start.

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('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()
})

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

Outils du quotidien

Electron Forge

Outil officiel tout-en-un pour créer le projet, lancer le développement, empaqueter, produire les installateurs et publier.

electron-builder

Outil d'empaquetage très répandu pour les installateurs multiplateformes, la signature de code et les mises à jour automatiques.

Electron Fiddle

Bac à sable officiel pour écrire de petites expériences et les exécuter avec différentes versions d'Electron.

Playwright

Lance votre application Electron pour des tests de bout en bout qui pilotent ses fenêtres et évaluent du code dans le processus principal.

Documentation officielle et ressources

• OfficielElectron
• OfficielElectron Documentation
• OfficielElectron Forge
• ApprendreElectron Tutorial
• ApprendreElectron Fiddle
• RéférenceBrowserWindow API
• RéférenceElectron Security Checklist
• Communautéelectron/electron on GitHub

Langages

• TypeScriptTypeScript ajoute des types statiques à JavaScript : il repère les erreurs avant l'exécution et facilite la maintenance des gros projets.
• JavaScriptJavaScript est un langage de programmation dynamique, normalisé sous le nom d'ECMAScript, qui s'exécute dans tous les navigateurs et dans Node.js.