Deployer React sur Vercel

Deployer React sur Vercel : Un Tutoriel Avancé

Pourquoi Deployer React sur Vercel ?

Deployer une application React sur Vercel est un processus essentiel pour les développeurs qui cherchent à rendre leurs applications accessibles en ligne rapidement et facilement. Vercel est une entreprise de cloud computing dont le logiciel permet la mise en production web rapide, l'optimisation des performances et la gestion du contenu statique.

L'un des avantages majeurs de deployer sur Vercel est sa facilité d'utilisation. Cela rend la publication et la mise à jour des applications beaucoup plus simples que les autres plateformes de déploiement traditionnelles. Les développeurs peuvent déployer leurs applications en quelques minutes simplement avec un simple clic, ce qui accélère le développement et permet aux équipes de se concentrer sur l'innovation plutôt que sur la gestion du déploiement.

Par exemple, imaginez une startup qui a besoin d'une application web pour gérer les commandes des clients. En utilisant Vercel, cette startup peut créer, développer et déployer son application en seulement quelques heures. Cela permettra à l'entreprise de se concentrer sur la création de valeur plutôt que sur la gestion du déploiement et de l'infrastructure.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des connaissances suivantes :

• Connaissances en JavaScript et React
• Un environnement de développement intégré (IDE) comme Visual Studio Code
• Node.js et npm installés sur votre machine. La version recommandée est la 14.x ou ultérieure.

Concepts fondamentaux

Avant de commencer le tutoriel, nous allons aborder les concepts clés nécessaires pour comprendre comment déployer une application React sur Vercel.

1. Création d'un nouveau projet React

Commencez par créer un nouveau projet React en utilisant la commande suivante dans votre terminal :

npx create-react-app mon-projet-vercel

Cela installera tous les fichiers nécessaires pour votre application React et vous lancera le serveur de développement.

2. Configuration du fichier package.json

Le fichier package.json est le cœur de votre projet Node.js. Il contient des informations sur votre projet, comme son nom, sa version et ses dépendances. Pour déployer sur Vercel, vous aurez besoin d'ajouter une clé spéciale dans ce fichier.

Ajoutez la ligne suivante à l'intérieur du tableau scripts :

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

3. Création d'un fichier vercel.json

Vercel utilise le fichier vercel.json pour configurer des options spécifiques à votre projet. Créez un nouveau fichier dans le répertoire racine de votre projet et ajoutez les configurations suivantes :

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build"
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/" }
  ]
}

Ce fichier indique à Vercel de construire votre application en utilisant le script build défini dans votre package.json.

4. Déploiement sur Vercel

Maintenant que votre projet est prêt, il est temps de le déployer sur Vercel. Suivez ces étapes :

1. Allez sur le site web de Vercel et connectez-vous avec votre compte GitHub, GitLab ou Bitbucket.
2. Cliquez sur "New Project" et sélectionnez le dépôt contenant votre projet React.
3. Vérifiez les configurations par défaut et cliquez sur "Deploy".

Vercel prendra soin de construire votre application et la déployer en quelques minutes. Une fois le déploiement terminé, vous pourrez voir l'URL de votre application en ligne.

Mise en pratique : projet fil rouge

Pour mettre en pratique ce que nous avons appris, créons un mini-projet complet : un gestionnaire de tâches simple.

Étape 1 : Initialisation du projet

Commencez par créer un nouveau projet React :

npx create-react-app task-manager-vercel
cd task-manager-vercel

Étape 2 : Création des composants

Créez deux fichiers dans le répertoire src : TaskList.js et AddTask.js.

TaskList.js

Ce composant affichera la liste des tâches.

import React, { useState } from 'react';

const TaskList = () => {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Faire les courses', completed: false },
    { id: 2, text: 'Nettoyer la maison', completed: true }
  ]);

  const toggleTaskCompletion = (id) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  return (
    <div>
      <h1>Ma liste de tâches</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleTaskCompletion(task.id)}
            />
            {task.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

AddTask.js

Ce composant permettra d'ajouter de nouvelles tâches.

import React, { useState } from 'react';

const AddTask = ({ onAddTask }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    onAddTask({ text });
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Ajouter une tâche"
      />
      <button type="submit">Ajouter</button>
    </form>
  );
};

export default AddTask;

Étape 3 : Intégration des composants

Modifiez le fichier App.js pour intégrer les composants TaskList et AddTask.

import React, { useState } from 'react';
import TaskList from './TaskList';
import AddTask from './AddTask';

const App = () => {
  const [tasks, setTasks] = useState([]);

  const addTask = (newTask) => {
    setTasks([...tasks, newTask]);
  };

  return (
    <div className="App">
      <header>
        <h1>Gestionnaire de tâches</h1>
      </header>
      <AddTask onAddTask={addTask} />
      <TaskList tasks={tasks} />
    </div>
  );
};

export default App;

Étape 4 : Configuration du fichier package.json

Assurez-vous que le fichier package.json est configuré comme suit :

{
  "name": "task-manager-vercel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

Étape 5 : Création du fichier vercel.json

Créez un fichier vercel.json dans le répertoire racine de votre projet avec les configurations suivantes :

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build"
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/" }
  ]
}

Étape 6 : Déploiement sur Vercel

Suivez les étapes pour déployer votre application sur Vercel comme décrit précédemment.

Erreurs frequentes et debugging

Voici trois erreurs courantes lors du déploiement de React sur Vercel, ainsi que les solutions à chaque une :

1. Erreur : ModuleNotFoundError: Can't resolve 'react'

Cette erreur se produit lorsque Vercel ne trouve pas la bibliothèque React dans votre projet.

## ❌ Mauvais
import React from 'react';

Correction :

Assurez-vous que vous avez bien installé les dépendances en exécutant :

npm install react react-dom

2. Erreur : SyntaxError: Unexpected token import

Cette erreur indique que Vercel ne comprend pas la syntaxe ES6 des imports et exports.

## ❌ Mauvais
import React from 'react';

Correction :

Assurez-vous d'avoir transpilé votre code en JavaScript standard avant de le déployer. Vous pouvez utiliser Babel pour cela :

1. Installez Babel et les presets nécessaires :

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

2. Créez un fichier babel.config.json à la racine de votre projet avec le contenu suivant :

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3. Erreur : The provided module was empty.

Cette erreur se produit lorsque Vercel ne trouve pas les fichiers nécessaires dans votre projet.

## ❌ Mauvais
npx create-react-app mon-projet-vercel
cd mon-projet-vercel
npm install

Correction :

Assurez-vous que vous avez bien suivi toutes les étapes du tutoriel, notamment la création du fichier vercel.json.

Pour aller plus loin

1. Utilisation de TypeScript avec React sur Vercel

Si vous utilisez TypeScript pour votre projet, assurez-vous d'avoir configuré le type checking correctement.

• Créez un fichier tsconfig.json à la racine de votre projet.
• Ajoutez les configurations suivantes :

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

2. Utilisation de Next.js pour un meilleur contrôle

Next.js est une autre solution populaire pour les applications React. Il offre des fonctionnalités avancées comme le pré-réndering, le server-side rendering et la gestion des API.

• Créez un nouveau projet avec Next.js :

npx create-next-app my-next-project
cd my-next-project

• Utilisez les composants de Next.js pour créer votre application.

3. Intégration avec des services tiers

Pour une meilleure fonctionnalité, vous pouvez intégrer votre application React avec des services tiers comme Firebase pour la gestion des données en temps réel ou Stripe pour le paiement.

• Créez un compte sur Firebase et configurez-le dans votre projet Next.js.
• Intégrez Firebase à votre application pour gérer les données utilisateur et les tâches.

Ce tutoriel vous aide à déployer une application React simple mais complète sur Vercel. En suivant ces étapes, vous pouvez créer une application robuste et facilement déployée en ligne.