Pourquoi Deployer Nuxt sur Supabase ?
Deployer un application Nuxt.js sur Supabase permet aux développeurs de bénéficier d'une solution complète pour la gestion des bases de données, les APIs et l'authentification tout en offrant une infrastructure robuste et performante. Ce contexte est particulièrement pertinent dans le développement moderne où les applications sont souvent complexes et nécessitent une gestion fine des ressources backend.
Un cas d'utilisation concret serait un application de note privée. En déployant cette application sur Supabase, on peut tirer parti de la fonctionnalité de base de données relationnelle pour stocker les notes, l'authentification pour gérer les utilisateurs et les API RESTful pour permettre l'accès aux données depuis le frontend.
Prerequis
- Connaissance des bases du développement web (HTML, CSS, JavaScript)
- Maîtrise de Nuxt.js
- Accès à un compte Supabase
- Node.js installé sur son ordinateur (version recommandée : 14.0.0 ou plus tard)
- npm installé (inclus dans Node.js)
Concepts fondamentaux
Base de données SQL avec Supabase
Supabase offre une base de données SQL dédiée, basée sur PostgreSQL. Cette base de données est accessible via des API RESTful et GraphQL, facilitant la manipulation des données depuis le frontend.
## Créer une table dans PostgreSQL (SQL)
CREATE TABLE notes (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Authentification avec Supabase
Supabase fournit un système d'authentification robuste qui permet de gérer les utilisateurs, les rôles et les permissions.
## Se connecter à Supabase en utilisant JavaScript
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'https://your-supabase-url.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)
async function signIn(email, password) {
const { user, error } = await supabase.auth.signIn({ email, password })
if (error) throw error
return user
}
API RESTful avec Supabase
Supabase génère automatiquement des endpoints RESTful pour chaque table dans la base de données. Ces endpoints peuvent être utilisés pour créer, lire, mettre à jour et supprimer des enregistrements.
## Créer une note via l'API RESTful de Supabase (JavaScript)
async function createNote(title, content) {
const { data, error } = await supabase.from('notes').insert([{ title, content }])
if (error) throw error
return data[0]
}
Mise en pratique : projet fil rouge
Mini-projet : Gestionnaire de Tâches
Ce projet va implémenter un simple gestionnaire de tâches où les utilisateurs peuvent créer, lire, mettre à jour et supprimer des tâches.
Étape 1 : Initialiser le projet Nuxt.js
## Créer un nouveau projet Nuxt.js
npx create-nuxt-app task-manager
cd task-manager
Étape 2 : Installer les dépendances
npm install @supabase/supabase-js axios
Étape 3 : Configurer Supabase
Créer un fichier .env à la racine du projet et ajouter les informations de connexion à Supabase.
SUPABASE_URL=https://your-supabase-url.supabase.co
SUPABASE_ANON_KEY=your-anon-key
Étape 4 : Créer une composante pour la liste des tâches
Créer un fichier components/TodoList.vue avec le code suivant :
<template>
<div>
<h1>Tâches</h1>
<ul v-if="tasks">
<li v-for="task in tasks" :key="task.id">task.title</li>
</ul>
<button @click="fetchTasks">Rafraîchir</button>
</div>
</template>
<script>
export default {
data() {
return {
tasks: null
}
},
methods: {
async fetchTasks() {
const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
const { data, error } = await supabase.from('tasks').select('*')
if (error) throw error
this.tasks = data
}
},
mounted() {
this.fetchTasks()
}
}
</script>
Étape 5 : Créer une composante pour la création de tâches
Créer un fichier components/TodoCreate.vue avec le code suivant :
<template>
<div>
<h2>Nouvelle Tâche</h2>
<form @submit.prevent="createTask">
<input type="text" v-model="title" placeholder="Titre" required />
<textarea v-model="content" placeholder="Description"></textarea>
<button type="submit">Créer</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
content: ''
}
},
methods: {
async createTask() {
const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
const { data, error } = await supabase.from('tasks').insert([{ title: this.title, content: this.content }])
if (error) throw error
this.$emit('task-created', data[0])
}
}
}
</script>
Étape 6 : Intégrer les composantes dans la page principale
Modifier le fichier pages/index.vue pour inclure les composantes créées :
<template>
<div>
<TodoCreate @task-created="fetchTasks" />
<TodoList @tasks-updated="fetchTasks" />
</div>
</template>
<script>
import TodoList from '~/components/TodoList.vue'
import TodoCreate from '~/components/TodoCreate.vue'
export default {
components: {
TodoList,
TodoCreate
},
methods: {
async fetchTasks() {
// La méthode fetchTasks sera ajoutée ici plus tard
}
}
}
</script>
Erreurs frequentes et debugging
Erreur 1 : TypeError: Cannot read property 'from' of undefined
Cause : L'instance de Supabase n'est pas correctement initialisée.
## Mauvais code
const supabase = createClient()
## Correct code
const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
Erreur 2 : Uncaught (in promise) Error: Request failed with status code 401
Cause : L'utilisateur n'est pas authentifié.
## Mauvais code
const { data, error } = await supabase.from('tasks').insert([{ title, content }])
## Correct code
const { user, error: signInError } = await supabase.auth.signIn({ email, password })
if (signInError) throw signInError
const { data, error } = await supabase.from('tasks').insert([{ title, content }])
Erreur 3 : Uncaught SyntaxError: Unexpected token '<' in JSON at position 0
Cause : La réponse de l'API est vide ou incorrecte.
## Mauvais code
const { data } = await supabase.from('tasks').insert([{ title, content }])
## Correct code
const { data, error } = await supabase.from('tasks').insert([{ title, content }])
if (error) throw error
Pour aller plus loin
Intégrer des fonctionnalités avancées avec Supabase : Explorer les autres API de Supabase comme la recherche et l'authentification social.
Ajouter des notifications push : Utiliser Firebase Cloud Messaging pour envoyer des notifications aux utilisateurs.
Optimiser les performances : Utiliser les services Supabase pour mettre en cache les données et améliorer le temps de réponse.
Défi pratique
Développer une application de blog simple où les utilisateurs peuvent créer, lire, mettre à jour et supprimer des articles. L'application devrait utiliser Supabase pour la gestion des données et Nuxt.js pour le rendu frontend.