Deployer React sur Supabase

Pourquoi Deployer React sur Supabase ?

Le déploiement d'une application React sur Supabase est une solution efficace pour les développeurs qui cherchent à créer des applications web modernes et scalables. En combinant les avantages de React, un framework JavaScript populaire pour construire des interfaces utilisateur réactives, avec Supabase, une plateforme backend basée sur PostgreSQL, on peut créer une application complète en un seul projet.

Un cas d'usage concret est le développement d'une application e-commerce. En utilisant React pour la partie frontend et Supabase pour la gestion de la base de données et le backend, on peut créer une application qui offre une expérience utilisateur fluide tout en gérant efficacement les opérations CRUD sur les produits, les utilisateurs et les commandes.

Prerequis

• Connaissances en JavaScript ES6+
• Familiarité avec React.js
• Node.js (v14.0.0 ou supérieur)
• npm (v6.0.0 ou supérieur)
• Un compte Supabase

Outils à installer

## Installer Node.js et npm si ce n'est pas déjà fait
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 14
nvm use 14

## Installer le CLI Supabase
npm install -g supabase-cli

Concepts fondamentaux

1. Création d'un nouveau projet React

## Créer un nouveau projet React
npx create-react-app my-supabase-app
cd my-supabase-app

2. Configuration de Supabase

• Accédez au site web de Supabase et créez un nouveau projet.
• Notez les informations de connexion (URL, ANON_KEY, SERVICE_ROLE_KEY).

3. Installation des dépendances Supabase

## Installer les dépendances Supabase
npm install @supabase/supabase-js

4. Connexion à la base de données

Créez un fichier lib/supabaseClient.js et ajoutez le code suivant :

// lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-id.supabase.co';
const supabaseAnonKey = 'your-anon-key';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

export default supabase;

Mise en pratique : projet fil rouge

Mini-projet : Gestionnaire de tâches

1. Création d'une nouvelle application React

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

2. Configuration du backend avec Supabase

• Créez une table tasks dans votre base de données Supabase.
• Ajoutez les colonnes suivantes :
  • id (SERIAL PRIMARY KEY)
  • title (VARCHAR NOT NULL)
  • completed (BOOLEAN DEFAULT false)

3. Connexion à la base de données

Créez un fichier lib/supabaseClient.js et ajoutez le code suivant :

// lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-id.supabase.co';
const supabaseAnonKey = 'your-anon-key';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

export default supabase;

4. Création d'un composant pour afficher les tâches

Créez un fichier src/Tasks.js :

// src/Tasks.js
import React, { useState, useEffect } from 'react';
import supabase from './lib/supabaseClient';

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

  useEffect(() => {
    const fetchTasks = async () => {
      const { data, error } = await supabase
        .from('tasks')
        .select('*');

      if (error) {
        console.error(error);
      } else {
        setTasks(data);
      }
    };

    fetchTasks();
  }, []);

  return (
    <div>
      <h1>Tâches</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            {task.title} - {task.completed ? 'Terminée' : 'En cours'}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Tasks;

5. Ajout de la composante dans App.js

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Tasks />
      </header>
    </div>
  );
}

export default App;

Erreurs fréquentes et debugging

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

// ❌ Mauvais
const { data, error } = await supabase.select('*').from('tasks');

// ✅ Correct
const { data, error } = await supabase.from('tasks').select('*');

2. Erreur : Error: Invalid prop 'title' supplied to 'input' element

// ❌ Mauvais
<input type="text" title={task.title} />

// ✅ Correct
<input type="text" value={task.title} />

3. Erreur : Uncaught SyntaxError: Unexpected token '<'

Cela signifie que le serveur Supabase n'a pas pu être atteint correctement. Assurez-vous que l'URL et la clé d'API sont correctes.

Pour aller plus loin

1. Intégration avec Auth0 pour l'authentification : Documentation officielle
2. Utilisation de React Context pour gérer le state global : React Documentation
3. Optimisation des rendus avec React.memo et useMemo : React Documentation

Défi pratique

Créez une application de gestion de contacts avec les fonctionnalités suivantes :

• Ajouter un nouveau contact
• Supprimer un contact
• Mettre à jour les informations d'un contact

En vous inspirant du projet fil rouge, utilisez React et Supabase pour créer cette application.