Archives Wild Code School
Développement Web

JS - React & Express - Monorepo

Quête 10 sur 11

Objectifs

  • Découvrir des architectures logicielles
  • Travailler sur un projet fullstack

Pré-requis

  1. 1

    Avoir envie de lire du JS avancé

    javascript
    try {
  const response = await fetch(`${baseUrl}/${endpoint}`);
  if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
  return await response.json();
} catch (error) {
  console.error('Fetch Error:', error.message);
}
  2. 2

    Savoir te repérer sur une carte

    DB ServerWeb ServerWeb ClientMySQL ServerModuleExpressFetcherReactMySQL ServerModuleExpressFetcherReacteventrequête (HTTP)appelrequête SQLdonnéesjsonréponse HTTPrender

Introduction

Tu as vu comment créer un projet "polyrepo" : un dépôt pour une application React autonome et un dépôt pour une application Express autonome. Cette fois, tu vas apprendre à piloter un projet "monorepo" : un seul dépôt qui contient les 2 applications et définit de manière formelle la relation entre les 2.

Sommaire

Le brief

Hello 👋,

Bonne nouvelle : nous avons un nouveau projet qui manque de main d'oeuvre ! Et cette fois, tu vas faire l'application toi-même 😛.

Rassure-toi, nous avons trouvé un framework sympa pour te servir de base. Nous avons prévu une série de supports pour t'accompagner dans la découverte de ce framework et aussi pour t'accompagner dans la construction de ton projet : le Wild Series (toute ressemblance avec le site Beta Series ne serait pas purement fortuite).

Bon courage et bonne semaine 🙂,

Les équipes front, back et data.

Monorepo

Tu vas utiliser un framework particulier : un Monorepo JS spécialement développé par la Wild Code School pour te donner un cadre de développement adapté à l'apprentissage. Une première introduction ici :

Quêtes liées

Wild Series

Nous parlons technique depuis le début, mais nous n'avons pas encore parlé du projet sur lequel tu dois travailler :

Quêtes liées

Démarrer

C'est parti ! Première étape : créer le projet.

Quêtes liées

Tracer ta route

Maintenant que tu as créé le projet, tu dois rentrer dans son architecture. Commence par mettre en place des routes :

Quêtes liées

Accéder aux données

Tes premières routes permettent de recevoir des requêtes côté serveur : pour aller plus loin, ton serveur doit communiquer avec une base de données. C'est ta prochaine étape :

Quêtes liées

Un projet "complet"

À ce stade, ton serveur permet de récupérer des listes de données. Une gestion complète d'une ressource implique de permettre des actions supplémentaires :

  • Créer une ressource
  • Mettre à jour une ressource
  • Supprimer une ressource

C'est le moment d'apprendre le sens des acronymes CRUD et BREAD :

Quêtes liées

Un début de sécurité

Maintenant que tu travailles sur un "vrai" projet, tu dois commencer à aborder des questions de sécurité. Une première approche est de t'intéresser à la validation des données :

Quêtes liées

Challenge

Publie ton projet Wild Series sur ton compte GitHub, et partage le lien en guise de solution au challenge.

Critères de validation

  • [ ] le projet est disponible sur GitHub
  • [ ] les 2 applications "client" et "server" sont fonctionnelles
  • [ ] les 2 applications communiquent entre elles
  • [ ] le serveur implémente au moins un CRUD / BREAD
  • [ ] le serveur implémente au moins un validateur