Mettre en place une application web ReactJs avec Vite

Create React App (abrégé CRA) est l’outil le plus populaire (car historique) pour la mise en place d’un environnement de développement et de “build” d’une application ReactJs sans se prendre la tête !

L’outil propose de venir installer toutes les dépendances et configurations nécessaires pour monter rapidement et simplement un projet à partir de rien.

Malheureusement, les performances de CRA ne sont pas les meilleures, et plus le projet va grandir, plus celles-ci risquent de se détériorer.

Dans cet article, nous allons donc proposer une alternative à CRA, plus moderne, avec son lot de fonctionnalités et surtout des performances bien plus intéressantes.

Comment fonctionne CRA ?

Pour faire fonctionner son environnement de développement (et aussi de build), CRA utilise la très populaire bibliothèque Webpack. Cette bibliothèque, écrite en Javascript, permet de la construction de ressources web construites via plusieurs fichiers et assets. On parle de “module bundler”.

Schéma de fonctionnement d’un serveur de développement sous CRA (Source: vitejs.dev)

Pour résumer le schéma : CRA vient explorer l’ensemble des ressources du projet pour venir construire un “bundle”. De fait, plus il y a de fichiers JS/TS dans notre projet, plus celui-ci sera long à se construire.

Comment fonctionne Vite ?

À la place de Webpack, Vite utilise Rollup. La finalité des deux solutions reste la même : construire un environnement de développement et de production, mais l’approche est différente.

Schéma de fonctionnement d’un serveur de développement sous Vite (Source: vitejs.dev)

Plutôt que de récupérer l’ensemble des éléments d’un projet et d’en construire un bundle, Vite va se servir de la force des EcmaScript Module (ESM) pour construire de manière dynamique, uniquement les ressources nécessaires à un temps donné. En résumé : si vous voulez afficher une page, uniquement les composants de cette page seront chargés. C’est ce que l’on appelle du “code splitting”.

Les raisons de préférer Vite

1. Vite est globalement plus performant sur la mise en place d’un environnement de développement, d’où son nom d’ailleurs. Sur nos projets internes, nous avons constaté un passage de plus de 30 secondes avec CRA à environ 1 seconde pour le démarrage du serveur de développement.
2. Le temps entre le moment où vous mettez à jour un composant (changement d’un texte par exemple) et le temps où le navigateur affiche le changement est très court.
3. De même, le temps pour "build" l’application (pour un passage en production) est particulièrement rapide.
4. La possibilité de customiser l’environnement de développement (et même de build) sans grande difficulté (pas de “npm run eject” à faire comme pour CRA) via des plugins de la communauté est un gros avantage.

Mise en place d’un projet React avec Vite

Nous allons partir du principe que vous avez déjà Node et Npm installés. Ici, nous utilisons la version 18 de Node.

Veuillez exécuter la commande suivante pour initialiser un nouveau projet :

Choisissez un nom pour votre projet, puis “React” :

Et enfin “Typescript” (ou “Javascript” si vous préférez) :

Suivez les instructions pour finaliser l’installation et lancer le projet :

Tadaaam ! L’application ReactJs sous Vite est maintenant créée :

Vous êtes maintenant libre de développer votre nouvelle application.

Il existe cependant quelques changements à bien prendre en compte par rapport à une application faite avec CRA que nous allons voir dans les parties suivantes.

Migrer simplement un projet CRA vers Vite

Faire une installation toute fraîche d’une application Vite n’est pas compliqué, mais comment cela se passe pour migrer une application CRA existante vers Vite ?

Dépendances

Tout d’abord, supprimez la dépendance “react-scripts” de votre “package.json”

Puis ajoutez les deux suivantes dans la partie “devDependencies” (Attention, les versions peuvent varier) :

N’oubliez pas de supprimer le dossier “node_modules” et de faire un “npm install” pour valider les changements.

Renommages

Toujours dans le “package.json”, veuillez remplacer les commandes suivantes :

par :

Dans le fichier “index.html”, veuillez remplacer tous les “%PUBLIC_URL%” par “./public” :

Et ajouter à la fin du “body” :

Configuration

Veuillez créer un fichier “vite.config.js” à la racine du projet, tel que :

Variables d’environnement

Les variables d’environnement doivent être renommées afin d’être préfixéés par “VITE_” et non plus “REACT_APP_” :

Également, pour pouvoir utiliser les variables d’environnement dans votre code, la syntaxe suivante devra être utilisée :

Chemins absolus

Les chemins absolus ne sont pas par défaut pris en charge par Vite. Mais vous pouvez ajouter la configuration suivante pour mettre en place des alias :

Dans les chapitres suivants, nous verrons une solution pour automatiser les alias.

Import d’images

Une solution pour importer des images facilement avec Vite est la suivante :

Et voilà, vous avez toutes les clés en main pour migrer facilement votre application de CRA vers Vite.

Nous allons maintenant nous attarder sur des éléments bonus qui peuvent vous intéresser dans la configuration de votre environnement de développement.

Astuces de configuration

Nous allons voir ici différentes astuces pour la configuration de Vite. Bien-sûr, il ne s’agit pas d’une liste exhaustive, et nous vous invitons fortement à consulter la documentation ainsi que les plugins disponibles par la communauté pour adapter votre environnement à vos besoins.

Activer le SSL en local

Vous pouvez activer le HTTPS via un certificat SSL sur votre environnement de développement grâce à la configuration suivante :

Chemin absolu automatique

Afin de ne pas avoir à déclarer manuellement chaque alias à utiliser, vous pouvez mettre en place la configuration suivante :

Proxy

Afin de rediriger les requêtes de votre front en React vers votre backend (par exemple), vous pouvez mettre en place un proxy :

Afficher Eslint dans la console

Si vous utilisez Eslint pour valider votre code, il peut être intéressant d’avoir les informations de l’ensemble du projet directement dans votre terminal. La configuration suivante vous le permet :

Afficher Stylelint dans la console

De la même manière que pour Eslint, nous pouvons afficher les informations Stylelint dans la console :

Mettre en place une PWA

Si vous désirez mettre en place une Progressive Web App, la configuration suivante peut vous aider :

N’oubliez pas de créer le fichier “service-worker.ts” ainsi que le “manifest.json” afin de configurer les éléments propres à votre application.

Conclusion

Vite est un formidable outil pour gagner en performance lors de vos phases de développements ou même de build pour de la production. Couplé aux nombreux plugins offerts par la communauté, il est possible de mettre en place un environnement riche et fonctionnel.

Retour page précédente Retour au Wiki

Si vous désirez la mise en place d'une application complexe et performante, vous pouvez contacter Next Decision et nous étudierons votre projet pour le mettre en place ensemble.