Deployer React sur DigitalOcean

Deployer React sur DigitalOcean : Un Tutoriel Intermédiaire

Pourquoi Deployer React sur DigitalOcean ?

En tant que développeur senior React avec 10+ ans d'expérience, vous avez certainement rencontré des défis liés au déploiement de vos applications React. Que ce soit pour des raisons de performance, de sécurité ou simplement de facilité d'accès à votre application, le déploiement sur DigitalOcean peut être une solution idéale.

Contexte Réal : Pourquoi un Dev a Besoin de Ca Au Quotidien

Les entreprises et les startups nécessitent souvent des solutions robustes pour héberger leurs applications web. DigitalOcean offre une plateforme évoluée qui facilite le déploiement et la gestion des applications, y compris celles développées avec React.

Un Cas d'Usage Concret en 2-3 Phrases

Imaginez que vous développiez un site e-commerce utilisant React pour afficher les produits. Pour assurer une haute disponibilité et des performances optimales, vous décidez de déployer votre application sur DigitalOcean. Cela permettra à vos clients d'accéder rapidement et facilement à votre boutique en ligne.

Prerequis

Pour suivre ce tutoriel, vous devez disposer des connaissances suivantes :

• React : Familiarité avec les concepts de composants, état, props, etc.
• Node.js : Connaissance du gestionnaire de paquets npm et de la façon de créer un projet React.
• Git : Connaissance de base pour le contrôle de version.

Vous aurez également besoin d'installer les outils suivants :

• Node.js v14.x ou plus recent
• npm v6.x ou plus récent
• DigitalOcean CLI (DOCTL) : Pour interagir avec l'API DigitalOcean
• Git : Pour la gestion du code source

Concepts Fondamentaux

1. Création d'un Projet React

L'étape initiale consiste à créer un nouveau projet React.

## Créez un nouveau dossier pour votre projet
mkdir my-react-app
cd my-react-app

## Initialisez un nouveau projet React
npx create-react-app my-react-app

## Naviguez dans le répertoire du projet
cd my-react-app

2. Configuration de la Base du Projet

La structure de base d'un projet React est organisée comme suit :

my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package.json
└── README.md

3. Ajout d'une API

Pour rendre votre application React plus dynamique, vous pouvez ajouter une API. Voici un exemple simple de création d'un serveur backend avec Express.

## Créez un nouveau dossier pour le serveur
mkdir server
cd server

## Initialisez un nouveau projet Node.js
npm init -y

## Installez les dépendances nécessaires
npm install express cors body-parser

## Créez un fichier index.js
touch index.js
javascript
// server/index.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());
app.use(bodyParser.json());

// Route de test
app.get('/api/data', (req, res) => {
  const data = { message: 'Hello from the server!' };
  res.json(data);
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

4. Lancement de l'Application

Maintenant que vous avez configuré votre application React et votre serveur backend, vous pouvez les lancer.

## Dans le dossier my-react-app
npm start

## Dans un autre terminal, dans le dossier server
node index.js

Mise en Pratique : Projet Fil Rouge

Nous allons créer un simple gestionnaire de tâches à jour pour illustrer la mise en pratique du déploiement React sur DigitalOcean.

Étape 1 : Création du Composant Tâche

Créez un composant Task.js qui affiche une tâche et permet de la marquer comme terminée.

// src/Task.js
import React from 'react';

const Task = ({ task, onToggle }) => {
  return (
    <div className={`task ${task.completed ? 'completed' : ''}`} onClick={() => onToggle(task.id)}>
      {task.text}
    </div>
  );
};

export default Task;

Étape 2 : Création du Composant Tâche Liste

Créez un composant TaskList.js qui affiche la liste de tâches et permet d'ajouter de nouvelles tâches.

// src/TaskList.js
import React, { useState } from 'react';
import Task from './Task';

const TaskList = () => {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Faire les courses', completed: false },
    { id: 2, text: 'Laver les dents', completed: true }
  ]);
  const [newTaskText, setNewTaskText] = useState('');

  const addTask = () => {
    if (newTaskText.trim() !== '') {
      const newTask = { id: Date.now(), text: newTaskText, completed: false };
      setTasks([...tasks, newTask]);
      setNewTaskText('');
    }
  };

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

  return (
    <div>
      <input type="text" value={newTaskText} onChange={(e) => setNewTaskText(e.target.value)} />
      <button onClick={addTask}>Ajouter une tâche</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <Task task={task} onToggle={toggleTask} />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

Étape 3 : Intégration du Composant Tâche Liste dans App.js

Intégrez le composant TaskList dans votre application principale.

// src/App.js
import React from 'react';
import './App.css';
import TaskList from './TaskList';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Gestionnaire de Tâches</h1>
        <TaskList />
      </header>
    </div>
  );
}

export default App;

Étape 4 : Lancement et Test

Lancez votre application et vérifiez que le gestionnaire de tâches fonctionne correctement.

npm start

Erreurs Fréquentes et Debugging

1. Problème de CORS

Code Incorrect :

// server/index.js
const app = express();
app.get('/api/data', (req, res) => {
  const data = { message: 'Hello from the server!' };
  res.json(data);
});

Code Correct :

// server/index.js
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/api/data', (req, res) => {
  const data = { message: 'Hello from the server!' };
  res.json(data);
});

2. Problème de Port

Code Incorrect :

## Dans le dossier my-react-app
npm start

## Dans un autre terminal, dans le dossier server
node index.js

Code Correct :

## Dans le dossier server
PORT=5000 node index.js

3. Problème d'Installation de Dépendances

Code Incorrect :

npm install express cors body-parser

Code Correct :

npm install --save express cors body-parser

Pour Aller Plus loin

1. Sécurité Avancée

Explorez les concepts de sécurité avancée pour votre application React, comme l'utilisation de tokens JWT et la configuration des headers CORS.

2. Optimisation Performante

Découvrez comment optimiser le rendu de vos composants React en utilisant des hooks performants et des techniques de memoisation.

3. Déploiement Automatique

Intégrez votre application avec des outils d'intégration continue (CI) comme GitHub Actions ou GitLab CI pour automatiser les déploiements sur DigitalOcean.

Défi Pratique

Développez un petit projet React qui utilise une API RESTful pour gérer des utilisateurs. Créez des composants pour afficher la liste des utilisateurs, ajouter de nouveaux utilisateurs et mettre à jour les informations existantes. Assurez-vous que votre application fonctionne correctement sur DigitalOcean.