Construire une application de production et déploiement sur Vercel

Notre voyage cosmique à travers React touche à sa fin. Nous avons construit notre vaisseau, l'avons testé, l'avons optimisé - il est maintenant temps de le lancer dans l'espace interstellaire. Dans ce module, tu apprendras à préparer ton application React pour la production et à la déployer sur la plateforme Vercel afin qu'elle soit accessible aux utilisateurs du monde entier.

Du code à la production - préparer l'application

Le processus consistant à faire passer une application React d'un environnement de développement à la production nécessite plusieurs étapes importantes. Avant d'envoyer notre application dans l'espace (internet), nous devons la préparer correctement.

L'importance d'un build de production

Le code que nous écrivons pendant le développement n'est pas optimal pour s'exécuter dans le navigateur d'un utilisateur. Une application de production devrait être :

• Minifiée - espaces, commentaires supprimés et noms de variables raccourcis
• Optimisée - fusion de plusieurs fichiers, suppression du code inutilisé (tree shaking)
• Compressée - taille plus petite pour le transfert réseau
• Stable - exempte de messages de debug et d'outils de développement

Vite comme outil de build moderne

Vite (« rapide » en français) est un outil moderne de construction d'applications frontend qui accélère considérablement le processus de développement et de production. Contrairement aux outils plus anciens (comme Create React App), Vite utilise les modules ES natifs dans le navigateur pendant le développement et Rollup pour les builds de production.

Principaux avantages de Vite :

• Démarrage ultra-rapide du serveur de développement
• Rafraîchissement rapide (Hot Module Replacement)
• Builds de production efficaces
• Support de TypeScript, JSX, CSS, SCSS, Less et plus encore
• Configuration minimale avec flexibilité

Processus de build de production avec Vite

1. Préparer l'application pour le build

Avant de construire une application de production, il vaut la peine d'effectuer quelques étapes :

Vérifier les dépendances

Assure-toi que toutes les dépendances sont à jour et sécurisées :

1# Vérifier les paquets obsolètes
2npm outdated
3
4# Vérifier les vulnérabilités de sécurité
5npm audit
6
7# Mettre à jour les paquets (si c'est sûr)
8npm update

Supprimer les consoles et debuggers

Le code de production ne devrait pas contenir d'instructions console.log ou debugger. Tu peux utiliser un plugin Babel ou ESLint pour les supprimer automatiquement.

Pour Vite, tu peux ajouter le plugin vite-plugin-remove-console :

1npm install vite-plugin-remove-console --save-dev

Et le configurer dans vite.config.js :

1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3import removeConsole from 'vite-plugin-remove-console';
4
5export default defineConfig({
6  plugins: [
7    react(),
8    removeConsole()
9  ],
10});

Définir les variables d'environnement

Vite prend en charge les variables d'environnement via les fichiers .env. Tu peux créer différents fichiers pour différents environnements :

• .env - variables pour tous les environnements
• .env.development - uniquement pour le développement
• .env.production - uniquement pour la production

Les variables doivent commencer par le préfixe VITE_ pour être disponibles dans le code :

1# .env.production
2VITE_API_URL=https://api.yourdomain.com/v1
3VITE_ANALYTICS_ID=UA-123456789-1

Dans le code, tu les utilises ainsi :

1const apiUrl = import.meta.env.VITE_API_URL;

2. Construire l'application de production

Construire un build de production avec Vite est simple - il suffit d'exécuter la commande :

1npm run build

Cette commande effectue plusieurs opérations :

• Transpile le code ES6+/TypeScript/JSX vers un format pris en charge par les navigateurs
• Minifie le code JavaScript et CSS
• Optimise les assets (images, polices)
• Génère des noms de fichiers hashés pour le cache busting
• Crée un bundle optimisé pour la production

Le résultat est un répertoire dist (par défaut) contenant l'application construite.

3. Tester le build de production en local

Avant le déploiement, il vaut la peine de vérifier si l'application construite fonctionne correctement. Vite fournit un outil simple pour servir localement le build de production :

1npm run preview

Cette commande démarre un serveur local servant l'application construite depuis le répertoire dist, te permettant de vérifier son fonctionnement avant le déploiement réel.

Déploiement sur Vercel

Vercel est une plateforme de déploiement d'applications frontend qui fonctionne à merveille avec React, Next.js et d'autres frameworks. Elle offre un CDN mondial, des déploiements automatiques depuis les dépôts Git, du HTTPS et bien d'autres fonctionnalités.

Pourquoi Vercel ?

• Zero-config - détection et configuration automatiques du framework
• CDN mondial - livraison rapide du contenu aux utilisateurs du monde entier
• Niveau gratuit - pour les projets personnels et open-source
• Preview deployments - chaque pull request génère un déploiement distinct
• Intégration Git - déploiement automatique à chaque push
• Fonctions serverless - possibilité d'ajouter un backend sans serveur séparé

Pas à pas : déployer une app Vite+React sur Vercel

1. Préparer le dépôt Git

Vercel s'intègre avec GitHub, GitLab et Bitbucket. Assure-toi que ton projet est stocké dans l'un de ces services :

1# Si tu n'as pas encore initialisé de dépôt
2git init
3
4# Ajouter les fichiers au dépôt
5git add .
6
7# Créer un commit
8git commit -m "Prepare for deployment"
9
10# Ajouter le dépôt distant (remplace l'URL par la tienne)
11git remote add origin https://github.com/your-username/your-project.git
12
13# Pousser les changements
14git push -u origin main

2. Configurer le projet sur Vercel

1. Crée un compte sur Vercel - va sur vercel.com et inscris-toi (de préférence avec le même compte que ton service Git)

2. Importe le projet :

   • Clique sur « Add New... » > « Project »
   • Sélectionne ton dépôt dans la liste
   • Vercel détectera automatiquement que tu utilises Vite

3. Configure le projet :

   • Framework Preset : Vercel devrait détecter automatiquement Vite
   • Build Command : Par défaut npm run build (ne change rien)
   • Output Directory : Par défaut dist (ne change rien)
   • Environment Variables : Ajoute les mêmes variables que dans .env.production (sans le préfixe VITE_)

4. Clique sur « Deploy » et attends la fin du processus

3. Vérifier le déploiement

Une fois le déploiement terminé, Vercel affichera une page de résumé. Tu peux :

• Visiter ton site à l'adresse automatiquement attribuée (par exemple, your-project.vercel.app)
• Consulter les logs de build et de déploiement
• Configurer un domaine personnalisé

Configuration du déploiement continu (CI/CD)

Vercel configurera automatiquement le déploiement continu (Continuous Deployment) pour ton projet :

• Chaque push sur la branche principale (généralement main ou master) déclenchera un déploiement vers l'environnement de production
• Chaque pull request générera un « Preview Deployment » unique, te permettant de tester les changements avant de les merger dans la branche principale

Cette intégration crée un workflow simple et efficace :

1. Tu travailles localement sur une nouvelle fonctionnalité
2. Tu pousses les changements sur la branche feature/new-feature
3. Tu crées une Pull Request
4. Vercel crée automatiquement un Preview Deployment
5. Tu testes les changements dans un environnement proche de la production
6. Après approbation, tu merges la PR avec la branche principale
7. Vercel met automatiquement à jour l'environnement de production

Optimisation du déploiement

1. Analyse des performances

Vercel offre des Analytics qui aident à surveiller les performances de l'application dans le monde réel :

• Real Experience Score - note de l'expérience utilisateur
• Core Web Vitals - métriques comme LCP, FID et CLS
• Métriques par page - quelles parties de l'application sont les plus lentes

Pour activer les Analytics :

1. Va sur le projet dans Vercel
2. Clique sur l'onglet « Analytics »
3. Clique sur « Enable Analytics »

2. Optimisation des assets statiques

Vite optimise automatiquement les assets pendant le build, mais il vaut la peine de retenir quelques pratiques supplémentaires :

• Utilise des formats d'image modernes - WebP au lieu de JPEG/PNG
• Lazy loading - charge les images/composants uniquement au besoin
• Préchargement des assets critiques - ajoute des balises <link rel="preload"> pour les ressources critiques

3. Edge Functions et Edge Middleware sur Vercel

Pour des applications plus avancées, Vercel offre :

• Edge Functions - fonctions légères s'exécutant sur le réseau edge mondial
• Edge Middleware - code exécuté avant chaque requête

Exemple d'Edge Middleware pour rediriger les utilisateurs en fonction de leur localisation :

1// middleware.js
2export default function middleware(request) {
3  const country = request.geo.country || 'US';
4
5  // Rediriger les utilisateurs polonais vers la version polonaise du site
6  if (country === 'PL' && !request.nextUrl.pathname.startsWith('/pl')) {
7    return Response.redirect(new URL('/pl' + request.nextUrl.pathname, request.url));
8  }
9}
10
11export const config = {
12  matcher: ['/((?!api|_next/static|favicon.ico).*)'],
13};

Bonnes pratiques de production

1. Surveillance des erreurs

Intègre un outil de surveillance des erreurs comme Sentry ou LogRocket :

1npm install @sentry/react

1// src/main.jsx
2import React from 'react';
3import ReactDOM from 'react-dom/client';
4import * as Sentry from '@sentry/react';
5import App from './App';
6import './index.css';
7
8if (import.meta.env.PROD) {
9  Sentry.init({
10    dsn: import.meta.env.VITE_SENTRY_DSN,
11    integrations: [new Sentry.BrowserTracing()],
12    tracesSampleRate: 0.5,
13  });
14}
15
16ReactDOM.createRoot(document.getElementById('root')).render(
17  <React.StrictMode>
18    <App />
19  </React.StrictMode>
20);

2. Code splitting

Découpe l'application en plus petits chunks chargés à la demande :

1import { lazy, Suspense } from 'react';
2
3// Au lieu de : import Dashboard from './Dashboard';
4const Dashboard = lazy(() => import('./Dashboard'));
5
6function App() {
7  return (
8    <div>
9      <Suspense fallback={<div>Chargement...</div>}>
10        <Dashboard />
11      </Suspense>
12    </div>
13  );
14}

3. Progressive Web Apps (PWA)

Transforme ton application React en PWA en ajoutant un Service Worker et un manifest :

1npm install vite-plugin-pwa --save-dev

1// vite.config.js
2import { defineConfig } from 'vite';
3import react from '@vitejs/plugin-react';
4import { VitePWA } from 'vite-plugin-pwa';
5
6export default defineConfig({
7  plugins: [
8    react(),
9    VitePWA({
10      registerType: 'autoUpdate',
11      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
12      manifest: {
13        name: 'Space Mission Control',
14        short_name: 'SpaceMission',
15        description: 'Application for managing space missions',
16        theme_color: '#ffffff',
17        icons: [
18          {
19            src: 'pwa-192x192.png',
20            sizes: '192x192',
21            type: 'image/png'
22          },
23          {
24            src: 'pwa-512x512.png',
25            sizes: '512x512',
26            type: 'image/png'
27          }
28        ]
29      }
30    })
31  ]
32});

Résumé du processus de développement au déploiement

L'ensemble du processus de création et de déploiement d'une application React avec Vite se présente comme suit :

1. Développement

   • Initialiser le projet avec Vite : npm create vite@latest my-app --template react
   • Développer les fonctionnalités dans l'environnement local : npm run dev
   • Tester les composants et les fonctionnalités

2. Préparation pour la production

   • Supprimer les consoles et debuggers
   • Configurer les variables d'environnement de production
   • Vérifier et mettre à jour les dépendances

3. Construction

   • Lancer le build de production : npm run build
   • Tester l'application construite : npm run preview

4. Préparation du dépôt

   • Initialiser le dépôt Git
   • Commit et push vers le dépôt distant

5. Déploiement sur Vercel

   • Connecter avec le dépôt Git
   • Configurer le projet
   • Déployer

6. Post-déploiement

   • Configurer le domaine
   • Activer les Analytics
   • Surveiller les erreurs
   • Optimiser les performances

Gérer l'application en production

Après avoir déployé l'application, tes responsabilités de développeur ne s'arrêtent pas. Il est important de continuer à :

• Surveiller les performances et les erreurs - vérifier régulièrement Vercel Analytics et les outils de suivi des erreurs
• Mettre à jour les dépendances - mettre à jour régulièrement les paquets, surtout pour les correctifs de sécurité
• Introduire de nouvelles fonctionnalités - tirer parti du workflow CI/CD pour introduire les changements en toute sécurité
• Tests A/B - tester de nouvelles fonctionnalités sur un sous-ensemble d'utilisateurs avant le déploiement complet

Fin du voyage cosmique

Nous avons terminé notre voyage cosmique à travers React ! En partant des bases, nous avons progressivement construit des composants de plus en plus avancés, jusqu'à une application complète prête à être déployée sur la plateforme Vercel.

Souviens-toi que, comme l'exploration spatiale, apprendre React est un voyage sans fin. L'écosystème React évolue constamment, de nouvelles bibliothèques, outils et patterns émergent. Reste à jour avec la documentation, les blogs et la communauté pour garder tes compétences actuelles.

Maintenant que ton vaisseau spatial est construit, testé et prêt à voler - il est temps de conquérir le cosmos des applications frontend !

1import React from 'react';
2
3// Deploiement et construction d'une application de production
4export default function App() {
5  return (
6    <div style={{
7      background: '#0d1b2a', minHeight: '100vh',
8      padding: '20px', fontFamily: 'Arial', color: '#e0e1dd'
9    }}>
10      <h1 style={{ color: '#ffd700', textAlign: 'center' }}>
11        Déploiement sur Vercel
12      </h1>
13      <div style={{
14        background: '#1b2838', borderRadius: '12px',
15        padding: '20px', maxWidth: '600px', margin: '20px auto',
16        border: '1px solid #2a3f5f'
17      }}>
18        <h2 style={{ color: '#00d4ff' }}>Étapes du déploiement :</h2>
19        <ol style={{ color: '#e0e1dd', lineHeight: 1.8 }}>
20          <li>npm run build - build de production</li>
21          <li>Vérification du dossier build/</li>
22          <li>Déploiement sur Vercel/Netlify</li>
23          <li>Configuration des variables d'environnement</li>
24        </ol>
25      </div>
26    </div>
27  );
28}