Deployer Vue sur Supabase

Pourquoi Deployer Vue sur Supabase ?

Deployer une application Vue.js sur Supabase offre plusieurs avantages pratiques :

1. Scalabilité : Supabase permet de gérer l'échelle de votre application avec des bases de données et des fonctionnalités backend évolutives.
2. Intégration Facile : Vue.js est souvent utilisé dans les projets frontend, tandis que Supabase fournit une solution complète pour le backend (API RESTful et GraphQL).
3. Sécurité : Supabase offre des outils robustes de gestion des autorisations et de sécurité pour protéger vos données.

Un cas d'usage concret est la création d'une application de gestion de projet simple qui nécessite une base de données pour stocker les tâches, des utilisateurs et leurs rôles. Vue.js sera utilisé pour créer l'interface utilisateur frontend, tandis que Supabase fournira le backend nécessaire.

Prerequis

• Connaissances Nécessaires :

  • JavaScript ES6+
  • Concepts de Vue.js (components, props, state management)
  • Connaissance de la base de données SQL et des bases de données relationnelles
  • Familiarité avec les API RESTful ou GraphQL

• Outils à Installer :

  • Node.js v14+ (npm inclus)
  • Vue CLI v4+
  • Supabase CLI v2+

Concepts Fondamentaux

1. Supabase Projet

Un projet Supabase est une instance de base de données et d'API backend. Pour créer un nouveau projet, suivez les étapes suivantes :

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

## Créer un nouveau projet
supabase init my-vue-app

2. Connexion à la Base de Données

Pour se connecter à votre base de données depuis Vue.js, vous pouvez utiliser l'API JavaScript de Supabase :

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.globalProperties.$supabaseUrl = 'https://your-project-ref.supabase.co';
app.config.globalProperties.$supabaseKey = 'your-anon-key';
app.config.globalProperties.$supabaseAnonKey = 'your-anon-key';

app.mount('#app');

3. Création d'une Table

Créez une table dans votre base de données pour stocker les tâches :

-- Dans la console du dashboard Supabase
CREATE TABLE tasks (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  completed BOOLEAN DEFAULT false
);

4. API CRUD avec Supabase

Utilisez l'API JavaScript de Supabase pour effectuer des opérations CRUD :

// src/components/Tasks.vue
<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add new task" />
    <ul>
      <li v-for="task in tasks" :key="task.id">
        task.title - task.description
        <button @click="toggleComplete(task)">Toggle</button>
        <button @click="deleteTask(task)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  created() {
    this.fetchTasks();
  },
  methods: {
    async fetchTasks() {
      const { data, error } = await this.$supabase
        .from('tasks')
        .select('*');
      if (error) throw error;
      this.tasks = data;
    },
    async addTask() {
      const { data, error } = await this.$supabase
        .from('tasks')
        .insert([{ title: this.newTask }]);
      if (error) throw error;
      this.newTask = '';
      this.fetchTasks();
    },
    async toggleComplete(task) {
      const { data, error } = await this.$supabase
        .from('tasks')
        .update({ completed: !task.completed })
        .eq('id', task.id);
      if (error) throw error;
      this.fetchTasks();
    },
    async deleteTask(task) {
      const { error } = await this.$supabase
        .from('tasks')
        .delete()
        .eq('id', task.id);
      if (error) throw error;
      this.fetchTasks();
    }
  }
};
</script>

Mise en Pratique : Projet Fil Rouge

Étape 1: Création du Projet Vue.js

Créez un nouveau projet Vue.js :

## Installer Vue CLI
npm install -g @vue/cli

## Créer un nouveau projet
vue create task-manager
cd task-manager

Étape 2: Ajout des Composants

Ajoutez les composants nécessaires pour l'application de gestion de tâches :

mkdir src/components
touch src/components/Tasks.vue
touch src/components/AddTask.vue

Étape 3: Structure des Fichiers

Organisez le projet en ajoutant un fichier App.vue comme point d'entrée :

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Task Manager</h1>
    <AddTask />
    <Tasks />
  </div>
</template>

<script>
import AddTask from './components/AddTask.vue';
import Tasks from './components/Tasks.vue';

export default {
  name: 'App',
  components: {
    AddTask,
    Tasks
  }
};
</script>

Étape 4: Ajout des Styles

Ajoutez un fichier src/assets/styles.css pour les styles globaux :

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

h1 {
  text-align: center;
}

Étape 5: Installation des Dépendances et Exécution du Projet

Installez les dépendances nécessaires et exécutez le projet :

npm install axios supabase-js
npm run serve

Erreurs Fréquentes et Debugging

1. Erreur : Connection Refused

Si vous rencontrez une erreur de connexion refusée, vérifiez les URL et les clés API.

// Incorrect
this.$supabaseUrl = 'http://localhost:54321';
this.$supabaseKey = 'invalid-key';

// Correct
this.$supabaseUrl = 'https://your-project-ref.supabase.co';
this.$supabaseKey = 'your-anon-key';

2. Erreur : CORS Policy

Si vous rencontrez une erreur de politique de sécurité CORS, assurez-vous que votre projet Supabase est configuré pour accepter les requêtes CORS.

## Dans le dashboard Supabase
Project settings -> API -> Enable CORS

3. Erreur : Invalid Argument

Si vous recevez une erreur d'argument invalide, vérifiez les données que vous passez aux fonctions Supabase.

// Incorrect
await this.$supabase.from('tasks').insert([{ title: 'Task' }]);

// Correct
await this.$supabase.from('tasks').insert([{ title: 'Task', description: 'Description' }]);

Pour Aller Plus loin

1. Authentification avec Supabase Auth

Ajoutez une authentification simple à votre application pour gérer les utilisateurs :

// src/components/Login.vue
<template>
  <div>
    <input v-model="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async login() {
      const { user, error } = await this.$supabase.auth.signInWithPassword({
        email: this.email,
        password: this.password
      });
      if (error) throw error;
      console.log(user);
    }
  }
};
</script>

2. GraphQL avec Supabase Functions

Utilisez GraphQL pour créer des requêtes complexes :

// src/components/TaskDetails.vue
<template>
  <div v-if="task">
    <h2>task.title</h2>
    <p>task.description</p>
    <button @click="toggleComplete">Toggle Complete</button>
    <button @click="deleteTask">Delete</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      task: null
    };
  },
  created() {
    this.fetchTask();
  },
  methods: {
    async fetchTask() {
      const { data, error } = await this.$supabase
        .rpc('get_task_by_id', { id: this.$route.params.id });
      if (error) throw error;
      this.task = data[0];
    },
    async toggleComplete() {
      const { error } = await this.$supabase
        .rpc('toggle_complete', { id: this.task.id });
      if (error) throw error;
      this.fetchTask();
    },
    async deleteTask() {
      const { error } = await this.$supabase
        .rpc('delete_task', { id: this.task.id });
      if (error) throw error;
      this.$router.push('/tasks');
    }
  }
};
</script>

3. Déploiement sur Vercel

Déployez votre application Vue.js sur Vercel :

## Installer Vercel CLI
npm install -g vercel

## Deployer le projet
vercel

Défi Pratique

Créez une fonction Supabase pour ajouter des tâches en utilisant un formulaire de saisie.

1. Créez un nouveau composant AddTask.vue avec un formulaire.
2. Ajoutez une fonction dans le script qui utilise l'API Supabase pour insérer les données du formulaire dans la base de données.
3. Assurez-vous que le formulaire est réinitialisé après l'ajout succès.

Ce tutoriel vous aide à déployer une application Vue.js sur Supabase, en couvrant les concepts fondamentaux et en fournissant un projet complet pour mettre en pratique vos connaissances.