Page - TW3

🚀 Déploiement d’une application React (rappel rapide)

Avant de déployer, assurez‑vous d’avoir un script build dans votre package.json. Pour une application créée avec Create React App :


npm run build

La commande produit un dossier build/ prêt à être servi par un serveur statique.

� Déploiement sur Vercel (pas de config nécessaire pour la plupart des apps)

Vercel détecte automatiquement une application React et propose des réglages par défaut. Méthode simple : connectez votre dépôt GitHub/GitLab/Bitbucket dans l’interface Vercel et indiquez le dossier de sortie (build) et la commande (npm run build), ou laissez les valeurs par défaut.

Étapes rapides :


# (optionnel) installer le CLI
npm i -g vercel
 
# depuis la racine du projet (optionnel pour un premier deploy interactif)
vercel

Points importants :

Variables d’environnement : configurez-les dans le dashboard Vercel (Settings → Environment Variables) pour les clés API, etc.
Routes & SPA : Vercel gère généralement les SPA correctement, mais pour des règles spécifiques vous pouvez ajouter un vercel.json avec des rewrites.
Domaines : ajoutez un domaine personnalisé et activez le TLS en un clic.

Exemple minimal vercel.json pour forcer les routes vers index.html (SPA) :


{
	"routes": [
		{ "src": "/(.*)", "dest": "/index.html" }
	]
}

📦 Déploiement sur Netlify (static SPA)

Netlify est très simple pour les apps statiques. Dans le tableau de bord Netlify, choisissez “New site from Git”, connectez votre dépôt et configurez :

Build command : npm run build (ou pnpm build / yarn build)
Publish directory : build

Règle importante pour les SPA (routing côté client) : créez un fichier _redirects à la racine du dossier public/ (ou dans build/ après le build) contenant :


/*    /index.html   200

Cela permet de rediriger toutes les requêtes vers index.html et d’éviter les 404 sur les routes gérées côté client.

Variables d’environnement : configurez-les dans Site settings → Build & deploy → Environment.

🔧 Conseils communs et bonnes pratiques

Compression & cache : configurez headers de cache et compression (gzip/brotli) côté hébergeur ou CDN.
Analyser le bundle : installez source-map-explorer et générez un rapport pour identifier les dépendances lourdes.


npm install --save-dev source-map-explorer
npm run build
npx source-map-explorer build/static/js/*.js

Variables d’environnement : ne mettez jamais de secrets dans le code client. Utilisez les variables d’environnement des plateformes (Vercel/Netlify) ou un backend sécurisé.
Fichiers statiques : tout ce qui est dans public/ (Create React App) est copié tel quel dans build/.
Redirect / SPA fallback : Netlify _redirects ou Vercel vercel.json pour éviter les 404.

🧪 Validation locale avant déploiement

Servez le build localement pour vérifier le comportement :


npm install -g serve
npm run build
serve -s build -l 5000
# Ouvre http://localhost:5000

⚙️ CI / GitHub Actions (optionnel)

Exemple minimal de workflow GitHub Actions (build + deploy sur Netlify via netlify/cli) :


name: build-and-deploy
on:
	push:
		branches: [ main ]
 
jobs:
	build:
		runs-on: ubuntu-latest
		steps:
			- uses: actions/checkout@v3
			- name: Use Node.js
				uses: actions/setup-node@v4
				with:
					node-version: '18'
			- run: npm ci
			- run: npm run build
			- run: npx netlify deploy --prod --dir=build --auth=$NETLIFY_AUTH_TOKEN --site=$NETLIFY_SITE_ID
				env:
					NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
					NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

✅ Récapitulatif rapide

npm run build → dossier build/.
Netlify : configurez Build command npm run build, Publish build, ajoutez _redirects pour SPA.
Vercel : souvent automatique ; utilisez vercel CLI ou interface et configurez les env vars.
Testez localement avec serve -s build.