Deployer React sur Fly.io

Pourquoi Deployer React sur Fly.io ?

Deployer une application React sur Fly.io est une solution pratique pour les développeurs qui cherchent à rendre leurs applications plus accessibles, scalables et fiables. En particulier, si vous travaillez avec des projets de petite à moyenne taille et que vous voulez minimiser la complexité opérationnelle, Fly.io offre une solution très efficace.

Un cas d'usage concret : Imaginez que vous développez un application mobile pour gestionnaire de tâches. Vous avez besoin d'une application qui soit facilement accessible sur n'importe quel appareil et qui puisse gérer la charge de travail en fonction du nombre d'utilisateurs. Deployer cette application sur Fly.io permettra à votre utilisateur final de l'utiliser sans soucis, tout en vous offrant une infrastructure qui s'adapte automatiquement au volume de trafic.

Prerequis

• Connaissances Nécessaires :

  • Base en React et JavaScript
  • Connaissance des concepts de développement web (HTML/CSS)
  • Familiarité avec les outils de gestion de paquets comme npm ou yarn
  • Compréhension de la terminologie cloud computing (par exemple, "cloud", "serverless")

• Outils à Installer :

  • Node.js v14.0.0 ou plus récent
  • npm v6.0.0 ou plus récent
  • Fly.io CLI v1.8.2 ou plus récent

Concepts Fondamentaux

1. Introduction à Fly.io

Fly.io est une plateforme cloud serverless qui permet de déployer des applications web et mobiles rapidement et facilement. Son architecture basée sur Kubernetes permet d'automatiser le scaling et la mise en production.

## Installation de l'outil CLI de Fly.io
npm install -g flyctl

## Connexion à votre compte Fly.io
flyctl auth login

2. Création d'une Nouvelle Application

Pour commencer, vous devez créer une nouvelle application sur Fly.io.

## Créer une nouvelle application
flyctl launch --name mon-app-react

3. Configuration de l'Application React

Créez un nouveau projet React en utilisant Create React App.

npx create-react-app mon-app-react
cd mon-app-react
npm start

4. Déploiement sur Fly.io

Maintenant, déployez votre application sur Fly.io.

## Build de l'application React
npm run build

## Créer une image Docker pour l'application
flyctl build -t myapp-docker-image

## Déployer l'image sur Fly.io
flyctl deploy --image myapp-docker-image

Mise en Pratique : Projet Fil Rouge

Étape 1 : Création d'un Gestionnaire de Tâches Simple

Créons un gestionnaire de tâches simple avec React.

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

Structure du projet :

• src/
  • App.js
  • TaskList.js
  • AddTask.js
  • index.js

Étape 2 : Création des Composants

TaskList.js

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

const TaskList = ({ tasks, onDelete }) => {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          <Task task={task} onDelete={onDelete} />
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

AddTask.js

import React, { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text) return alert('Please add a task');
    onAdd({ id: Math.floor(Math.random() * 100000), text });
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a task..."
      />
      <button type="submit">Add</button>
    </form>
  );
};

export default AddTask;

Task.js

import React from 'react';

const Task = ({ task, onDelete }) => {
  return (
    <div>
      {task.text}
      <button onClick={() => onDelete(task.id)}>Delete</button>
    </div>
  );
};

export default Task;

Étape 3 : Structure des Fichiers

src/
├── App.js
├── index.js
├── TaskList.js
└── AddTask.js

Étape 4 : Code Principal de App.js

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

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

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

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div className="App">
      <header>
        <h1>Task Manager</h1>
      </header>
      <AddTask onAdd={addTask} />
      <TaskList tasks={tasks} onDelete={deleteTask} />
    </div>
  );
}

export default App;

Étape 5 : Exécution de l'Application

npm start

Erreurs Frequentes et Debugging

1. Erreur : TypeError: Cannot read property 'map' of undefined

Code Incorrect :

const TaskList = ({ tasks }) => {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          <Task task={task} />
        </li>
      ))}
    </ul>
  );
};

Correction :

const TaskList = ({ tasks }) => {
  if (!tasks || tasks.length === 0) return null;
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          <Task task={task} />
        </li>
      ))}
    </ul>
  );
};

2. Erreur : Error: Module not found: Error: Can't resolve 'react-dom'

Code Incorrect :

npm install react

Correction :

npm install react react-dom

3. Erreur : Fly.io error: failed to deploy

Code Incorrect :

flyctl deploy --image myapp-docker-image

Correction :

Vérifiez que votre image Docker est correctement construite et poussée sur Fly.io.

Pour Aller Plus Loin

1. Utilisation de Contexte pour Gérer l'État Global

L'utilisation du contexte React peut aider à gérer un état global plus facilement.

Documentation React Context

2. Optimisation des Performances avec React Profiler

React Profiler est une outil utile pour optimiser les performances de votre application.

React Profiler

3. Intégration avec Firebase pour la Gestion des Données

Firebase est un service d'infrastructure backend que vous pouvez intégrer facilement dans votre application React.

Firebase

Défi Pratique : Créer une Application de Note

Créez une application simple de note qui permet aux utilisateurs de créer, lire, mettre à jour et supprimer des notes. Utilisez React pour la front-end et un backend avec Express.js.

Instructions :

1. Créez un nouveau projet React.
2. Créez un backend avec Express.js pour gérer les notes.
3. Intégrez le frontend React avec le backend Express.js.
4. Déployez l'application sur Fly.io.