Deploiement sur Vercel

Deployer votre application React en production est la derniere etape pour la rendre accessible en ligne.

Préparation du projet

Avant de déployer, assurez-vous que votre projet est prêt.

1. Build de production

Testez que votre build fonctionne localement :

npm run build

Cette commande crée un dossier dist/ avec les fichiers optimisés pour la production.

Vérifier le build :

npm run preview

Ouvrez http://localhost:4173 et testez votre application.

2. Variables d'environnement

Si votre application utilise des variables d'environnement, créez un fichier .env :

.env

VITE_API_URL=https://api.example.com
VITE_API_KEY=your-api-key-here

# .gitignore
.env
.env.local
.env.production
node_modules/
dist/

Créez un fichier .env.example pour documenter les variables nécessaires :

.env.example

VITE_API_URL=
VITE_API_KEY=

Ce fichier PEUT etre commite (sans les valeurs sensibles).

Utiliser les variables dans votre code :

Dans Vite, les variables sont accessibles via import.meta.env — seules celles préfixées par VITE_ sont exposées côté client :

// ✅ Accéder à une variable d'environnement Vite
const apiUrl = import.meta.env.VITE_API_URL;

function App() {
  return <p>API : {import.meta.env.VITE_API_URL}</p>;
}

3. Verifier package.json

Assurez-vous que les scripts sont présents :

package.json

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.0"
  }
}

4. Créer un README

Documentez votre projet avec un fichier README.md :

README.md

# My React App

Description de votre application.

## Installation

\`\`\`bash
npm install
\`\`\`

## Développement

\`\`\`bash
npm run dev
\`\`\`

## Build

\`\`\`bash
npm run build
\`\`\`

## Variables d'environnement

Copiez `.env.example` vers `.env` et remplissez les valeurs.

Créer un repository Git

Si ce n'est pas déjà fait, initialisez Git :

# Initialiser Git
git init

# Ajouter tous les fichiers
git add .

# Premier commit
git commit -m "Initial commit"

Créer un repository GitHub

1. Allez sur github.com
2. Cliquez sur "New repository"
3. Donnez un nom à votre repository
4. Cliquez sur "Create repository"

Pusher votre code

# Ajouter le remote (remplacez par votre URL)
git remote add origin https://github.com/votre-username/votre-repo.git

# Pusher le code
git branch -M main
git push -u origin main

Déployer sur Vercel

Étape 1 : Créer un compte Vercel

1. Allez sur vercel.com
2. Cliquez sur "Sign Up"
3. Connectez-vous avec votre compte GitHub

Étape 2 : Importer votre projet

1. Cliquez sur "New Project"
2. Sélectionnez votre repository GitHub
3. Cliquez sur "Import"

Étape 3 : Configurer le projet

Vercel détecte automatiquement que c'est un projet Vite.

Configuration par défaut :

• Framework Preset: Vite
• Build Command: npm run build
• Output Directory: dist

Étape 4 : Ajouter les variables d'environnement

Si votre application utilise des variables d'environnement :

1. Cliquez sur "Environment Variables"
2. Ajoutez chaque variable :
   • Name: VITE_API_URL
   • Value: https://api.example.com
3. Cliquez sur "Add"

Important : Les variables doivent commencer par VITE_ pour être accessibles dans le code.

Étape 5 : Déployer !

1. Cliquez sur "Deploy"
2. Attendez que le build se termine (environ 1-2 minutes)
3. Votre site est en ligne !

Vercel vous donne une URL du type :

https://your-project.vercel.app

Deploiement automatique

Chaque fois que vous pushez du code sur GitHub, Vercel redeploie automatiquement votre site.

# Faites des modifications
git add .
git commit -m "Update homepage"
git push

# Vercel détecte le push et redéploie automatiquement

Configuration du domaine personnalisé (optionnel)

Si vous avez un nom de domaine :

1. Allez dans Settings → Domains
2. Ajoutez votre domaine
3. Suivez les instructions pour configurer les DNS
4. Votre site sera accessible sur votre domaine !

Optimisations de production

1. Lazy Loading

Chargez les composants uniquement quand nécessaire :

import { lazy, Suspense } from 'react';

// ✅ Lazy load pour les pages
const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Suspense>
  );
}

2. Optimiser les images

// ❌ Image non optimisée
<img src="/large-image.jpg" />

// ✅ Image optimisée
<img
  src="/large-image.jpg"
  alt="Description"
  loading="lazy" // Lazy loading natif
  width="800"
  height="600"
/>

3. Code splitting automatique

Vite fait automatiquement du code splitting. Chaque page devient un chunk séparé.

Résultat :

dist/
├── index.html
├── assets/
│   ├── index-abc123.js      # Code principal
│   ├── HomePage-def456.js   # Chunk HomePage
│   └── AboutPage-ghi789.js  # Chunk AboutPage

Les utilisateurs ne téléchargent que le code nécessaire !

Vérifier le déploiement

Checklist post-déploiement

Outils de vérification

1. Lighthouse (dans Chrome DevTools)

1. Ouvrez DevTools (F12)
2. Onglet "Lighthouse"
3. Cliquez sur "Generate report"

Lighthouse teste :

• Performance
• Accessibilité
• Best practices
• SEO

Objectif : Score > 90 dans chaque catégorie.

2. Mobile testing

Testez sur mobile ou avec le mode responsive de DevTools :

• Ctrl+Shift+M (Chrome)
• Testez différentes tailles d'écran

Gérer les erreurs en production

Erreur 404 - Page not found

Si vous utilisez React Router, configurez Vercel pour rediriger toutes les routes vers index.html.

vercel.json (à la racine du projet)

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

Puis :

git add vercel.json
git commit -m "Add vercel routing config"
git push

Erreur de build

Si le build echoue sur Vercel :

1. Regardez les logs dans Vercel Dashboard
2. Reproduisez localement avec npm run build
3. Corrigez l'erreur
4. Pushez le fix

Erreurs courantes :

• Variables d'environnement manquantes
• Imports incorrects (casse différente sur Linux)
• Dépendances manquantes dans package.json

Variables d'environnement non définies

Si votre app affiche "undefined" pour une variable :

1. Vérifiez que la variable commence par VITE_
2. Vérifiez qu'elle est définie dans Vercel (Settings → Environment Variables)
3. Redéployez après l'ajout de variables

Alternative : GitHub Pages

Si vous préférez une alternative à Vercel, le cours propose un guide dédié au déploiement sur GitHub Pages dans les annexes.

Récapitulatif

Ressources

• Vercel Documentation
• Vite Build Guide
• Déployer sur GitHub Pages (alternative dans les Annexes)