[Major] (v2.0.0) Change bundler to Vite

[mguihal]

Hello,

Comme précédemment mentionné dans #153, webpack 5 est désormais déprécié.
Je propose de passer sur Vite pour le remplacer.

Cette PR se compose de trois commits :

• bb4f597 qui ne fait que renommer tous les fichiers .js contenant du JSX en .jsx, comme requis par Vite (j'ai séparé ça en un commit séparé pour pouvoir s'y retrouver dans les modifications)
• c966755 qui fait les changements fonctionnels pour faire fonctionner Vite.
• 886c9e2 qui rajoute une configuration ESLint à la partie frontend.

Guide de migration

1/ Changement de nom du dossier contenant les fichiers buildés

Le dossier cible contenant les fichiers buildés est maintenant /dist et non plus /build.
Il est nécessaire de changer ce dossier dans le Dockerfile de la partie frontend (comme fait ici)

2/ Changement d'emplacement du fichier index.html

Le fichier html qui charge l'application était auparavant situé dans le dossier /public/index.html, il est maintenant situé directement à la racine /index.html.
Il contient également la ligne suivante en plus à la fin du body (à rajouter si ce fichier est personnalisé):

<script type="module" src="/src/index.tsx"></script>

3/ Changement des commandes de dev

Auparavant, pour démarrer le frontend en mode dev, il fallait faire yarn start, désormais il faut faire yarn dev.
La commande pour builder l'application reste inchangée : yarn build.
Une nouvelle commande yarn preview s'ajoute, pour tester l'application localement une fois buildée (voir https://vitejs.dev/guide/cli.html#vite-preview)

4/ Changement des variables d'environnement

Auparavant, les variables d'environnement (REACT_APP_MIDDLEWARE_URL et REACT_APP_MAPBOX_ACCESS_TOKEN) étaient utilisés à divers endroits du code. Désormais, elles sont regroupées dans le fichier /config/config.ts pour plus de maintenabilité.
De plus, ces variables sont renommées désormais en VITE_MIDDLEWARE_URL et VITE_MAPBOX_ACCESS_TOKEN.

5/ Utilisation de Typescript

Une configuration Typescript a été mise en place (/tsconfig.json).
Pour l'instant, seuls deux fichiers ont été migrés en Typescript :

• /src/index.tsx : Appelé avec son extension dans le index.html, donc difficilement renommable par la suite
• /src/config/config.ts : Potentiellement customisable et surchargé par les instances, donc autant le renommer dès maintenant

Pour les instances qui surchargent le fichier /src/config/config.js actuellement, il est nécessaire de renommer le fichier en .ts.

Le reste des fichiers sera migré dans un second temps.

6/ Utilisation de ESLint

Une configuration ESLint a été mise en place (/.eslintrc.js), ainsi qu'une configuration basique Prettier (dans package.json).
Une commande yarn lint a été rajoutée permettant de valider les fichiers via ESLint.
Pour l'instant le linting n'est pas automatisé. Il convient à chacun de paramétrer son IDE pour ces outils.

[srosset81]

A mon avis, on aurait pu obliger à renommer les variables d'env avec un préfixe VITE, puisque de toute façon il va y avoir des BC lors du build avec Docker.

[mguihal]

Bien vu, j'ai fait le changement pour renommer les variables d'environnement !

Je me permets de merger cette PR dans la branche next-v2 du coup