Installation et prise en main de Vite

Bienvenue dans ma veille technologique. Cette semaine, nous allons apprendre comment créer et exécuter son propre projet Vite puis nous allons inspecter la structure de base d’un projet de ce type.

Prérequis

Pour créer son projet Vite, il est important d’avoir au moins la version 18 de Node.js installée sur le poste de travail qui sera utilisé pour exécuter le serveur de développement. Vous pouvez utiliser l’éditeur de code de votre choix; personnellement j’utilise Visual Studio Code pour sa gratuité, sa légèreté et sa grande sélection d’extensions. Pour ce tutoriel, j’utiliserai le gestionnaire de paquets npm qui est installé en même temps que Node.js, mais d’autres gestionnaires comme Yarn, pnpm et Bun peuvent aussi être utilisés pour construire un projet Vite.

Échafauder un projet Vite

Pour commencer, vous allez créer un nouveau projet Vite en lui spécifiant le nom de votre application.

npm create vite@latest mon-app-vite

L’installateur vous demandera quel framework vous souhaitez utiliser; dans notre cas, nous utiliserons la version Vanilla. Puis, vous aurez le choix entre JavaScript ou TypeScript; j’utiliserai JavaScript. Un nouveau dossier sera créé avec le nom du projet spécifié précédemment.

Vite vous offre aussi la possibilité d’échafauder un projet avec votre framework favori. Par exemple, si je souhaite utiliser Vue.js, je peux lui spécifier dans la commande npm de création de projet comme ceci :

npm create vite@latest mon-app-vite -- --template vue

Voilà ! Votre projet vite est maintenant créé.

Installer Vite dans un projet existant

Vite vous offre également la possibilité de l’installer dans un projet Javascript déjà existant. Pour ce faire, placez-vous dans le dossier racine de votre projet :

cd <chemin_vers_dossier_racine>

Puis exécuter la commande :

npm install -D vite

Ensuite, créez un fichier index.html dans le même dossier avec du code HTML simple :

<h1>Bonjour le monde !</h1>

Votre projet peut maintenant fonctionner avec Vite !

Exécuter votre projet Vite

Il est maintenant le temps d’exécuter votre projet. Commencez par installer les dépendances nécessaires au projet avec :

npm install

Si vous avez utilisé l’échafaudage pour créer un projet à partir de zéro, utilisez :

npm run dev

Si vous avez manuellement installé Vite dans un projet existant utilisez plutôt :

npx vite

Votre application devrait maintenant être accessible localement sur le port par défaut 5173.

http://localhost:5173

Structure d’un projet Vite

Regardons maintenant la structure d’un projet Vite de type Vanilla donc sans framework.

index.html

C’est le point d’entrée de l’application. Similairement à un serveur HTTP statique, vite considère ce fichier comment étant la racine du projet. Si nécessaire, il y a moyen de spécifier un dossier racine différent à l’aide de la commande vite serve <sous/dossier>.

package.json

Ce fichier contient des informations importantes sur votre projet comme le nom du projet, la version et certaines dépendances nécessaires.

package-lock.json

Ce fichier est généré lors de l’exécution de la commande npm install afin de verrouiller les dépendances et sous-dépendances d’un projet.

src

Ce dossier est généralement utilisé pour y mettre le code source de votre application. Il pourrait contenir des fichiers de pages HTML, des feuilles de styles CSS, des scripts JavaScript, etc.

public

Ce dossier permet de stocker des fichiers statiques comme des images, des polices d’écritures ou autres.

node_modules

Ce dossier contient toutes les dépendances nécessaires au bon fonctionnement du projet et il est créé lors de l’exécution de npm install.

Références

1. Vite. « Getting Sarted ». Consultée le 13 février 2025. https://vite.dev/guide/
2. Hey(node). « What Is package.json? » Consultée le 13 février 2025. https://heynode.com/tutorial/what-packagejson/
3. Hey(node). « What Is package-lock.json? » Consultée le 13 février 2025. https://heynode.com/tutorial/what-package-lockjson/
4. Cloudblast. « Understanding The Vite JS Folder Structure » Consultée le 13 février 2025. https://cloudblast.io/article/Understanding-The-Vite-JS-Folder-Structure