Dans un projet React en cours d'exécution sur votre machine on veut simplement mettre un

fichier "employes" dans le serveur local à l'adresse http://localhost:8000/employes, voici

comment vous pourriez procéder :

1. Créer un dossier data pour les données : Créez un dossier dans votre projet React pour
stocker vos données. Par exemple, vous pourriez créer un dossier nommé data à la racine de
votre projet.
2. Copier le fichier "employes.json" : Placez le fichier "employes" que vous souhaitez servir
dans le dossier data.

[
{
"_id" : "e1",
"nomEmp" :"Lamrabet",
"prenomEmp" :"Oussama",
"poste" : "Directeur",
"département" :{
"codeDep" : "1",
"nomDep" : "RH"
}
}
]

3. Créez un fichier de serveur, par exemple, serveur.js à la racine de votre projet React dans
le dossier data :

Voilà le contenu du fichier serveur.js :

const express = require('express');

const cors = require('cors');
const app = express();

// Utilisation de cors
app.use(cors());

const fs = require('fs');
const path = require('path');
const port = 8000;

const filePath = path.join(__dirname, 'employes.json');

app.get('/employes', (req, res) => {

fs.readFile(filePath, 'utf8', (err, data) => {
if (err) {
console.error('Erreur de lecture du fichier JSON', err);
res.status(500).send('Erreur de lecture du fichier JSON');
return;
}
const employes = JSON.parse(data);
// Ajoutez l'en-tête Content-Type
res.setHeader('Content-Type', 'application/json');
Page 1|3
 res.json(employes);
});
});

app.listen(port, () => {
console.log(`Serveur en cours d'exécution sur http://localhost:${port}`);
});

Ajouter dans le fichier : package.json de votre projet, exactement dans déboguer, la ligne :
"start:proxy": "react-scripts start --proxy http://localhost:8000"

Pour éviter les erreur de sécurité CORS en local il faut installer le module CORS à l'aide de
npm :
npm install cors
Et maintenant pour tester le serveur on change le répertoire ver le dossier data, puis on tape la
commande suivante :

Si le problème est persistant on utilise la commande : node .\serveur.js

Page 2|3
Si le port 8000 est déjà utilisé par un autre processus soit en change le ou on tue le, si veuillez
choisir le deuxième cas.
On tape cette commande dans l’invite de commande : >netstat -ano | find "8000"
Puis on le tue à l’aide de la commande : >taskkill /F /PID NumProcessus

Pour vérifier notre serveur on saisit l’url :

Ensuite, vous pouvez exécuter votre application.

Si toujours l’application ne se lance pas on utilise la commande suivante en spécifiant le proxy

:

npm run start:proxy

Page 3|3