Deployer React sur Firebase

Deployer React sur Firebase : Un Tutoriel Approfondi

Pourquoi Deployer React sur Firebase ?

Au quotidien, les développeurs ont besoin de déployer leurs applications web rapidement et facilement. Firebase est une plateforme d'infrastructure pour le développement web et mobile qui offre des services tels que le stockage, la base de données, l'analyse, les authentification, le hosting et bien plus encore. Deployer React sur Firebase permet aux développeurs d'avoir un processus de déploiement rapide et fiable sans avoir à s'inquiter des configurations complexes des serveurs.

Un cas d'usage concret serait le développement d'une application web interne pour une entreprise qui nécessite un accès sécurisé et une disponibilité élevée. Deployer sur Firebase permettrait d'avoir une application déployée rapidement et disponible en production sans avoir à gérer les infrastructures de serveurs.

Prerequis

• Connaissance de base de React
• Node.js (v14 ou plus)
• npm (Node Package Manager)

Concepts fondamentaux

Firebase CLI (Command Line Interface)

Firebase CLI est une interface de ligne de commande permettant d'interagir avec les services Firebase.

## Installation de la CLI Firebase
npm install -g firebase-tools

## Connexion à votre compte Firebase
firebase login

Firebase Hosting

Firebase Hosting est un service d'hébergement pour des applications web statiques. Il offre une solution simple et économique pour déployer des applications React.

## Initialisation de Firebase dans votre projet React
firebase init

## Sélectionnez "Hosting" lors de l'initialisation

Firestore Database

Firestore est une base de données NoSQL cloud-native qui offre des fonctionnalités avancées comme les transactions, les triggers et la répartition mondiale.

// Configuration de Firestore dans votre application React
import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  // Vos configurations Firebase ici
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

export default db;

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches pour démontrer le déploiement d'une application React sur Firebase.

Étape 1 : Création du Projet React

## Création d'un nouveau projet React
npx create-react-app task-manager
cd task-manager

Étape 2 : Ajout de Firestore

## Installation de firebase-admin pour l'API Firestore côté serveur
npm install firebase-admin

Créez un fichier server.js dans le dossier racine du projet :

// server.js
const admin = require('firebase-admin');
const serviceAccount = require('./path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

const db = admin.firestore();

module.exports = { db };

Étape 3 : Ajout des composants React

Créez un nouveau fichier TaskList.js dans le dossier src/components :

// src/components/TaskList.js
import React, { useState, useEffect } from 'react';
import db from '../../server';

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

  useEffect(() => {
    const unsubscribe = db.collection('tasks').onSnapshot((snapshot) => {
      setTasks(snapshot.docs.map(doc => doc.data()));
    });
    return () => unsubscribe();
  }, []);

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

export default TaskList;

Étape 4 : Ajout des styles

Ajoutez du CSS à src/App.css :

/* src/App.css */
body {
  font-family: Arial, sans-serif;
}

#task-form input[type="text"] {
  width: calc(100% - 22px);
  padding: 8px;
  margin-bottom: 16px;
}

Étape 5 : Ajout du formulaire pour ajouter des tâches

Modifiez src/App.js :

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

const App = () => {
  const [newTask, setNewTask] = useState('');

  const handleAddTask = async (e) => {
    e.preventDefault();
    await db.collection('tasks').add({ title: newTask });
    setNewTask('');
  };

  return (
    <div>
      <h1>Task Manager</h1>
      <form onSubmit={handleAddTask}>
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task"
        />
        <button type="submit">Add Task</button>
      </form>
      <TaskList />
    </div>
  );
};

export default App;

Étape 6 : Déploiement sur Firebase

## Déploiement de l'application React sur Firebase Hosting
firebase deploy --only hosting

Erreurs frequentes et debugging

1. Erreur : Error: Failed to compile

   // Code incorrect
   import { useState } from 'react';
   
   const App = () => {
     const [tasks, setTasks] = useState([]);
   
     useEffect(() => {
       db.collection('tasks').onSnapshot((snapshot) => {
         setTasks(snapshot.docs.map(doc => doc.data()));
       });
     }, []);
   
     return (
       <ul>
         {tasks.map(task => (
           <li key={task.id}>{task.title}</li>
         ))}
       </ul>
     );
   };
   
   export default App;
   javascript
   // Code correct
   import React, { useState, useEffect } from 'react';
   import db from '../../server';
   
   const TaskList = () => {
     const [tasks, setTasks] = useState([]);
   
     useEffect(() => {
       const unsubscribe = db.collection('tasks').onSnapshot((snapshot) => {
         setTasks(snapshot.docs.map(doc => doc.data()));
       });
       return () => unsubscribe();
     }, []);
   
     return (
       <ul>
         {tasks.map(task => (
           <li key={task.id}>{task.title}</li>
         ))}
       </ul>
     );
   };
   
   export default TaskList;
   

2. Erreur : Error: Could not find module 'firebase-admin'

   # Code incorrect
   const admin = require('firebase-admin');
   bash
   # Code correct
   const admin = require('firebase-admin');
   const serviceAccount = require('./path/to/serviceAccountKey.json');
   
   admin.initializeApp({
     credential: admin.credential.cert(serviceAccount)
   });
   

3. Erreur : Error: Firebase App named '[DEFAULT]' already exists

   // Code incorrect
   import firebase from 'firebase/app';
   import 'firebase/firestore';
   
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID"
   };
   
   firebase.initializeApp(firebaseConfig);
   const db = firebase.firestore();
   
   export default db;
   javascript
   // Code correct
   import firebase from 'firebase/app';
   import 'firebase/firestore';
   
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID"
   };
   
   if (!firebase.apps.length) {
     firebase.initializeApp(firebaseConfig);
   } else {
     firebase.app(); // if already initialized, use that one
   }
   
   const db = firebase.firestore();
   
   export default db;
   

Pour aller plus loin

1. Authentification Firebase : Apprenez à ajouter une authentification basée sur les utilisateurs pour sécuriser votre application.
2. Firestore Security Rules : Explorez comment définir des règles de sécurité pour protéger vos données Firestore.
3. Firebase Functions : Découvrez comment créer des fonctions côté serveur pour exécuter du code en réponse à des événements.

Défi pratique : Ajoutez une fonctionnalité permettant d'édition et de suppression de tâches dans votre gestionnaire de tâches.