Scribd
Importer
55 vues3 pages

Serveur local pour fichier employés JSON

Le document décrit comment créer un serveur local pour servir un fichier JSON de données à une application React en développement. Il explique comment créer un dossier data, y placer le fichier JSON, créer un serveur Express pour lire et renvoyer le fichier, et configurer le proxy dans React pour utiliser le serveur.

Transféré par

misigi9941
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
55 vues3 pages

Serveur local pour fichier employés JSON

Le document décrit comment créer un serveur local pour servir un fichier JSON de données à une application React en développement. Il explique comment créer un dossier data, y placer le fichier JSON, créer un serveur Express pour lire et renvoyer le fichier, et configurer le proxy dans React pour utiliser le serveur.

Transféré par

misigi9941
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

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 [Link] 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 "[Link]" : 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, [Link] à la racine de votre projet React dans
le dossier data :

Voilà le contenu du fichier [Link] :

const express = require('express');


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

// Utilisation de cors
[Link](cors());

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

const filePath = [Link](__dirname, '[Link]');

[Link]('/employes', (req, res) => {


[Link](filePath, 'utf8', (err, data) => {
if (err) {
[Link]('Erreur de lecture du fichier JSON', err);
[Link](500).send('Erreur de lecture du fichier JSON');
return;
}
const employes = [Link](data);
// Ajoutez l'en-tête Content-Type
[Link]('Content-Type', 'application/json');
Page 1|3
[Link](employes);
});
});

[Link](port, () => {
[Link](`Serveur en cours d'exécution sur [Link]
});

Ajouter dans le fichier : [Link] de votre projet, exactement dans déboguer, la ligne :
"start:proxy": "react-scripts start --proxy [Link]

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 .\[Link]

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

Vous aimerez peut-être aussi