Déploiement d'Applications React

Préparation de l'application pour la production

Avant de déployer votre application, vous devez la préparer pour la production. Cela inclut la minification du code, la compression des assets, et la configuration des variables d'environnement.

Build de l'application

Pour créer une version optimisée de votre application, exécutez la commande suivante :

npm run build

Cela génère un dossier build contenant les fichiers optimisés pour la production.

Déploiement sur Netlify

Netlify est une plateforme populaire pour déployer des applications web. Voici comment déployer votre application React sur Netlify :

Étape 1 : Créer un compte Netlify

Si vous n'avez pas encore de compte Netlify, vous pouvez en créer un sur netlify.com.

Étape 2 : Déployer via l'interface graphique

1. Connectez-vous à Netlify et cliquez sur "New site from Git".

2. Sélectionnez votre dépôt Git (GitHub, GitLab, ou Bitbucket).

3. Configurez les paramètres de build (par défaut, Netlify détecte automatiquement les paramètres pour une application React).

4. Cliquez sur "Deploy site".

Étape 3 : Déployer via la ligne de commande

Vous pouvez également déployer votre application en utilisant l'outil en ligne de commande Netlify :

npm install -g netlify-cli
netlify deploy

Suivez les instructions pour déployer votre application.

Déploiement sur Vercel

Vercel est une autre plateforme populaire pour déployer des applications React. Voici comment déployer votre application sur Vercel :

Étape 1 : Créer un compte Vercel

Si vous n'avez pas encore de compte Vercel, vous pouvez en créer un sur vercel.com.

Étape 2 : Déployer via l'interface graphique

1. Connectez-vous à Vercel et cliquez sur "New Project".

2. Importez votre dépôt Git (GitHub, GitLab, ou Bitbucket).

3. Configurez les paramètres de build (Vercel détecte automatiquement les paramètres pour une application React).

4. Cliquez sur "Deploy".

Étape 3 : Déployer via la ligne de commande

Vous pouvez également déployer votre application en utilisant l'outil en ligne de commande Vercel :

npm install -g vercel
vercel

Suivez les instructions pour déployer votre application.

Déploiement sur GitHub Pages

GitHub Pages est une option gratuite pour héberger des applications web directement depuis un dépôt GitHub. Voici comment déployer votre application React sur GitHub Pages :

Étape 1 : Installer gh-pages

Installez le package gh-pages pour faciliter le déploiement :

npm install --save gh-pages

Étape 2 : Configurer package.json

Ajoutez les scripts suivants à votre fichier package.json :

"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build"
},
"homepage": "https://votre-nom-utilisateur.github.io/votre-repo"

Étape 3 : Déployer

Exécutez la commande suivante pour déployer votre application :

npm run deploy

Votre application sera disponible à l'URL spécifiée dans homepage.

Optimisation pour la production

Voici quelques conseils pour optimiser votre application React pour la production :

• Minification : Assurez-vous que votre code est minifié pour réduire la taille des fichiers.
• Compression : Utilisez la compression Gzip ou Brotli pour réduire la taille des assets.
• Variables d'environnement : Configurez les variables d'environnement pour la production (par exemple, l'URL de l'API).
• Cache : Configurez les en-têtes de cache pour améliorer les performances de chargement.

Comparatif : Vercel vs Netlify – Quel est le meilleur plan gratuit ?

🚀 Vercel – Plan Gratuit

• Stockage & Hébergement : Hébergement gratuit pour sites statiques et applications serverless.
• Nom de Domaine : Sous-domaine .vercel.app gratuit ou connexion d'un domaine personnalisé.
• Déploiement Automatique : GitHub, GitLab, Bitbucket.
• Bande Passante : 125 Go par mois.
• Fonctions Serverless : Accès limité (10s d’exécution max).
• Limites : Logs limités à 24h, pas d’auto-scaling avancé.

🌍 Netlify – Plan Gratuit

• Stockage & Hébergement : Idéal pour les sites statiques et JAMstack.
• Nom de Domaine : Sous-domaine .netlify.app gratuit.
• Déploiement Automatique : GitHub, GitLab, Bitbucket.
• Bande Passante : 100 Go par mois.
• Fonctions Serverless : 125 000 requêtes/mois.
• Limites : 15 min max par build, formulaires limités à 100 soumissions/mois.

📊 Comparaison Vercel vs Netlify

🏆 Conclusion

Si vous travaillez avec Next.js ou React, Vercel est le meilleur choix.

Pour un projet statique ou JAMstack, Netlify est une excellente option.

Alternatives gratuites : Cloudflare Pages (bande passante illimitée) et GitHub Pages (pour sites statiques).

Conclusion

Vous avez maintenant une solide compréhension du déploiement d'applications React sur différentes plateformes comme Netlify, Vercel, et GitHub Pages. Que ce soit pour un projet personnel ou professionnel, ces techniques vous permettront de rendre votre application accessible au public de manière efficace.

Pour continuer votre apprentissage, découvrez les bonnes pratiques et la maintenance de vos applications React dans le chapitre suivant : Bonnes Pratiques et Maintenance.