Configuration de Convex

Convex est le backend de ScaleRocket. Il gère votre base de données, l'authentification, les abonnements en temps réel et les fonctions serverless — le tout en TypeScript.

Créer un compte Convex

1. Allez sur convex.dev
2. Cliquez sur Sign up et créez votre compte
3. Vous pouvez vous inscrire avec GitHub ou Google

Initialiser votre projet

Depuis la racine de votre projet, exécutez :

npx convex dev

Au premier lancement, cela va :

• Vous demander de vous connecter (si ce n'est pas déjà fait)
• Créer un nouveau projet Convex (ou se lier à un projet existant)
• Déployer votre schéma et vos fonctions
• Commencer à surveiller les changements et recharger à chaud

Note : npx convex dev est la commande principale que vous utiliserez en développement. Elle surveille votre répertoire convex/ et déploie automatiquement les changements en temps réel.

Obtenir votre URL de déploiement

1. Allez sur dashboard.convex.dev
2. Sélectionnez votre projet
3. Copiez la Deployment URL (ressemble à https://your-project-123.convex.cloud)
4. Ajoutez-la à votre fichier d'environnement :

# apps/app/.env.local
VITE_CONVEX_URL=https://your-project-123.convex.cloud

Configurer les fournisseurs d'authentification

ScaleRocket supporte la connexion par email/mot de passe, Google et GitHub par défaut.

Définissez vos variables d'environnement via le CLI Convex :

# Site URL (l'URL publique de votre application)
npx convex env set SITE_URL https://your-app.com

# GitHub OAuth
npx convex env set AUTH_GITHUB_ID your-github-client-id
npx convex env set AUTH_GITHUB_SECRET your-github-client-secret

# Google OAuth
npx convex env set AUTH_GOOGLE_ID your-google-client-id
npx convex env set AUTH_GOOGLE_SECRET your-google-client-secret

GitHub OAuth

1. Allez dans les GitHub Developer Settings
2. Cliquez sur New OAuth App
3. Définissez l'URL de callback d'autorisation sur votre SITE_URL
4. Copiez le Client ID et le Client Secret
5. Définissez-les avec npx convex env set comme indiqué ci-dessus

Google OAuth

1. Allez sur la Google Cloud Console
2. Créez un nouveau projet (ou utilisez un projet existant)
3. Allez dans APIs & Services > Credentials
4. Créez un OAuth 2.0 Client ID (Application Web)
5. Ajoutez votre SITE_URL comme URI de redirection autorisée
6. Copiez le Client ID et le Client Secret
7. Définissez-les avec npx convex env set comme indiqué ci-dessus

Aperçu du schéma

Avec Convex, votre schéma est défini entièrement en TypeScript :

// convex/schema.ts
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  profiles: defineTable({
    userId: v.string(),
    name: v.string(),
    email: v.string(),
    avatarUrl: v.optional(v.string()),
  }).index("by_userId", ["userId"]),

  subscriptions: defineTable({
    userId: v.string(),
    stripeSubscriptionId: v.string(),
    status: v.string(),
  }).index("by_userId", ["userId"]),
});

Le schéma est automatiquement déployé lorsque vous exécutez npx convex dev. Il n'y a pas de migrations à gérer — Convex gère les changements de schéma pour vous.

Note : Convex valide toutes les données par rapport à votre schéma au moment de l'exécution. Si une mutation tente d'insérer des données qui ne correspondent pas, elle générera une erreur.

Fonctions Convex

Convex fournit quatre types de fonctions :

Exemple de Query

// convex/profiles.ts
import { query } from "./_generated/server";
import { v } from "convex/values";

export const getProfile = query({
  args: { userId: v.string() },
  handler: async (ctx, args) => {
    return await ctx.db
      .query("profiles")
      .withIndex("by_userId", (q) => q.eq("userId", args.userId))
      .unique();
  },
});

Exemple de Mutation

// convex/profiles.ts
import { mutation } from "./_generated/server";
import { v } from "convex/values";

export const updateProfile = mutation({
  args: { userId: v.string(), name: v.string() },
  handler: async (ctx, args) => {
    const profile = await ctx.db
      .query("profiles")
      .withIndex("by_userId", (q) => q.eq("userId", args.userId))
      .unique();

    if (!profile) throw new Error("Profile not found");

    await ctx.db.patch(profile._id, { name: args.name });
  },
});

Exemple d'Action

// convex/emails.ts
import { action } from "./_generated/server";
import { v } from "convex/values";

export const sendWelcomeEmail = action({
  args: { email: v.string(), name: v.string() },
  handler: async (ctx, args) => {
    // Call an external email API
    await fetch("https://api.your-email-service.com/send", {
      method: "POST",
      body: JSON.stringify({
        to: args.email,
        subject: `Welcome, ${args.name}!`,
      }),
    });
  },
});

Temps réel

Tous les hooks useQuery dans Convex sont réactifs par défaut. Lorsque les données sous-jacentes changent, vos composants se re-rendent automatiquement — aucune configuration supplémentaire nécessaire.

// apps/app/src/components/Profile.tsx
import { useQuery } from "convex/react";
import { api } from "../../convex/_generated/api";

export function Profile({ userId }: { userId: string }) {
  const profile = useQuery(api.profiles.getProfile, { userId });

  if (!profile) return <div>Loading...</div>;

  return <div>{profile.name}</div>;
}

Note : Il n'y a pas besoin de polling, de configuration WebSocket ou d'invalidation de cache. Convex gère tout cela pour vous. Lorsqu'une mutation met à jour des données dont dépend une query, tous les clients abonnés reçoivent la mise à jour instantanément.

Dashboard Convex

Convex est livré avec un dashboard intégré sur dashboard.convex.dev où vous pouvez :

• Parcourir et modifier vos tables de données
• Voir et exécuter vos fonctions
• Surveiller les logs et les erreurs
• Gérer les variables d'environnement
• Voir l'historique de déploiement

Note : Le dashboard est un excellent outil de débogage en développement. Vous pouvez inspecter vos données, exécuter des queries manuellement et voir les logs en temps réel.

Prochaines étapes

• Configurer Stripe pour les paiements
• Mettre en place les flux d'authentification dans le dashboard
• Créer des endpoints API pour votre API