Comment créer une application Electron avec vite
Tags: javascript, electron, svelte, vite
Published: 2021-12-09 20:27:33

**Note:** This article is available in English [here](https://dev.to/olyno/how-to-create-an-electron-application-with-vite-im)

Pouvoir créer un logiciel avec Electron ce n'est pas si compliqué. [Pleins de boilerplates](https://github.com/sindresorhus/awesome-electron#boilerplates) existent, la [documentation](https://www.electronjs.org/docs/latest/tutorial/quick-start) 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](https://www.electronforge.io/). 
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:

```shell
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:

```json
"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.

```js
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:

```js
// 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). 

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

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

```js
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:

```js
// 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