| title | JS - React & Express |
|---|---|
| description | Créer une application front-end et back-end indépendante, et les faire communiquer |
| show_toc | true |
- Créer une application front-end indépendante
- Créer une application back-end indépendante
- Faire communiquer les 2
# Connaitre les bases avancées du JS
```javascript
function say({ word, name }) {
console.log(`${word} ${name}!`);
}
say({ word: "Hello", name: "World"});
```
# Être à l'aise avec les méthodes fonctionnelles des tableaux
```javascript
const numbers = [1, 56, 35, 23, 45];
const halfNumbers = numbers.map(number => number / 2);
console.log(halfNumbers);
// Expected output : [0.5, 28, 17.5, 11.5, 22.5]
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
// Expected output : [2, 4]
```
Tu as vu comment créer une application React autonome. Pour aller plus loin, tu dois apprendre à envoyer des requêtes à un serveur depuis ton code.
Dans cette ressource, tu vas apprendre à requêter un serveur web existant. Tu vas aussi voir à quoi ressemble le code d'un serveur simple et comprendre l'importance de sa configuration.
Hello 👋,
Tu as l'air de t'en sortir côté front. Avec les backeux, nous avons pensé à toi pour un nouveau projet cette semaine.
Nous allons prochainement réaliser une application pour un gros client : un outil de gestion de ses employés. Rassure-toi, nous ne te demandons pas de faire l'application toi-même (pas encore 😛). Nous avons besoin d'un prototype qui affiche un employé à partir de données stockées sur un serveur.
Le serveur est en place pour te fournir des données de test, mais nous savons que tu es une personne curieuse : nous allons te montrer comment faire ton propre serveur, avec des nouvelles erreurs à découvrir !
Bon courage et bonne semaine 🙂,
Les équipes front et back.
Dans l'étape suivante, tu devras créer une application React "fetch-employees". Tu peux réviser la création d'une application React dans cette ressource :
React Basics 01 - Pokédex - Introduction
Et voici un aide-mémoire pour tes futurs créations :
Étape Commande Créer une application React avec Vite npm create vite@latest ... Initialiser un dépôt Git git init Lier avec un dépôt GitHub git remote add origin ...
Dans cette étape, tu vas apprendre à interagir avec une API depuis ton front-end React. Tu vas utiliser la méthode fetch() pour effectuer des requêtes HTTP.
Pour passer de React à une API, tu dois créer une requête HTTP. Pour revenir à ton application React, l'API va créer une réponse HTTP.
D'abord, familiarise toi avec l'utilisation de fetch dans ton navigateur :
JS Basics 07bis - Les tableaux - Autres méthodes utiles
Ensuite, créé une application React qui fetche une API en suivant les étapes de cette ressource :
React Basics 06 - Pokédex - Utiliser un state
L'application proposée interagit avec une API existante. Que faire si aucune API existante ne fournit les données qui t'intéressent ?
Maintenant que tu as vu comment utiliser une API existante dans ton app React, nous allons créer notre propre back-end avec Express. L'application Express que nous allons construire va remplacer l'API que tu as utilisée précédemment.
Commence par découvrir les bases d'Express avec cette ressource :
Express 101 : part of your symphony
Comme pour le front, voici un aide-mémoire pour démarrer rapidement :
Étape Commande Créer une application Node vide npm init Installer Express npm i express Initialiser un dépôt Git git init Lier avec un dépôt GitHub git remote add origin ...
Tu as les éléments pour créer ta propre API :
# Crée un projet dans un nouveau dossier
Tu peux appeler ton dossier `serve-employees` par exemple. Initialise ton projet Node, et installe Express.
N'oublie pas de préciser `"type": "module"` dans ton fichier `package.json` :
```diff
{
"name": "serve-employees",
+ "type": "module",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^4.21.0"
}
}
```
# Crée une application Express
Dans un fichier `index.js`, crée ton application et écoute sur un port.
```js
import express from "express";
const app = express();
const port = 3310;
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
```
Rappel : Tu peux tester que ton application fonctionne avec la commande `node --watch index.js`. Tu dois voir le message `Example app listening on port 3310` s'afficher dans ton terminal.
# Crée une route
Pour reproduire l'API, crée une route `GET /api/employees`. Dans un premier temps, dans ta route réponds en JSON avec l'objet `{ message: "Hello Employees" }`.
```diff
import express from "express";
const app = express();
+app.get("/api/employees", (req, res) => {
+ res.json({ message: "Hello Employees" });
+});
const port = 3310;
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
```
Dans ton navigateur, si tu ouvres l'URL http://localhost:3310/api/employees, tu dois voir la réponse `{ message: "Hello Employees" }` s'afficher (elle peut être mise en forme par ton navigateur).
# Termine ton API
Ta route fonctionne : tu dois maintenant construire une "vraie" réponse qui contient des employés. Tu peux commencer avec un seul employé :
```js
const sampleEmployee = {
name: {
first: "Charlie",
last: "Thompson",
},
email: "charlie.thompson@example.com",
picture: {
medium: "https://randomuser.me/api/portraits/med/men/40.jpg",
},
};
```
Dans ton `res.json`, remplace l'objet `{ message: "Hello Employees" }` par un objet avec une propriété `results` : la propriété doit avoir comme valeur un tableau `[]` qui contient `sampleEmployee`.
```diff
import express from "express";
const app = express();
+const sampleEmployee = {
+ name: {
+ first: "Charlie",
+ last: "Thompson",
+ },
+ email: "charlie.thompson@example.com",
+ picture: {
+ medium: "https://randomuser.me/api/portraits/med/men/40.jpg",
+ },
+};
app.get("/api/employees", (req, res) => {
- res.json({ message: "Hello Employees" });
+ res.json({ results: [sampleEmployee] });
});
const port = 3310;
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
```
Vérifie que ta route fonctionne toujours dans ton navigateur avec l'URL http://localhost:3310/api/employees.
Maintenant, tu as ta propre API. Tu l'as réalisée toi-même avec Express et elle fonctionne dans ton navigateur 🎉
Dans ton application React, tu peux essayer de remplacer l'URL dans l'appel à fetch :
-fetch("https://randomuser.me/api?nat=en")
+fetch("http://localhost:3310/api/employees")Si tes 2 applications sont lancées, chacune sur un port différent, quand le fetch est exécuté tu dois voir des messages rouges dans la console du navigateur. Quelque chose comme ça :
Blocage d'une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3310/api/employees. Raison : l'en-tête CORS « Access-Control-Allow-Origin » est manquant. Code d'état : 200. {:.alert-warning}
Cette erreur est normale : c'est une question de sécurité !
Sans rentrer dans les détails (tu as un formateur ou une formatrice à qui poser des questions 😉), par défaut une requête envoyée depuis un navigateur ne passera que si elle est envoyée depuis un domaine accepté par le serveur. C'est le principe de CORS (Cross-Origin Resource Sharing).
Un serveur peut accepter différent domaines, à commencer par lui-même : c'est pour ça qu'ouvrir l'URL http://localhost:3310/api/employees dans ton navigateur fonctionne. La requête est envoyée à localhost:3310 depuis localhost:3310 : même origine (Same-origin policy).
Quand c'est ton application React qui fetche ton serveur, la requête est envoyée à localhost:3310 depuis ̀localhost:5173 : les origines sont différentes. Pour l'instant, ton application Express n'est pas configurée pour accepter une autre origine que la sienne.
Bonne nouvelle, il y a un package pour ça :
Exécute la commande suivante dans le dossier de ton application Express. {:.alert-warning}
npm i cors
Le module CORS permet de configurer une politique de partage sur mesure. Dans ton fichier index.js, ajoute :
import express from "express";
+import cors from "cors";
const app = express();
+app.use(cors({ origin: ["http://localhost:5173"] }));
app.get("/", (req, res) => {
res.send("Hello World!");
});
const port = 3310;
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});Cette fois, ton application React doit être capable de requêter ton application Express : tu as lié ton front avec ton back, tu as fais tes premiers pas en fullstack 👏
Dans cet exemple, le module cors est ajouté aux routes de l'application via app.use. Cela signifie que toutes les routes qui sont créées après cette ligne utiliseront le module : elles hériteront toutes de la configuration CORS.
Ces modules qui permettent de composer des routes dans Express sont des middlewares : des briques placées entre ("au milieu de", middle en anglais) la requête HTTP et la réponse HTTP.
Il existe de nombreux middlewares. L'utilisation du package cors n'est qu'un exemple parmi d'autres. Plus tard dans la formation, tu apprendras comment en utiliser d'autres, et tu pourras même en créer toi-même !
Garde ça précieusement dans un coin de ta tête 💡 {:.alert-info}