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
parnpm 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:
- 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();
}
- 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
Top comments (0)