Skip to content

ABOULJID22/First-step-with-auth

Repository files navigation

# 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
  1. 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
  2. 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
  3. 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 variables DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, et DB_PASSWORD.

  4. Exécuter les migrations

    Pour créer les tables dans votre base de données, exécutez la commande suivante :

    php artisan migrate
  5. 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

2. Configurer le Frontend React

  1. 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
  2. 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

3. Accéder à l'Application

  • 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.

4. Conseils supplémentaires

  • 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 et 8000 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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •