> ## Content Index
> Fetch the complete content index at: https://www.sfeir.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# ViteJS, ne ratez pas le train !
- URL: https://www.sfeir.dev/front/vitejs-ne-ratez-pas-le-train/
- Published: 2023-07-20T08:34:49.000Z
- Updated: 2024-02-15T13:17:35.000Z
- Description: ViteJS, dernier né de Evan You, est le bolide des outils de build front-end. Propulsant votre développement avec des fichiers servis à la demande et optimisé par Rollup en production, c'est le compagnon de route rêvé. ViteJS, c'est la promesse d'un développement web à grande vitesse.
- Author: Thomas Sloboda
- Tags: Front

Si vous êtes développeur web depuis longtemps, vous avez sûrement connu l'époque des projets où chaque page était un fichier HTML statique dans lequel on incluait les scripts nécessaires aux interactions avec les API.

  
Aujourd'hui le web a bien évolué. Avec le foisonnement d'outils, de technologies, de frameworks, construire un projet web est devenu plus complexe. Webpack, Babel, ESLint, Prettier, PostCSS, SASS,... c'est un véritable ecosystème à maitriser. C'est là que ViteJS entre en jeu.

### ViteJS, c'est quoi ?

  
ViteJS est un outil de build moderne qui tend à offrir aux développeurs un moyen de construire des applications web plus rapidement et plus efficacement. Emprunté du français, "Vite" signifie rapide et c'est exactement l'objectif que souhaitait atteindre son créateur Evan YOU (aussi à l'origine de Vue.js): une rapidité pour le développement et le build des applications web modernes.  

### Comment ça marche ?

**Le mode développement**  
Pour le serveur de développement, ViteJS utilise un serveur ESM qui sert les fichiers via l'API HTTP native des modules ECMAScript. Cela signifie que vos fichiers sont servis à la demande, plus besoin d'attendre que l'application soit recompilée pour être visualisée. Une fois que vous aurez testé ce serveur, vous vous demanderez sûrement comment vous faisiez avant !  

**Le mode production**  
Pour la production, ViteJS utilise Rollup pour construire et empaqueter votre application. Pourquoi Rollup ? Pour la taille des fichiers de sortie, et en termes de vitesse, la taille compte !

**Comment commencer avec ViteJS ?**

  
Pour démarrer un projet ViteJS il existe le générateur de projet, comme pour beaucoup d'outils Javascript :

```shell
npm create vite@latest

```

  
Vous pouvez aussi choisir de spécifier directement un modèle parmi la liste (non-exhaustive) : vanilla, React, Vue.js, Lit, Svelte.

```shell
npm create vite@latest mon_projet -- --template react

```

  
À l'instar de create-react-app, cette commande va vous créer la structure et la configuration nécessaire au démarrage d'un projet React.  
Vous n'aurez alors plus qu'à exécuter cette suite de commande pour démarrer votre serveur :  

```shell
cd mon_projet
npm install
npm run dev

```

  
Votre application est maintenant accessible à l'adresse http://localhost:5173.  

### Montez dans le train

  
ViteJS est rapide et efficace pour les projets web modernes alors n'attendez plus, donnez sa chance à cet outil formidable. Il est peu probable que vous en sortiez déçu quelque soit votre expérience en développement front-end.