4.5 KiB
| title | description | slug | weight | date |
|---|---|---|---|---|
| Démarrage rapide | Installez votre environnement de développement, lancez TrainUs en local, et faites votre première modification. | demarrage-rapide | 1 | 2026-06-16 |
Ce dont vous aurez besoin
- Node.js ≥ 18
- Python ≥ 3.10 (uniquement pour lancer la suite de tests)
- Un navigateur récent — Firefox 111+, Chrome 102+, ou Safari 16.4+. TrainUs s'appuie sur OPFS (Origin Private File System) pour sa base de données, qui n'existe pas dans les navigateurs anciens ni dans les fenêtres de navigation privée.
Cloner et installer
git clone <repo-url>
cd trainUs
npm install
Lancer l'application
npm run dev
Cela démarre le serveur de développement Vite sur http://localhost:5173. Ouvrez-le dans votre navigateur — au premier lancement, TrainUs crée une base de données locale et génère un identifiant utilisateur aléatoire pour vous. Il n'y a rien d'autre à configurer : pas de fichier .env, pas de serveur, pas de compte.
Petit tour de src/
Pas besoin de tout retenir — juste assez pour savoir où chercher :
| Dossier | Ce qu'on y trouve |
|---|---|
views/ |
Un composant Vue par route (ExerciseListView.vue, SettingsView.vue, …) |
components/ |
Des éléments plus petits et réutilisables entre les vues (dialogues, barre d'action, …) |
composables/ |
État réactif + logique partagés entre composants (useExercises, useSessionExecution, …) |
db/ |
Tout ce qui touche à SQLite : le worker, le schéma, et un repository par entité dans db/repositories/ |
i18n/locales/ |
Fichiers de traduction — en.json, fr.json, da.json |
styles/ |
Variables CSS (thèmes) et règles de mise en page globales |
utils/ |
Petites fonctions utilitaires pures (validation, formatage de dates, rendu Markdown, …) |
La page [Référence]({{< relref "technical.fr.md" >}}) couvre tout ça en détail — schéma, routes, chaque composable. Gardez-la ouverte dans un onglet dès que vous travaillez sur quelque chose de concret.
Lancer la suite de tests
TrainUs est testé de bout en bout avec Playwright, piloté depuis Python. Le serveur de développement démarre automatiquement pendant la durée des tests — pas besoin de garder npm run dev lancé séparément.
cd tests
python -m venv .venv
.venv/bin/pip install -r requirements.txt
.venv/bin/playwright install firefox chromium
cd ..
npm test # Firefox uniquement — la cible principale du projet
npm run test:parallel # Firefox + Chromium, en parallèle
Voir tests/README.md dans le dépôt pour la configuration complète si quelque chose ne fonctionne pas du premier coup.
Faire une petite modification
Avant de vous lancer dans quelque chose de réel, ça vaut le coup de boucler la boucle une fois : modifier, voir le rechargement, lancer les vérifications.
-
Avec
npm run devlancé, ouvrezsrc/i18n/locales/en.jsonet changez la valeur de"settings.title"en autre chose — par exemple"Settings (testing)". -
Enregistrez le fichier. Le navigateur devrait se recharger automatiquement et afficher votre changement sur la page Réglages.
-
Annulez la modification, puis lancez le formateur pour vérifier que votre éditeur est bien configuré comme celui du projet :
npm run format:check
C'est toute la boucle de travail : modifier → recharger → vérifier le formatage. La page [Guides pratiques]({{< relref "how-to-guides.fr.md" >}}) détaille des tâches complètes et réalistes (ajouter une langue, ajouter un thème, déployer, ajouter une migration) construites exactement sur cette même boucle.
Pour aller plus loin
- [Guides pratiques]({{< relref "how-to-guides.fr.md" >}}) — des recettes concrètes pour les tâches courantes de contribution.
- [Référence]({{< relref "technical.fr.md" >}}) — architecture, schéma de base de données, routes et chaque composable, en détail.
- [Comprendre l'architecture]({{< relref "understanding-the-architecture.fr.md" >}}) — le pourquoi des choix : local-first, le thread Worker, le système de migration.