Créer un projet front-end avec Vite

1. Objectifs

   • Comprendre le rôle d'un outil de build et d'un serveur de développement.
   • Créer un projet avec Vite et comprendre sa structure.
   • Importer du CSS, du JSON, des images et une bibliothèque installée avec npm (Bootstrap).
   • Utiliser les variables d'environnement, construire la version de production et la publier.

2. Pourquoi un outil comme Vite ?

   • Avec Live Server, chaque fichier est envoyé tel quel au navigateur. Dès que le projet grandit, plusieurs besoins apparaissent :
     • importer des paquets npm (import "bootstrap") : le navigateur ne sait pas où trouver node_modules;
     • utiliser TypeScript, JSX (React) ou des fichiers .vue, que le navigateur ne comprend pas ;
     • livrer aux visiteurs des fichiers regroupés, minifiés et mis en cache efficacement.
   • Vite (« rapide » en français, prononcé « vite ») répond à ces besoins. Il a été créé par Evan You (créateur de Vue) et sert aujourd'hui de base à la plupart des projets front-end : vanilla, React, Vue, Svelte…
   • Il a deux rôles :
     • un serveur de développement très rapide avec rechargement à chaud (HMR) : la page se met à jour dès l'enregistrement, souvent sans perdre son état ;
     • un outil de build qui produit le dossier dist/ optimisé à mettre en ligne.

   

3. Créer un projet

npm create vite@latest catalogue-cours

• L'assistant demande le framework (choisissez Vanilla) et la variante (JavaScript ou TypeScript). On peut tout préciser directement : npm create vite@latest catalogue-cours -- --template vanilla. Les autres modèles : vanilla-ts, react, vue, svelte…
• Puis :

cd catalogue-cours
npm install
npm run dev

• Le terminal affiche l'adresse du serveur, par défaut http://localhost:5173/. Ctrl + C arrête le serveur.

catalogue-cours/
├── index.html        ← point d'entrée, à la racine (pas dans public/)
├── package.json      ← scripts dev, build, preview
├── .gitignore        ← déjà prêt : node_modules, dist…
├── public/           ← fichiers copiés tels quels (favicon, robots.txt…)
└── src/
    ├── main.js       ← script principal, chargé par index.html
    ├── counter.js
    ├── style.css
    └── assets/       ← images importées depuis le JavaScript

• index.html charge le script avec <script type="module" src="/src/main.js"></script>: tout le projet fonctionne en modules ES.
• Les scripts de package.json:

import "./style.css";                     // le CSS est injecté dans la page
import cours from "./data/cours.json";     // le JSON devient un objet JavaScript
import logo from "./assets/logo.svg";      // l'adresse finale de l'image
import { formaterDuree } from "./outils.js";

const image = document.createElement("img");
image.src = logo;
image.alt = "Logo";
document.querySelector("#app").append(image);
console.log(`${cours.length} cours chargés`);

npm install bootstrap

// src/main.js
import "bootstrap/dist/css/bootstrap.min.css";   // CSS de Bootstrap
import { Modal, Toast } from "bootstrap";         // seulement les composants utilisés
import "./style.css";                             // votre CSS, après celui de Bootstrap

const toast = new Toast(document.querySelector("#notification"));
toast.show();

• Plus besoin de CDN : Bootstrap est intégré au projet, et le build ne garde que ce qui est utilisé dans le JavaScript.

7. Les variables d'environnement

   • Un fichier .env à la racine définit des valeurs de configuration. Seules les variables qui commencent par VITE_ sont accessibles dans le code :

   # .env
   VITE_TITRE_APP=Catalogue des cours
   VITE_URL_API=https://api.exemple.tn

   console.log(import.meta.env.VITE_TITRE_APP); // "Catalogue des cours"
   console.log(import.meta.env.MODE);           // "development" ou "production"
   console.log(import.meta.env.DEV);            // true pendant npm run dev

   Attention : les variables VITE_ sont copiées dans le JavaScript envoyé au navigateur, donc visibles par tous. N'y mettez jamais de mot de passe ni de clé secrète.

8. Construire et publier

   • npm run build produit :

   dist/index.html                  0.45 kB │ gzip: 0.29 kB
   dist/assets/index-CsUDhMuy.css   4.10 kB │ gzip: 1.46 kB
   dist/assets/index-CAoPt-vL.js    4.05 kB │ gzip: 1.77 kB
   ✓ built in 73ms

   • Les noms des fichiers contiennent une empreinte (CAoPt-vL) qui change à chaque modification : le navigateur peut les garder en cache longtemps sans risque d'afficher une ancienne version.
   • Le dossier dist/ se publie sur n'importe quel hébergement statique : GitHub Pages, Netlify, Vercel, ou le dossier public de votre serveur.
   • Pour GitHub Pages, le site est servi dans un sous-dossier (https://compte.github.io/catalogue-cours/). On l'indique dans vite.config.js:

   // vite.config.js
   import { defineConfig } from "vite";
   
   export default defineConfig({
     base: "/catalogue-cours/",
   });

9. Activités

Activité 1 : premier projet Vite

• Créez le projet catalogue-cours (modèle vanilla), lancez npm run dev, modifiez le texte de main.js et observez le rechargement à chaud.
• Cliquez plusieurs fois sur le compteur, puis modifiez style.css: le compteur garde-t-il sa valeur ? Et si vous modifiez main.js?
• Poussez le projet sur GitHub. Le dossier node_modules est-il envoyé ? Pourquoi ?

Activité 2 : le catalogue

• Remplacez le contenu de démonstration : créez src/data/cours.json (6 cours avec titre, niveau et durée) et affichez-les dans des cartes Bootstrap installé avec npm, en utilisant createElement et textContent.
• Affichez le titre de l'application à partir de la variable VITE_TITRE_APP.

Activité 3 : le build

• Lancez npm run build puis npm run preview. Comparez la taille totale de dist/ avec celle du projet. Ouvrez un fichier .js de dist/assets: que constatez-vous ?

Activité 4 : publication

• Configurez base dans vite.config.js et publiez le site sur GitHub Pages (la procédure complète avec GitHub Actions est détaillée dans le TP 24).