Voici le tutoriel détaillé sur la façon de déployer une application Flask sur Supabase :
Pourquoi Deployer Flask sur Supabase ?
Dans un monde d'applications web croissantes, il est crucial de choisir des solutions qui offrent à la fois flexibilité et scalabilité. Supabase est une plateforme open-source qui combine les meilleures fonctionnalités de base de données avec une interface simple et intuitive. Pour les développeurs Flask, déployer sur Supabase offre plusieurs avantages :
- Scalabilité : Supabase peut gérer un grand nombre d'utilisateurs et d'opérations en arrière-plan.
- Sécurité : La plateforme est conçue pour la sécurité des données avec des fonctionnalités intégrées de contrôle d'accès et de chiffrement.
- Intégration simple : Supabase offre une API RESTful et GraphQL, facilitant l'intégration avec des applications Flask.
Un cas concret d'utilisation est le développement d'une application de gestion de tâches. Avec Flask pour la logique métier et Supabase pour la base de données, on peut créer une solution complète qui est à la fois performante et sécurisée.
Prerequis
Connaissances nécessaires :
- Bases de Python
- Connaissance de Flask (routes, templates, etc.)
- Compréhension des bases de données relationnelles
- Familiarité avec Git pour le déploiement
Outils à installer :
- Python 3.8+
- pip (Python package installer)
- PostgreSQL (ou une base de données compatible comme Supabase)
- Git
Concepts fondamentaux
1. Supabase CLI
La ligne de commande de Supabase est un outil puissant pour gérer votre projet Supabase.
## Installation via npm
npm install -g supabase-cli
Concept : La CLI permet de créer, configurer et déployer des projets Supabase directement depuis la console.
2. Structure du Projet
Une application Flask typique a une structure de dossier comme suit :
my_flask_app/
├── app.py
├── templates/
│ └── index.html
├── static/
│ └── style.css
└── requirements.txt
Concept : app.py est le fichier principal qui contient la logique de l'application. templates/ et static/ stockent les fichiers HTML et CSS respectivement.
3. Connexion à Supabase
Supabase fournit une bibliothèque Python pour faciliter les opérations avec la base de données.
## app.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
API_URL = "https://your-supabase-url.supabase.co"
API_KEY = "your-supabase-key"
def get_data():
headers = {
"apikey": API_KEY,
"Authorization": f"Bearer {API_KEY}"
}
response = requests.get(f"{API_URL}/rest/v1/your-table", headers=headers)
return response.json()
@app.route('/')
def index():
data = get_data()
return render_template('index.html', data=data)
if __name__ == '__main__':
app.run(debug=True)
Concept : La connexion à Supabase est faite via une requête HTTP. Les données sont récupérées et passées au template HTML.
Mise en pratique : Projet fil rouge
Nous allons créer un simple gestionnaire de tâches en utilisant Flask et Supabase.
Étape 1 : Installation des dépendances
## Création d'un environnement virtuel (optionnel mais recommandé)
python -m venv venv
source venv/bin/activate # Sur Windows utilisez `venv\Scripts\activate`
## Installation des packages nécessaires
pip install Flask requests
Étape 2 : Configuration de la base de données
Créez une nouvelle table dans Supabase pour stocker les tâches.
Concept : Créer une table tasks avec les champs id, title, et completed.
Étape 3 : Création des fichiers du projet
app.py
## app.py
from flask import Flask, render_template, request, redirect, url_for
import requests
app = Flask(__name__)
API_URL = "https://your-supabase-url.supabase.co"
API_KEY = "your-supabase-key"
def get_data():
headers = {
"apikey": API_KEY,
"Authorization": f"Bearer {API_KEY}"
}
response = requests.get(f"{API_URL}/rest/v1/tasks", headers=headers)
return response.json()
@app.route('/')
def index():
data = get_data()
return render_template('index.html', tasks=data)
@app.route('/add', methods=['POST'])
def add_task():
title = request.form['title']
payload = {"title": title, "completed": False}
headers = {
"apikey": API_KEY,
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}
requests.post(f"{API_URL}/rest/v1/tasks", json=payload, headers=headers)
return redirect(url_for('index'))
@app.route('/toggle/<int:id>', methods=['POST'])
def toggle_task(id):
payload = {"completed": request.form['completed'] == 'true'}
headers = {
"apikey": API_KEY,
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}
requests.patch(f"{API_URL}/rest/v1/tasks/{id}", json=payload, headers=headers)
return redirect(url_for('index'))
if __name__ == '__main__':
app.run(debug=True)
templates/index.html
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Manager</title>
<link rel="stylesheet" href="url_for('static', filename='style.css')">
</head>
<body>
<h1>Task Manager</h1>
<form action="/add" method="post">
<input type="text" name="title" placeholder="Add a new task" required>
<button type="submit">Add Task</button>
</form>
<ul>
{% for task in tasks %}
<li>
task.title
<form action="/toggle/task.id" method="post">
<input type="hidden" name="completed" value="'true' if not task.completed else 'false'">
<button type="submit">'Mark as done' if not task.completed else 'Unmark as done'</button>
</form>
</li>
{% endfor %}
</ul>
</body>
</html>
static/style.css
/* static/style.css */
body {
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
border: 1px solid #ccc;
padding: 5px;
display: flex;
justify-content: space-between;
}
Étape 4 : Exécution de l'application
## Lancer le serveur Flask
python app.py
Accédez à http://127.0.0.1:5000/ pour voir votre gestionnaire de tâches en action.
Erreurs fréquentes et debugging
1. Erreur : "Connection refused"
## ❌ Mauvais
response = requests.get(f"{API_URL}/rest/v1/tasks", headers=headers)
Correction : Assurez-vous que Supabase est bien démarré et que les URLs et clés d'API sont correctes.
## ✅ Correct
response = requests.get("https://your-supabase-url.supabase.co/rest/v1/tasks", headers=headers)
2. Erreur : "403 Forbidden"
## ❌ Mauvais
headers = {
"apikey": API_KEY,
"Authorization": f"Bearer {API_KEY}"
}
Correction : Vérifiez que la clé d'API a les droits appropriés sur la table tasks.
## ✅ Correct
headers = {
"apikey": API_KEY,
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}
3. Erreur : "405 Method Not Allowed"
## ❌ Mauvais
requests.post(f"{API_URL}/rest/v1/tasks", json=payload, headers=headers)
Correction : Assurez-vous que la méthode HTTP est correcte (POST pour les insertions).
## ✅ Correct
requests.post(f"{API_URL}/rest/v1/tasks", json=payload, headers=headers)
Pour aller plus loin
1. Authentification avec Supabase
Supabase offre une authentification complète qui peut être intégrée facilement dans vos applications Flask.
2. Utilisation de SQLAlchemy pour ORM
Pour une application plus complexe, vous pouvez utiliser SQLAlchemy comme ORM avec Supabase.
3. Déploiement sur Heroku
Pour déployer votre application Flask sur une plateforme cloud, utilisez Heroku.
Défi pratique : Créez un petit script CLI pour ajouter et gérer des tâches depuis la ligne de commande. Utilisez le module argparse pour parser les commandes.
## cli.py
import argparse
import requests
API_URL = "https://your-supabase-url.supabase.co"
API_KEY = "your-supabase-key"
def add_task(title):
payload = {"title": title, "completed": False}
headers = {
"apikey": API_KEY,
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}
response = requests.post(f"{API_URL}/rest/v1/tasks", json=payload, headers=headers)
print(response.json())
if __name__ == '__main__':
parser = argparse.ArgumentParser(description="CLI for managing tasks")
subparsers = parser.add_subparsers(dest='command')
add_parser = subparsers.add_parser('add', help="Add a new task")
add_parser.add_argument('title', type=str, help="Title of the task")
args = parser.parse_args()
if args.command == 'add':
add_task(args.title)
Utilisez le script en ligne de commande :
python cli.py add "Buy groceries"
Ceci devrait vous aider à démarrer la création d'une application Flask complète avec Supabase, et vous donner les bases pour approfondir vos compétences.