1°/ Principes
L'objectif d'électron est de construire un exécutable à partir du code d'une application web de type SPA, par exemple écrite en vuejs. Pour ce faire, electron embarque dans l'exécutable un moteur d'interprétation JS, qui va afficher le résultat dans une fenêtre classique, telle que celle qu'on crée dans une application Java ou Qt.
2°/ Avec vuejs
Pour créer une application electron à partir d'un projet vuejs, la première étape est d'inclure le plugin electron pour vuejs au projet :
vue add electron-builder
Au cours de l'installation, il est demandé quelle version d'electron doit être utilisée. Généralement, on prend la plus récente, sauf raison impérieuse.
Après l'installation, la différence la plus notable est l'apparition d'un fichier background.js dans le répertoire src. Ce fichier contient les instructions permettant notamment de créer la fenêtre principale et de "lancer" la page initiale de l'application.
Pour faire un test en mode développement, il suffit de lancer :
npm run electron:serveUne fenêtre est créée, relativement similaire à celle d'un navigateur, puisque l'on a accès à l'inspecteur, et que l'on peut suivre des URLs externes.
Pour créer l'exécutable, il faut lancer :
npm run electron:buildLe résultat est placé dans le répertoire dist_electron, avec potentiellement plusieurs versions d'exécutables :
- app image,
- conteneur snap,
- répertoire avec le fichiers nécessaires
- ...
Sous linux, il est possible de configurer electron pour qu'il produise des fichiers .deb
3°/ Problèmes classiques
3.1°/ mode de l'historique de vue-router.
Lorsque l'on crée la version de production, il faut que vue-routeur gère l'historique de navigation dans un mode nommé hash. Généralement, le mode par défaut est history.
Pour régler ce problème, il suffit d'éditer le fichier définissant les routes, contenant généralement la création de l'instance de vue-router. Lors de cette instanciation, il suffit de régler le mode en fonction de si on utilise electron ou non :
export default new Router({
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
base: process.env.BASE_URL,
routes
})
3.2°/ certificats SSL invalides
Il est fréquent qu'un site ou une API utilise des certificats ssl auto-signé, qui ne sont donc pas reconnus par les navigateurs. Dans ce cas, un message d'alerte apparaît et l'on peut passer outre en ajoutant une exception pour le site. En revanche, ce mécanisme d'exception n'est pas disponible dans une application electron. Il faut donc le faire par des instructions.
Pour cela, il faut éditer le fichier background.js mentionné plus haut et ajouter dedans :
// SSL certificate error pass-through
app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
if (url.startsWith("https://localhost:4567/")) {
event.preventDefault()
callback(true)
} else {
callback(false)
}
})
Le test sur l'URL doit bien entendu être modifié pour correspondre à l'adresse du site ou de l'API qui fonctionne avec des certificats auto-signés.
ATTENTION : en production, il convient d'éviter ce genre de "contournement" et utiliser de vrais certificats, reconnus par les navigateurs.