Setup client legacy facade

[florimondmanca]

Démarrage de #214 selon le principe décrit dans #271 (comment)

• Refs [Tech] As a developer I would like to ensure my frontend code is well tested at any time #272
• Closes As a developer I'd like to use Svelte with TypeScript. #138

Description

Cette PR :

• Déplace le client existant dans client/legacy, désormais servi sur http://localhost:3002
• Crée :
  • client/kit : un squelette de projet SvelteKit servi sur http://localhost:3003/kit, avec une seule route /welcome pour l'instant.
  • client/proxy : la config du Nginx qui sert de façade sur http://localhost:3001 en développement. Il envoie les requêtes http://localhost:3001/kit/* au serveur SvelteKit http://localhost:3003, le reste au serveur Sapper http://localhost:3002.
• Met à jour le Makefile et le README en conséquence.
• Met à jour la config Ansible de prod (Nginx et Supervisor principalement)
• En profite pour ajouter la VM vagrant directement comme un environnement (plutôt qu'une doc qui explique comment la configurer)

Le projet SvelteKit est muni d'ores et déjà de :

• TypeScript
• Prettier
• ESLint
• Vitest (Jest) et testing-library pour les tests unitaires
• Playwright pour les tests E2E

Cette PR passe enfin en Node 16.18. (SvelteKit nécessite Node v16.14+.)

TODO

• Déplacer client vers client/legacy
• Créer projet squelette dans client/kit
• Ajouter façade Nginx
• Mettre à jour Makefile
• Code coverage tests unitaires SvelteKit
• Lancer les tests E2E sur la CI
• Mettre à jour plan de déploiement prod
• Tester le déploiement sur la VM vagrant
• Ajouter la VM vagrant dans un environnement vagrant

Essayer en local

Une fois suivi les instructions pour #275, relancer make install puis make start.

Accédez à http://localhost:3001 pour avoir l'interface de d'habitude, et vérifier que http://localhost:3001/kit/welcome montre la page "Welcome to SvelteKit".

Pour tester le déploiement, suivre la doc pour tester sur une VM Vagrant de test.

[codecov]

Codecov Report

Base: 90.96% // Head: 90.96% // Increases project coverage by +0.00% 🎉

Coverage data is based on head (cf62106) compared to base (d1aed2e).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #277   +/-   ##
=======================================
  Coverage   90.96%   90.96%           
=======================================
  Files         260      261    +1     
  Lines        3121     3122    +1     
  Branches      174      174           
=======================================
+ Hits         2839     2840    +1     
  Misses        281      281           
  Partials        1        1           

Impacted Files	Coverage Δ
client/kit/src/components/Heading/Heading.svelte	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[Volubyl]

@florimondmanca est-ce que je peux prendre le temps de tester en local vendredi ou tu souhaites merger asap ?

[florimondmanca]

Oui bien sûr, rien d'urgent, et c'est souhaitable que des gens testent en local pour vérifier le setup :)

[Volubyl]

@florimondmanca après quelques essais je n'ai rien qui tourne sur le localhost:3001.

Etapes pour reproduire:

• Essayer de lancer le proxy nginx via la commande make install ou docker-compose up -d nginx
• aller sur localhost:3001 et voir le message

Unable to connect

Firefox can’t establish a connection to the server at localhost:3001.

La commande docker-compose ps me retourne

NAME                COMMAND                  SERVICE             STATUS              PORTS
permacoop-nginx-1   "/docker-entrypoint.…"   nginx               running     

Je remarque que aucun port n'est indiqué dans la colonne PORTS

[florimondmanca]

@Volubyl Je suis surpris car le network_mode: host est censé faire que le port 3001 sur lequel écoute conteneur Nginx corresponde exactement au port 3001 sur ta machine (puisque Nginx démarre sur le réseau local, et pas le réseau bridge docker0 comme par défaut).

Le point crucial c'est que le Nginx a besoin d'accéder à localhost sur l'hôte pour y envoyer sur les ports 3002 et 3003 le traffic qu'il reçoit sur le port 3001.

J'ai push une autre approche. Est-ce que ça fonctionne ?

[florimondmanca]

Considérant que :

• @mmarchois a pu faire fonctionner ce setup avec succès de ce côté hier (moyennant quelques modifications que j'ai commit ici)
• J'ai testé le déploiement sur la VM vagrant avec succès
• J'aimerais avancer sur ce sujet et qu'on débloque la voie à la migration petit à petit vers SvelteKit
• Il reste possible de faire des modifications plus tard au cas où @Volubyl rencontre encore des problèmes en local (mais il se peut qu'ils aient été résolus grâce aux modifs suite aux tests de Mathieu, car il n'arrivait pas non plus à se connecter à http://localhost:3001 initialement en raison d'un pb avec les commandes docker-compose)

Je merge cette PR :-)