Qu'est-ce que Vite ? Guide simple pour créateurs d'applications

Vite (prononcé « vit », comme le mot français « vite ») est un outil de compilation pour les sites et les applications web. Pendant que vous créez, il fait tourner un serveur de développement qui affiche vos modifications dans le navigateur presque instantanément. Quand vous êtes prêt à publier, il regroupe votre code en fichiers petits et optimisés que n'importe quel hébergeur web peut servir. Il est gratuit, open source, et c'est l'outil par défaut derrière de nombreux projets React, Vue et Svelte.

Pourquoi Vite compte quand on crée avec l'IA

Vous ne taperez peut-être jamais une commande Vite, mais si votre application a été créée avec un outil de création par IA, c'est probablement Vite qui la fait tourner. Mythex démarre les nouveaux projets sur Vite + React + TypeScript + Tailwind, sauf si vous demandez autre chose (comment la technologie est choisie).

Savoir ce que fait Vite vous aide à :

• Comprendre l'aperçu. L'aperçu en direct, qui se met à jour pendant que l'IA modifie les fichiers, est généralement un serveur de développement Vite.
• Comprendre le déploiement. Une application Vite devient un dossier de fichiers statiques — HTML, JavaScript, CSS et images — peu coûteux et simple à héberger.
• Lire les messages d'erreur. Quand l'aperçu affiche un bandeau d'erreur rouge ou une page blanche, c'est souvent Vite qui signale qu'un fichier n'a pas pu être compilé.
• Connaître ses limites. Vite compile la partie frontend. Si votre application a besoin d'un backend — une base de données, des clés d'API secrètes, des paiements —, celui-ci fonctionne ailleurs. Voir frontend et backend.

Une analogie du quotidien

Pensez à la cuisine d'un restaurant.

• Pendant la préparation du service (développement), le chef goûte et ajuste chaque plat au fur et à mesure. Il change l'assaisonnement, goûte à nouveau une seconde plus tard. C'est le serveur de développement de Vite : vous modifiez un fichier, la page se met à jour aussitôt, souvent sans perdre ce que vous aviez saisi dans un formulaire.
• Pour une commande de traiteur (production), tout est cuit, portionné, emballé et étiqueté pour bien voyager et pouvoir être servi n'importe où. C'est vite build : votre code est regroupé, réduit et doté de noms de fichiers uniques, prêts pour n'importe quel hébergeur.

Mêmes recettes, deux façons très différentes de les préparer — et Vite fait les deux.

Ce que fait réellement Vite

Une application web moderne se compose de nombreux fichiers : composants, styles, images et bibliothèques tierces. Les navigateurs ne peuvent pas tout utiliser tel quel. Le TypeScript doit devenir du JavaScript, le JSX de React doit être transformé, et les classes Tailwind doivent devenir du CSS.

Vite gère cela selon deux modes :

Les anciens outils regroupaient toute l'application avant d'afficher quoi que ce soit, si bien que le démarrage et la mise à jour d'un gros projet pouvaient prendre beaucoup de temps. L'astuce de Vite consiste à éviter cette étape pendant le développement et à laisser le navigateur charger les fichiers au besoin. Pour la production, il regroupe toujours le code — depuis Vite 8, avec un outil de regroupement appelé Rolldown — car de nombreux petits fichiers sont plus lents pour les visiteurs que quelques fichiers optimisés.

Un exemple concret : ce qu'il y a dans un projet Vite

Voici à peu près à quoi ressemble une petite application Vite + React :

my-app/
  index.html          ← la page HTML unique par laquelle l'application démarre
  package.json        ← liste des bibliothèques et des scripts (dev, build)
  vite.config.ts      ← réglages et extensions de Vite
  src/
    main.tsx          ← démarre React et l'insère dans index.html
    App.tsx           ← le composant principal de votre application
    index.css         ← styles, par exemple @import "tailwindcss";
  public/             ← fichiers copiés tels quels (favicon, robots.txt)

Et les scripts dans package.json :

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Suivons maintenant une seule modification :

1. Vous demandez à l'IA de « mettre le titre en bleu ».
2. Elle modifie une classe dans App.tsx.
3. Vite remarque que le fichier a changé, ne transforme que ce fichier et envoie la mise à jour au navigateur.
4. Le titre devient bleu dans l'aperçu, en général en moins d'une seconde.

Lorsque vous publiez, vite build produit quelque chose comme dist/index.html et dist/assets/index-a1b2c3.js. La partie du nom qui semble aléatoire change à chaque modification du contenu : les navigateurs et les CDN peuvent ainsi garder les fichiers en cache très longtemps sans servir un code périmé.

Variables d'environnement dans Vite

Vite n'expose au code du navigateur que les variables dont le nom commence par VITE_, par exemple VITE_PUBLIC_MAP_ID. C'est une mesure de sécurité : tout ce qui se trouve dans le code du navigateur peut être vu par les visiteurs, donc les clés secrètes ne doivent jamais avoir ce préfixe et doivent rester côté backend. Voir variables d'environnement et secrets.

Termes clés

Idées reçues courantes

• « Vite est un framework. » C'est un outil de compilation. React, Vue ou Svelte est le framework ; Vite le fait tourner et le regroupe.
• « Une application Vite inclut un backend. » Une application Vite standard n'est que frontend. Les bases de données, les connexions et les clés secrètes nécessitent un serveur ou une API à côté.
• « Le serveur de développement peut être mis en ligne. » Il n'est pas conçu pour un trafic réel. Déployez toujours le résultat de la compilation de production.
• « Tout ce qui se trouve dans .env est secret. » Dans une application Vite, les variables VITE_ sont intégrées dans les fichiers que chaque visiteur télécharge.
• « Une page qui renvoie une erreur 404 au rechargement signifie que l'application est cassée. » Dans une application monopage, l'hébergeur doit renvoyer chaque route vers index.html. C'est un réglage d'hébergement — voir comment corriger les erreurs 404 après le déploiement.

Quoi demander à votre outil de création par IA

• « Cette application est-elle uniquement Vite (frontend), ou a-t-elle aussi un backend ? Où tourne chaque partie ? »
• « Lance la compilation de production et corrige les erreurs ou avertissements avant que je publie. »
• « Vérifie qu'aucune clé secrète n'est dans une variable VITE_ ni n'apparaît dans le code frontend. »
• « L'aperçu affiche une page blanche : vérifie les erreurs de la console Vite et du navigateur, puis corrige la cause. » Voir comment corriger une page blanche.
• « Assure-toi qu'un rechargement de n'importe quelle URL de page fonctionne après la publication, et pas seulement sur la page d'accueil. »

Vite dans Mythex

Chaque nouveau projet Mythex démarre sur Vite, sauf si vous demandez Next.js, du HTML statique ou un autre backend. L'aperçu en direct, dans votre bac à sable privé, se met à jour pendant que l'agent modifie les fichiers, et Publier compile l'application et la déploie : vous n'avez aucun hébergement à configurer vous-même. Si vous avez besoin plus tard d'une API ou d'une base de données, demandez-le dans le chat : Mythex peut ajouter un service backend à côté du frontend Vite (applications multi-services).

Questions