Bootstrap un projet avec TypeScript et Electron

Electron est un framework populaire pour créer des applications desktop multiplateformes en utilisant des technologies web comme HTML, CSS et JavaScript. En combinant Electron avec TypeScript, vous bénéficiez d’un typage fort et d’une meilleure maintenabilité du code. Ce guide vous explique comment bootstrapper un projet Electron avec TypeScript.

Bien qu’il soit souvent critiqué pour sa taille, chaque application embarquant Chromium et Node.js, il a révolutionné le développement d’applications en simplifiant la création de solutions multiplateformes avec une seule base de code.

Des outils comme Visual Studio Code, Slack, Discord ou GitHub Desktop montrent comment Electron a démocratisé les apps multiplateformes en offrant rapidité de développement et cohérence sur Windows, macOS et Linux, malgré le compromis sur la taille.

Prérequis

Node.js et npm installés sur votre machine.
- Téléchargez Node.js depuis le site officiel.
Un éditeur de code comme Visual Studio Code.
Connaissances de base en JavaScript et TypeScript.

Étape 1 : Initialiser le projet

Créez un dossier pour votre projet :

mkdir mon-projet-electron  
cd mon-projet-electron

Initialisez un projet Node.js :
```
npm init -y  
```
Cela génère un fichier package.json avec des valeurs par défaut.

Installez les dépendances principales :

npm install electron typescript --save-dev

Installez les types pour Electron et Node.js :

npm install @types/node @types/electron --save-dev

Étape 2 : Configurer TypeScript

Créez un fichier tsconfig.json à la racine du projet :

{  
  "compilerOptions": {  
    "target": "ES6",  
    "module": "commonjs",  
    "strict": true,  
    "esModuleInterop": true,  
    "skipLibCheck": true,  
    "forceConsistentCasingInFileNames": true,  
    "outDir": "./dist"  
  },  
  "include": ["src/**/*"]  
}

Cette configuration indique à TypeScript de compiler le code en JavaScript dans le dossier dist.

Créez un dossier src pour organiser votre code :
```
mkdir src  
```

Étape 3 : Créer l’application Electron

Dans le dossier src, créez un fichier main.ts :

import { app, BrowserWindow } from 'electron';  
import path from 'path';  

let mainWindow: BrowserWindow;  

function createWindow() {  
  mainWindow = new BrowserWindow({  
    width: 800,  
    height: 600,  
    webPreferences: {  
      nodeIntegration: true,  
      contextIsolation: false  
    }  
  });  

  mainWindow.loadFile(path.join(__dirname, '../public/index.html'));  

  mainWindow.on('closed', () => {  
    mainWindow = null!;  
  });  
}  

app.on('ready', createWindow);  

app.on('window-all-closed', () => {  
  if (process.platform !== 'darwin') {  
    app.quit();  
  }  
});  

app.on('activate', () => {  
  if (mainWindow === null) {  
    createWindow();  
  }  
});

Ce fichier est le point d’entrée de votre application Electron.

Créez un dossier public et ajoutez un fichier index.html :

<!DOCTYPE html>  
<html lang="fr">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Mon Application Electron</title>  
</head>  
<body>  
  <h1>Hello, Electron with TypeScript !</h1>  
</body>  
</html>

Étape 4 : Configurer les scripts npm

Dans le fichier package.json, ajoutez les scripts suivants :
```
"scripts": {  
  "start": "electron .",  
  "build": "tsc",  
  "watch": "tsc -w"  
}  
```
- start : Lance l’application Electron.
- build : Compile le code TypeScript en JavaScript.
- watch : Surveille les changements et recompile automatiquement.
Modifiez le champ main pour pointer vers le fichier compilé :
```
"main": "dist/main.js"  
```

NOTE IMPORTANTE UTILISSATEUR WSL2 (Ubuntu 24.04)

Vous pouvez rencontrer une erreur lors de l’exécution de npm start sur WSL 2:

/home/yourname/yourfolder/Desktop/test/node_modules/electron/dist/electron: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

Pour résoudre ce problème, vous devez installer les librairies suivantes:

sudo apt install libgtk2.0-0t64 libgtk-3-0t64 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb


## Étape 5 : Lancer l'application  

1. Compilez le code TypeScript :  
   ```bash  
   npm run build

Lancez l’application :
```
npm start  
```
Une fenêtre Electron devrait s’ouvrir avec votre application.

Étape 6 : Ajouter des fonctionnalités supplémentaires

Utiliser Preload pour la sécurité

Pour améliorer la sécurité, utilisez un script de preload :

Créez un fichier preload.ts dans src :

import { contextBridge, ipcRenderer } from 'electron';  

contextBridge.exposeInMainWorld('api', {  
  send: (channel: string, data: any) => ipcRenderer.send(channel, data),  
  on: (channel: string, func: Function) => ipcRenderer.on(channel, (event, ...args) => func(...args))  
});

Modifiez main.ts pour inclure le preload :

mainWindow = new BrowserWindow({  
  webPreferences: {  
    preload: path.join(__dirname, 'preload.js'),  
    contextIsolation: true,  
    nodeIntegration: false  
  }  
});

Ajouter React ou Vue

Pour intégrer un framework frontend comme React ou Vue :

Installez les dépendances nécessaires :
```
npm install react react-dom  
```
Configurez un bundler comme Webpack ou Vite pour compiler les fichiers frontend.

Conclusion

Vous avez maintenant un projet Electron fonctionnel avec TypeScript ! Cette configuration vous permet de développer des applications desktop robustes et maintenables. Pour aller plus loin, explorez la documentation officielle d’Electron et celle de TypeScript.

N’hésitez pas à personnaliser ce projet en ajoutant des fonctionnalités ou en intégrant des frameworks frontend. Si vous avez des questions, laissez un commentaire ci-dessous.