Tout d'abord, j'ai ouvert VS Code dans un répertoire appelé vite-express-video, ici j'ai ouvert le terminal et nous allons commencer par créer notre front-end React. Ensuite, je vous guiderai dans la configuration du back-end.
Pour commencer, j'ai créé le répertoire vite-express-video et avec l'invite de commande terminal, vous pouvez utiliser la commande
Code . dans le répertoire et vs code s'ouvrira directement
> code . dans le répertoire et vs code s'ouvrira directement
Nous pouvons donc commencer avec npm create vite@latest (ou npm create vite) et on nous posera une série de questions concernant notre application. Tout d'abord, nous devons installer le paquet create-vite, donc j'appuie sur Entrée.
Pour plus d'informations, je peux faire référence au site
https://vite.dev/guide/ dans la section scaffolding
On me demandera le nom du projet, et pour cela, j'écrirai simplement client.
Ensuite, on me demandera de sélectionner un framework : comme on peut le deviner du titre de la vidéo, nous allons sélectionner React.
À la voix variant, je sélectionne JavaScript. (attention, ce projet peut tester cette modalité)
Maintenant que le projet est créé, nous entrons dans le répertoire client avec cd client et ensuite nous exécutons
npm install
pour installer toutes les dépendances nécessaires. Après quelques secondes, une fois que toutes les dépendances sont installées, nous pouvons procéder à la configuration du back-end.
PARTIE SERVEUR
Par conséquent, une fois le front-end créé, je vous montre maintenant comment créer le serveur.
Je crée un répertoire server en allant dans la section Explorer et en cliquant sur l'icône de « créer un dossier ».
Ensuite, je nettoie le terminal et j'entre dans le répertoire server avec cd .. pour sortir de client, et puis /server pour entrer dans server. (Navigation de base dans le dossier !)
Ici, j'exécute npm init -y pour générer un fichier package.json avec les paramètres par défaut.
Si vous développez le répertoire server, vous verrez que le fichier a été créé. Maintenant, ouvrez package.json pour le configurer.
Nous changeons le point d'entrée du serveur de index.js (valeur par défaut) à server.js. C'est juste pour la préférence personnelle : si vous le souhaitez, vous pouvez laisser index.js ou utiliser un autre nom.
Je crée donc le fichier avec touch server.js, qui apparaît maintenant dans le projet.
Maintenant, nous installons les dépendances nécessaires pour le back-end.
Tout d'abord, je nettoie le terminal et j'installe Express avec npm i express. Ensuite, j'installe nodemon avec npm i nodemon -D pour que le serveur redémarre automatiquement lorsque nous modifions le code.
Après l'installation, nous mettons à jour les scripts dans package.json.
Nous ajoutons :
« start » : « node server »,
« dev » : « nodemon server »
Assurez-vous qu'après node ou nodemon, il y a le nom correct de votre fichier de démarrage (dans ce cas, server.js).
Maintenant, nous pouvons commencer à créer notre API back-end. Nous ouvrons server.js et écrivons :
const express = require(‘express’);
const app = express();app.get(‘/api’, (req, res) => {
res.json({ fruits: [‘apple’, ‘orange’, ‘banana’] });
});app.listen(8080, () => {
console.log(‘Serveur démarré sur le port 8080’);
});
Le serveur écoute sur le port 8080. Si vous allez sur http://localhost:8080/api dans le navigateur, vous verrez un objet avec un tableau appelé fruits.
Maintenant, nous devons configurer CORS pour que le back-end accepte les requêtes du front-end. Nous ouvrons un nouveau terminal dans le répertoire server et exécutons npm i cors.
Ensuite, dans le code, nous importons et configurons CORS :
const cors = require(‘cors’);
const corsOptions = { origin: ‘http://localhost:5173’ };
app.use(cors(corsOptions));
Parfait. Maintenant, nous pouvons passer au front-end. Nous entrons dans le répertoire client avec cd ../client, nettoyons le terminal, et installons Axios avec npm i axios.
Nous ouvrons src/App.jsx, démarrons le serveur front-end avec npm run dev, et visitons http://localhost:5173.
Pour tester le fetching des données, nous faisons ainsi :
import { useEffect, useState } from ‘react’;
import axios from ‘axios’;function App() {
const [array, setArray] = useState([]);useEffect(() => {
const fetchApi = async () => {
const response = await axios.get(‘http://localhost:8080/api’);
console.log(response.data.fruits);
setArray(response.data.fruits);
};
fetchApi();
}, []);return (
{array.map((fruit, index) => (
{fruit}
))}
);
}export default App;
Maintenant, si vous mettez à jour la page, vous verrez apple, orange et banana affichés.
Si vous modifiez les données dans le back-end (par exemple, de orange à strawberry), en sauvegardant et en mettant à jour le front-end, vous verrez le changement appliqué automatiquement, grâce à nodemon.
Résumé :
- Nous avons créé un front-end avec Vite + React
- Créé un back-end avec Node.js + Express
- Configuré l'API back-end
- Géré CORS
- Installé Axios dans le front-end
- Effectué le fetch et l'affichage des données avec React