Nous allons structurer cela en plusieurs parties :
1. Mise en place du backend Django
2. Configuration de Django REST Framework pour l’API
3. Mise en place du frontend avec Vite + React + TailwindCSS
4. Connexion du frontend au backend
5. Gestion de l’authentification avec Django et React
6. Déploiement et bonnes pratiques
1 Mise en place du Backend Django
1️⃣
Tout d’abord, on crée un projet Django et on installe les dépendances nécessaires.
Installation de Django et des dépendances
Si Django n’est pas installé sur ton système, fais :
pip install django djangorestframework django-cors-headers
Ensuite, crée un projet Django :
sh
CopyEdit
django-admin startproject backend
cd backend
Puis crée une application dans Django qui servira d’API :
sh
CopyEdit
python manage.py startapp api
Ajoute les apps dans settings.py :
python
CopyEdit
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework', # Django REST Framework
'corsheaders', # Pour gérer les requêtes cross-origin
'api', # Notre application API
]
2️⃣Configuration de Django REST Framework
Ajoute Django REST Framework et CORS headers dans settings.py :
python
CopyEdit
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ALLOW_ALL_ORIGINS = True # À modifier en production
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
]
}
📌 Création d’un modèle et API avec Django REST Framework
Dans api/models.py, définissons un modèle simple :
python
CopyEdit
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=255)
price = models.DecimalField(max_digits=10, decimal_places=2)
description = models.TextField(blank=True, null=True)
def __str__(self):
return self.name
Puis applique les migrations :
sh
CopyEdit
python manage.py makemigrations
python manage.py migrate
🚀 Création d’une API pour ce modèle
Dans api/serializers.py, définissons un serializer pour convertir nos objets en JSON :
python
CopyEdit
from rest_framework import serializers
from .models import Product
class ProductSerializer(serializers.ModelSerializer):
class Meta:
model = Product
fields = '__all__'
Ajoutons une vue API dans api/views.py :
python
CopyEdit
from rest_framework import generics
from .models import Product
from .serializers import ProductSerializer
class ProductListCreate(generics.ListCreateAPIView):
queryset = Product.objects.all()
serializer_class = ProductSerializer
Enfin, ajoutons un endpoint dans api/urls.py :
python
CopyEdit
from django.urls import path
from .views import ProductListCreate
urlpatterns = [
path('products/', ProductListCreate.as_view(), name='product-
list'),
]
Et relions le tout dans backend/urls.py :
python
CopyEdit
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls')),
]
Lance le serveur :
sh
CopyEdit
python manage.py runserver
Et teste l’API avec :
sh
CopyEdit
curl http://127.0.0.1:8000/api/products/
3️⃣Mise en place du Frontend avec Vite + React + TailwindCSS
Dans un nouveau dossier, crée ton projet React avec Vite :
sh
CopyEdit
npm create vite@latest frontend --template react
cd frontend
npm install
Ajoute TailwindCSS :
sh
CopyEdit
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Modifie tailwind.config.js :
js
CopyEdit
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Ajoute Tailwind à src/index.css :
css
CopyEdit
@tailwind base;
@tailwind components;
@tailwind utilities;
4️⃣Connexion du frontend au backend
Dans src/App.jsx, récupérons les produits du backend :
jsx
CopyEdit
import { useEffect, useState } from "react";
function App() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch("http://127.0.0.1:8000/api/products/")
.then((response) => response.json())
.then((data) => setProducts(data));
}, []);
return (
<div className="container mx-auto p-4">
<h1 className="text-3xl font-bold">Liste des Produits</h1>
<ul>
{products.map((product) => (
<li key={product.id} className="p-2 border-
b">{product.name} - {product.price}€</li>
))}
</ul>
</div>
);
}
export default App;
Lance le frontend :
sh
CopyEdit
npm run dev
🚀 Tu verras tes produits affichés sur l’interface React.
5️⃣Gestion de l’authentification avec Django et React
Si tu veux gérer l’authentification avec JWT, installe :
sh
CopyEdit
pip install djangorestframework-simplejwt
Ajoute dans settings.py :
python
CopyEdit
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_simplejwt.authentication.JWTAuthentication',
)
}
Puis dans React, utilise localStorage pour stocker le token et l’envoyer dans les headers.
6️⃣Déploiement et Bonnes Pratiques
Une fois l’application prête :
• Utilise NGINX et Gunicorn pour Django
• Configure un proxy avec Vite pour éviter les erreurs CORS
• Héberge Django sur Railway, Render ou DigitalOcean
• Héberge React sur Vercel ou Netlify
