Application Client-Server REACT-NODE-Express

Découvrez comment connecter votre frontend React créé avec Vite à votre backend Node.js ou Express.

Bonjour. Voici la partie théorique de votre nouveau projet qui vous ouvrira une nouvelle vision sur les applications mobiles client-serve avec l’utilisation de l’API. Dans cet article, je vous expliquerai comment relier votre frontend React créé avec Vite à votre backend Node.js ou Express. Sans plus tarder, commençons.

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 frontend React. Ensuite, je vous guiderai dans la configuration du backend.

Créez le répertoire vite-express-video et avec l’invite de commande terminal vous pouvez utiliser la commande

Code . dans le répertoire et cela ouvrira directement vs code

> code . dans le répertoire et cela ouvrira directement vs code


Ensuite, nous pouvons 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 appuyez sur Entrée.

Pour les informations sur cela, je peux faire référence au site

https://vite.dev/guide/ dans la section scaffolding

On nous demandera le nom du projet, et pour cela, j’écrirai simplement client.

Ensuite, on nous demandera de sélectionner un framework : comme on le devine 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éé, entrons dans le répertoire client avec cd client et ensuite 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 backend.

PARTIE SERVEUR

Par conséquent, une fois le frontend 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 ensuite /server pour entrer dans server. (Navigation de base dans le dossier !)


Je vais exécuter npm init -y pour générer un fichier package.json avec les paramètres par défaut.

Si vous développez le dossier server, vous verrez que le fichier a été créé. Maintenant, ouvrons package.json pour le configurer.

Nous allons changer le point d’entrée du serveur de index.js (valeur par défaut) à server.js. Cela ne concerne que mes préférences personnelles : 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 allons installer les dépendances nécessaires pour le backend.
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 allons mettre à jour les scripts dans package.json.

Nous allons ajouter :

« 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 backend. 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 backend accepte les requêtes du frontend. 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 frontend. Entrez dans le répertoire client avec cd ../client, nettoyez le terminal, et installez Axios avec npm i axios.

Ouvrons src/App.jsx, démarrez le serveur frontend avec npm run dev, et visitez http://localhost:5173.
Pour tester le fetch des données, 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 backend (par exemple de orange à strawberry), en sauvegardant et en mettant à jour le frontend, vous verrez le changement appliqué automatiquement, grâce à nodemon.

Résumé :