Dans cet atelier, tu vas apprendre à faire communiquer un client React.js avec un serveur Express.js, spécifiquement autour d’une fonctionnalité clé et tout à fait classique : la gestion des fichiers.

Cet atelier sera très guidé / accompagné, de sorte que tu puisses te remettre à fond dans ton projet 3 et implémenter cette fonctionnalité au besoin.

Notre référentiel de départ pour cet exercice : permettre à une personne d’ajouter une photo de profil. Autant partir de quelque chose de très ordinaire pour bien comprendre comment ça marche 😃

Pour rester dans un environnement connu, créons un projet Monorepo tout neuf, et entreprenons les lignes de commande dans l’ordre suivant afin d’être tranquille côté configuration :

1. Exécute la commande suivante dans un terminal (utilise le terminal powershell si tu es sur windows) :

npm create @this-is-to-learn/js-monorepo@latest file_upload

/*
   Une fois l'installation terminée, rends-toi dans le répertoire nouvellement 
	 créé
*/

cd ./file_upload

2. Exécute la commande npm install pour installer toutes les dépendances nécessaires au projet.

3. Dans le dossier server/, copie / colle le fichier .env.sample, et renomme la copie en .env. Fais la même chose pour le dossier client/.

4. Mets à jour tes informations de connexion à ta base de données. Tu peux donner le nom que tu veux à ta base de données.

5. Exécute la commande npm run db:migrate pour exécuter le script se trouvant dans server/database/schema.sql.

6. Exécute la commande npm run dev à la racine du monorepo pour lancer le client et le server simultanément.

Pour finir avec la configuration, on va se rendre dans le fichier app.js situé dans le dossier server/src/. Tu vas décommenter le middleware suivant :

app.use(express.json());

🧠 Exercice : Création d’une table dans la base de données

Pour bien faire, nous allons générer une table user. Pour cela, rends-toi dans le fichier /server/database/schema.sql. Supprime tout ce qu’il y a dedans, et écrit une table user contenant les champs suivants :

• Un champ email,
• Un champ password,
• Un champ avatar de type VARCHAR(100). Ce champ aura une valeur par défaut, qui pointera sur l’image déjà présente dans notre serveur, à savoir assets/images/favicon.png.