Comment créer une application Electron avec vite

Note: This article is available in English here

Pouvoir créer un logiciel avec Electron ce n'est pas si compliqué. Pleins de boilerplates existent, la documentation est très bien...
Cependant, je n'ai rien trouvé qui explique comment créer un projet Electron avec Vite. Alors, allons droit au but.

Créer l'application Vite par défaut

Pour cela rien de plus simple. Je me baserais sur Yarn pour mes installation. A l'aide de la commande:

yarn create vite

Il suffit de rajouter le nom de notre projet (dans notre cas "electron-vite"), et de choisir un framework (dans notre cas "Svelte").

Nous allons ensuite dans le dossier de notre projet et installons nos dépendances:

cd electron-vite
yarn install

Installer le builder

Le builder nous permettra de créer l'application finale et de déployer le logiciel en production. Nous utiliserons Electron Forge.
Nous pouvons l'installer avec la commande suivante :

yarn add --dev @electron-forge/cli

Une fois le CLI de la forge installé, il ne nous reste plus qu'à le configurer. Heureusement pour nous, Electron Forge s'occupe de tout. Il ne nous reste plus qu'à l'exécuter:

yarn electron-forge import

Et les différents scripts seront ajoutés à notre fichier package.json

Editons le package.json

Ils nous restent encore quelques dépendances à installer:

concurrently # Pour lancer Vite et Electron en même temps
cross-env    # Pour pouvoir définir un environnement au lancement

Pour les installer, on aura juste à faire:

yarn add -D concurrently cross-env

Maintenant que nous avons toutes les dépendances installées, nous avons plus qu'à setup les différents scripts:

"scripts": {
  "start": "npm run build && npm run electron:start",
  "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
  "build": "vite build",
  "preview": "vite preview",
  "electron:dev": "cross-env IS_DEV=true electron-forge start",
  "electron:build": "electron-forge make",
  "electron:package": "electron-forge package"
},

Vous pouvez modifier les yarn par npm run dans les différents scripts

La variable d'environnement IS_DEV peut bien entendu être renommé en NODE_ENV par exemple.

Il nous manque 3 champs à rajouter/modifier:

"main": "app/index.js",
"description": "Boilerplate Electron + Vite + Svelte",
"license": "MIT",

Le champs main sera le point d'entrée de notre application Electron.

Les champs description et license sont nécessaire pour pouvoir build Electron avec Electron Forge.

Editons la config de vite

Rien de bien compliqué. Il faudra dans un premier temps que l'on modifie la base de notre application. Si l'application part en production, alors nous allons chercher de façon relative les fichiers à importer (comme les assets). Puis, on aura juste à modifier le dossier de build afin qu'il soit relié à notre application Electron.

import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.IS_DEV !== 'true' ? './' : '/',
  build: {
    outDir: 'app/build',
  },
  plugins: [svelte()],
});

On setup Electron

Pour créer notre application Electron, on a juste à créer un fichier app/index.js qui contiendra le code par défaut d'Electron:

// app/index.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const isDev = process.env.IS_DEV === 'true';

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  // Open the DevTools.
  if (isDev) {
    mainWindow.loadURL('http://localhost:3000');
    mainWindow.webContents.openDevTools();
  } else {
    // mainWindow.removeMenu();
    mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow();
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Dans le code ci-dessus, il y a 2 choses à noter:

1. Le code suivant est nécessaire si vous souhaitez build votre application avec "squirrel" (un model de build pour Windows).

if (require('electron-squirrel-startup')) {
  app.quit();
}

1. Concernant la façon de récupérer le contenu:

if (isDev) {
  mainWindow.loadURL('http://localhost:3000');
  mainWindow.webContents.openDevTools();
} else {
  // mainWindow.removeMenu(); // Optionnel
  mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));
}

Si nous sommes en train de dev, nous allons juste charger une url qui sera celle de Vite. Par contre si nous avons build notre application pour la production, alors nous aurons besoin de récupérer le fichier index.html directement.

Enfin, il nous suffit de créer un fichier app/preload.js.

Electron ne supporte pas encore les syntaxes esm, et donc par conséquent, nous allons utiliser le require

On modifie le fichier de config de Svelte

Alors oui, même si notre application est en soit fini, Electron ne supportant pas les syntaxes esm, nous devons modifier les imports/export en require/module:

// svelte.config.js

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
};

Et voilà, vous venez de créer votre logiciel avec Vite et Electron ! Le livereload fonctionne parfaitement, que demander de mieux !

Vous pouvez retrouver le repository ici: https://github.com/frontend-templates-world/svelte-ts-electron-vite