Ce guide est conçu pour les débutants. Nous allons transformer votre site web Django en un vrai logiciel installable (.exe) avec son propre logo.
Qu'est-ce qu'Electron JS ?
"Build cross-platform desktop apps with JavaScript, HTML, and CSS"
Electron JS est un framework open-source développé par GitHub qui permet de créer des applications de bureau natives en utilisant des technologies web. Il combine deux outils puissants : Chromium (le moteur de rendu de Google Chrome) et Node.js (pour l'accès au système de fichiers et au matériel).
Pourquoi choisir Electron pour votre projet Django ?
Si Django est le moteur (Backend) parfait pour gérer vos données, Electron est la carrosserie (Frontend) idéale pour transformer ce site en logiciel. Voici pourquoi c'est une solution gagnante :
- ✔ Multiplateforme : Écrivez votre code une seule fois et générez des installateurs pour Windows (.exe), macOS (.dmg) et Linux.
- ✔ Expérience Utilisateur (UX) : Vos utilisateurs lancent un logiciel classique. Pas besoin de naviguer sur un navigateur web, pas d'onglets encombrants, et une présence directe dans la barre des tâches.
- ✔ Accès au Système : Contrairement à un site web classique, Electron peut accéder aux fichiers de l'ordinateur, envoyer des notifications natives, ou gérer les périphériques USB/Série.
- ✔ Utilisé par les Géants : Des applications comme Discord, Slack, VS Code et WhatsApp Desktop sont toutes construites avec Electron. C'est une technologie robuste et éprouvée.
💡 Dans cet article, nous allons utiliser Electron comme un "conteneur" pour votre serveur Django. L'utilisateur lance le logiciel, Electron démarre Django en arrière-plan et affiche l'interface instantanément.
Étape 1 : Préparer votre ordinateur
Installez ces trois outils indispensables si vous ne les avez pas :
- Python : Télécharger ici (Cochez "Add Python to PATH").
- Node.js : Télécharger ici (Prenez la version LTS).
- Un éditeur : VS Code est recommandé.
Étape 2 : Organiser vos dossiers
Créez un dossier vide nommé mon-logiciel. À l'intérieur, placez votre projet Django. Voici à quoi doit ressembler votre structure :
├── mon_projet_django/ (votre code Django actuel)
│ ├── manage.py
│ └── mon_projet/ (settings.py, etc.)
├── assets/
│ └── icon.ico (votre futur logo)
├── main.js (on va le créer)
└── package.json (on va le créer)
Étape 3 : Configurer Django pour le "Mode Desktop"
Ouvrez votre terminal dans le dossier de votre projet Django et installez WhiteNoise :
Ensuite, ouvrez votre fichier settings.py et faites ces 3 modifications :
1. Activer WhiteNoise (pour les images/CSS)
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware', # Ajoutez cette ligne ici
# ... le reste ...
]
2. Configurer les fichiers statiques
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
3. Empêcher la perte de données après installation
# Ce code place votre base de données dans le dossier utilisateur de Windows
if os.name == 'nt':
DATA_DIR = os.path.join(os.environ['APPDATA'], 'MonLogiciel')
os.makedirs(DATA_DIR, exist_ok=True)
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(DATA_DIR, 'db.sqlite3'),
}
}
Étape 4 : Transformer Django en un fichier .EXE
Créez un fichier nommé launcher.py à côté de votre manage.py :
import os, sys
from django.core.management import execute_from_command_line
if __name__ == "__main__":
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mon_projet.settings')
execute_from_command_line(['manage.py', 'collectstatic', '--noinput'])
execute_from_command_line(['manage.py', 'migrate', '--noinput'])
execute_from_command_line(['manage.py', 'runserver', '127.0.0.1:8000', '--noreload'])
Tapez cette commande dans le terminal pour créer le binaire :
Étape 5 : Connecter Electron à Django
Revenez à la racine du dossier mon-logiciel. Installez Electron :
npm install electron --save-dev
Créez le fichier main.js :
const { app, BrowserWindow } = require('electron');
const { spawn } = require('child_process');
const path = require('path');
let djangoProcess;
function createWindow() {
const win = new BrowserWindow({ width: 1000, height: 800 });
// On attend 3 secondes que Django démarre, puis on affiche le site
setTimeout(() => {
win.loadURL('http://127.0.0.1:8000');
}, 3000);
}
app.whenReady().then(() => {
// Lancer le fichier .exe de Django qu'on a créé à l'étape 4
const backend = path.join(__dirname, 'mon_projet_django/dist/django-backend.exe');
djangoProcess = spawn(backend);
createWindow();
});
// Fermer Django quand on quitte le logiciel
app.on('window-all-closed', () => {
if (djangoProcess) djangoProcess.kill();
app.quit();
});
Étape 6 : Créer l'installeur final
Modifiez votre fichier package.json pour ajouter la commande de fabrication :
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"build": {
"appId": "com.monapp.logiciel",
"win": { "target": "nsis" }
}
Tapez enfin :
Félicitations !
Votre logiciel est prêt dans le dossier dist/. Vous pouvez l'envoyer à vos amis !
