L’annonce est tombée en février 2025 : Create React App est dépréciée.

Je ne m’étais pas trop penchée sur le sujet jusqu’à ce que la mise à jour de TypeScript soit rendue impossible par les packages react-scripts présents dans mon application qui n’arrivaient plus à suivre.

Il est temps d’enlever ce package déprécié de mon application !

Mais… À quoi sert Create React App ?

La promesse de Create React App était de “masquer” tout le nécessaire à la création d’une application React – compilation du JSX, linting – pour qu’on puisse se concentrer sur l’écriture du code uniquement.

C’était magique : tu installes une bibliothèque, tu donnes le nom de ton projet en prompt et voilà : tu as une application qui démarre sur le port 3000 sans trop d’efforts. Et sans vraiment comprendre aussi ce qui s’était passé sous le capot…

Si Create React App permettait de démarrer une application React facilement, il manquait certains éléments essentiels à toute application : le routing, le code splitting, la récupération de données, entre autres.

Faute de mainteneurs actifs et de par les alternatives pérennes en place aujourd’hui, il a été décidé de déprécier create-react-app et d’encourager la communauté à migrer vers d’autres outils.

L’article suggère deux options : migrer vers un framework ou vers un outil de compilation.

J’ai décidé de tester les deux options sur un side-project pour voir laquelle était la plus rapide à mettre en place, en me fixant un maximum d’une journée par option.

Contexte du side-project

J’en ai déjà parlé rapidement ici mais sans entrer trop dans le détail de la stack technique !

Il s’agit d’une application que j’ai faite pour un proche, praticien en médecine traditionnelle chinoise. Cette application lui permet de suivre ses patients, d’enregistrer les séances qu’il fait avec eux, de suivre ses dépenses et d’avoir des statistiques de performance. Cette application existe depuis maintenant 3 ans et est utilisée quotidiennement.

Stack technique :

  • Front
    • React, Chakra
    • Gestion des routes : React Router Dom
    • Gestion de l’état : TanStack Query
  • Back
    • Symfony
    • BDD : MySQL
  • Tests
    • PHPUnit côté back
    • Vitest côté front
    • Cypress pour les tests E2E
  • Déploiement et CI/CD : GitHub Actions

Maintenant que vous en savez plus sur le projet, voici comment se sont passées les explorations des deux options suggérées par l’article.

Passer par un build tool (Vite, Parcel…) : Migrer de Create React App (CRA) vers Vite

Les étapes vont très… vite (pun intended 🥁 ).

  • J’ai renommé tous les fichiers .ts qui retournent un composant en .tsx (ou en .jsx, ma migration vers TypeScript n’est pas complètement terminée 🫣)
  • Il faut enlever toutes les références à process.env : Vite passe par import.meta.env pour la lecture des variables d’environnement
  • Le numéro de port changeant de 3000 (CRA) vers 5173 pour Vite, il a fallu que j’adapte mes tests pour qu’ils pointent vers le nouveau port.
  • J’ai adapté le fichier package.json pour que l’environnement de développement et le déploiement se fassent avec vite plutôt que react-scripts.
  • J’ai dû ajuster aussi mon fichier tsconfig.json pour qu’il reconnaisse les types liés à Vite et éviter les erreurs de typage sur mes fichiers JSX.

Et la migration était finie. Je plaisante à peine !

/img/vite-migration.png

La documentation fournie dans cet article est super exhaustive.

Même si le nombre de fichiers de ma PR est grand, j’aboutis à un POC stable rapidement.

Ayant un peu de temps devant moi, j’hésite quand même à migrer ce side-project vers Next.

Mon side-project utilise aujourd’hui :

  • Tanstack Query pour la gestion d’état
  • React Router pour les routes
  • React Testing Library pour les tests

Next a l’avantage de gérer à minima les routes, ce qui aurait réduit le nombre de dépendances. De plus, la partie SSR est séduisante, je l’aurais bien exploitée pour un éventuel blog ou des landing pages …

Je décide donc de me donner 1 jour supplémentaire pour défricher une éventuelle migration Next.

Migrer vers Next - Comment remplacer Create React App par Next.js ?

Là aussi, j’ai suivi la documentation de migration sans trop d’encombres.

J’ai réussi à avoir mon premier écran de login en place assez rapidement et à configurer Chakra, mais j’ai vite réalisé que la suite allait demander bien plus de travail.

Pas plus complexe spécialement mais, une réécriture complète de l’application allait être nécessaire.

J’ai identifié les étapes suivantes sur la route :

  • Revoir l’ancien fichier App.js pour le migrer vers le layout principal de l’application
  • Se débarrasser de React Router pour utiliser le système de routing intégré de Next
    • Donc retirer tous les <Link> ainsi que le fichier router.js pour utiliser uniquement la logique de Next
  • Revoir le système d’authentification
    • Appeler Symfony depuis les Server Actions de Next ?
    • Mais ai-je même encore besoin d’un back-end en Symfony ? J’aurais très bien pu mettre en place Prisma avec Next (https://github.com/prisma/nextjs-prisma-postgres-demo) et interroger directement ma base de données depuis mon application Next.

L’utilité de mon back-end Symfony était remise en question par les Server Actions de Next.

Des composants Next (SSR) auraient pu directement interroger une base de données avec un ORM comme Prisma.

L’architecture complète de mon projet était remise en question.

Mon back-end Symfony devenait inutile. Cependant, il y a un contributeur PHP sur le projet… qui est en plein apprentissage de cette techno. Migrer vers Next m’aurait fait réécrire l’entièreté de l’application. C’était faisable mais la valeur ajoutée était assez réduite et je ne souhaitais pas allouer autant de temps à refaire quelque chose de déjà fonctionnel.

J’ai donc préféré rester sur l’option 1 en utilisant Vite : j’ai pu avoir un état fonctionnel de mon application très rapidement. Au bout de quelques heures, le setup était finalisé.

J’ai créé un environnement de test rapidement sur Vercel, histoire de vérifier le bon fonctionnement du déploiement avant d’envoyer la migration en production.

Et là, c’est le drame.

Migration Create React App (CRA) : problèmes et solutions

J’ai trois tests front sur l’application, j’aurais pu ne pas les migrer… Mais même chose, c’est au moment du merge que j’ai réalisé que mes tests ne passaient plus 🤡

Cet article me fut d’une grande utilité pour la mise en place de vitest.

Il me manquait l’installation de la bibliothèque js-dom, j’ai installé Vitest qui a fonctionné presque right away.

J’en ai profité pour déplacer mes tests dans un dossier dédié. Je réalise que j’ai une tâche “Lancer les tests en pre-commit” que j’ai procrastinée trop longtemps… et qui m’aurait pourtant pu voir ce problème bien plus tôt dans le parcours 🤦🏽‍♀️

Faire ce déploiement m’a permis de réaliser que mes variables d’environnement étaient mal nommées (REACT_APP_ comme l’exigeait le préfixage du package create-react-app).

Je décide de rendre les noms de variable agnostiques côté GitHub Actions pour ne pas avoir à les renommer à nouveau si jamais un jour Vite devient déprécié…

Autre étape : le ménage

https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExcmx1cnd1eWhscXdkYWJqN3VwamMxajFlNm1hOW1qanh1azdrb2kyYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/fCUCbWXe9JONVsJSUd/giphy.gif

Autre étape à ne pas oublier : la suppression des fichiers générés automatiquement par create-react-app et devenus obsolètes !

        deleted:    src/reportWebVitals.js
        deleted:    src/service-worker.js
        deleted:    src/serviceWorkerRegistration.js
        deleted:    logo192.png
        deleted:    logo512.png
        deleted:    manifest.json
        deleted:    robots.txt
        deleted:    setupTests.js

J’ai supprimé les références au serviceWorker dans mon index. Je ne me suis pas penchée sur comment CRA l’utilisait.

A voir si je reprends son utilisation pour optimiser le cache de mon application mais je préfère l’occulter pour l’instant.

Le bilan

Pour mon side project, migrer de Create React App vers Vite a été rapide et fluide. Si tu cherches une alternative moderne à CRA, Vite est aujourd’hui l’option la plus simple à mettre en place de ce que j’ai pu voir.

Quel soit l’outil choisi, je suis très impressionnée par l’effort de documentation fourni par le blog de Robin Wieruch et par la documentation de Next/React. Ces différents articles se lisent très facilement et fonctionnent presque sans encombres.

Migrer de Create React App vers Vite m’a aussi permis de conscientiser les petits éléments manquants dans mon expérience de développement (comme les hooks de pre-commit).

Une migration peut être l’occasion de ne pas uniquement se débarrasser d’une dépendance dépréciée mais aussi d’améliorer des points dans l’expérience de développement “en passant”.

Accueillir un nouveau contributeur aide aussi à améliorer l’expérience mais ça sera sûrement le sujet d’un article à part entière !

Et toi ? react-scripts fait toujours partie de tes dépendances ? Tu t’en sépares quand ? 👀