# Projet React + Laravel
Ce projet consiste en une application web avec un backend Laravel et un frontend React. Ce guide vous guidera à travers les étapes nécessaires pour configurer et démarrer votre projet.
## Prérequis
Avant de commencer, assurez-vous d'avoir installé les éléments suivants sur votre machine :
- **PHP** (version 7.4 ou supérieure)
- **Composer** (pour gérer les dépendances PHP)
- **Node.js** (version 14 ou supérieure)
- **npm** (Node Package Manager, installé avec Node.js)
- **Une base de données** (par exemple, MySQL)
## Étapes de configuration
### 1. Configurer le Backend Laravel
1. **Installer les dépendances PHP**
Dans le répertoire du backend (racine du projet Laravel), exécutez la commande suivante pour installer les dépendances PHP :
```bash
composer install
-
Configurer le fichier
.env
Copiez le fichier
.env.example
en.env
:cp .env.example .env
Ouvrez le fichier
.env
et configurez les variables d'environnement, telles que la base de données, le nom d'utilisateur, le mot de passe, etc. Par exemple :DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nom_de_votre_base DB_USERNAME=votre_utilisateur DB_PASSWORD=mot_de_passe
-
Générer la clé de l'application
Exécutez la commande suivante pour générer une clé unique pour votre application Laravel :
php artisan key:generate
-
Configurer la base de données
Créez une base de données dans votre système (par exemple, MySQL). Ensuite, mettez à jour les informations de connexion dans le fichier
.env
sous les variablesDB_HOST
,DB_PORT
,DB_DATABASE
,DB_USERNAME
, etDB_PASSWORD
. -
Exécuter les migrations
Pour créer les tables dans votre base de données, exécutez la commande suivante :
php artisan migrate
-
Lancer le serveur Laravel
Lancez le serveur Laravel avec la commande suivante. Par défaut, il sera accessible à l'adresse
http://127.0.0.1:8000
:php artisan serve
-
Installer les dépendances Node.js
Dans le répertoire
frontend
, exécutez la commande suivante pour installer les dépendances Node.js :npm install --legacy-peer-deps npm install react-search-field@latest npm install --force
-
Lancer le serveur de développement React
Lancez le serveur de développement React avec la commande suivante. Le frontend sera accessible à l'adresse
http://localhost:3000
:npm start
- Frontend : Ouvrez
http://localhost:3000
dans votre navigateur pour accéder à l'interface utilisateur React. - Backend : Ouvrez
http://127.0.0.1:8000
pour accéder à l'API Laravel.
-
Communication entre le Frontend et le Backend : Si le frontend et le backend doivent communiquer, configurez les appels API dans le frontend pour pointer vers l'URL du backend, par exemple,
http://127.0.0.1:8000/api
. -
Authentification Laravel Sanctum : Si vous utilisez Laravel Sanctum pour gérer l'authentification, assurez-vous que les cookies sont correctement configurés pour le domaine.
-
CORS (Cross-Origin Resource Sharing) : Si vous avez des problèmes de CORS lorsque le frontend et le backend sont exécutés sur des ports différents (par exemple,
3000
pour React et8000
pour Laravel), vous pouvez utiliser le package barryvdh/laravel-cors pour configurer les permissions CORS dans Laravel.
Enregistrez ce contenu dans un fichier README.md
dans la racine de votre projet pour fournir des instructions claires et concises à toute personne qui doit configurer et exécuter votre projet.