ScaleRocket/Web
ENFR

Lancez en 5 Minutes

Faites tourner ScaleRocket en local en moins de 5 minutes. Clonez, configurez et lancez votre SaaS.

Lancez en 5 Minutes

Ce guide vous emmène de zéro à un SaaS fonctionnel avec authentification, paiements et tableau de bord. Suivez chaque étape dans l'ordre.

1. Cloner le dépôt

git clone https://github.com/your-username/scalerocket.git
cd scalerocket

2. Installer les dépendances

ScaleRocket utilise pnpm workspaces avec Turborepo. Installez tout depuis la racine :

pnpm install

Cela installe les dépendances pour toutes les applications (web, app, ops) et les packages (ui, config, types, emails).

3. Configurer votre backend

  1. Allez sur supabase.com/dashboard
  2. Cliquez sur New project
  3. Choisissez une organisation, nommez votre projet et définissez un mot de passe de base de données
  4. Attendez que le projet termine son provisionnement (~30 secondes)
  5. Allez dans Settings > API et copiez :
    • Project URL (ex. https://abcdefg.supabase.co)
    • anon public key (commence par eyJ...)
    • service_role secret key (commence par eyJ... — gardez-la secrète)

Note : Sauvegardez le mot de passe de la base de données dans un endroit sûr. Vous en aurez besoin si vous souhaitez vous connecter directement à PostgreSQL.

  1. Allez sur convex.dev et créez un compte
  2. Depuis la racine de votre projet, exécutez :
npx convex dev
  1. Suivez les instructions pour vous connecter et créer un nouveau projet
  2. Copiez la Deployment URL depuis dashboard.convex.dev (ressemble à https://your-project-123.convex.cloud)

Note : npx convex dev surveille votre répertoire convex/ et déploie automatiquement les changements en temps réel pendant le développement.

4. Créer un compte Stripe

  1. Allez sur stripe.com et créez un compte
  2. Dans le Stripe Dashboard, allez dans Product catalog > Add product
  3. Créez votre produit d'abonnement avec deux tarifs :
    • Tarif Monthly (ex. 19$/mois)
    • Tarif Yearly (ex. 190$/an)
  4. Copiez chaque Price ID (commence par price_)
  5. Allez dans Developers > API keys et copiez :
    • Publishable key (commence par pk_test_)
    • Secret key (commence par sk_test_)

5. Créer un compte Resend

  1. Allez sur resend.com et créez un compte
  2. Allez dans API Keys et créez une nouvelle clé
  3. Copiez la clé API (commence par re_)

6. Configurer les variables d'environnement

Chaque application a son propre fichier .env.example. Copiez-les :

# Marketing site
cp apps/web/.env.example apps/web/.env.local

# Dashboard
cp apps/app/.env.example apps/app/.env.local

# Admin panel
cp apps/ops/.env.example apps/ops/.env.local

Remplissez les valeurs dans chaque .env.local :

# apps/app/.env.local
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=eyJ...your-anon-key

# apps/web/.env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...your-anon-key
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
RESEND_API_KEY=re_...
# apps/app/.env.local
VITE_CONVEX_URL=https://your-project-123.convex.cloud

# apps/web/.env.local
NEXT_PUBLIC_CONVEX_URL=https://your-project-123.convex.cloud
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
RESEND_API_KEY=re_...

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

npx convex env set SITE_URL https://your-app.com
npx convex env set AUTH_GITHUB_ID your-github-client-id
npx convex env set AUTH_GITHUB_SECRET your-github-client-secret
npx convex env set AUTH_GOOGLE_ID your-google-client-id
npx convex env set AUTH_GOOGLE_SECRET your-google-client-secret

Note : Le préfixe VITE_ est requis pour les applications Vite (app et ops). Le préfixe NEXT_PUBLIC_ est requis pour les variables côté client de Next.js.

7. Pousser le schéma de base de données

ScaleRocket inclut des migrations pour les utilisateurs, les abonnements, les crédits, et plus encore. Poussez-les vers votre projet Supabase :

npx supabase login
npx supabase link --project-ref your-project-ref
npx supabase db push

Vous pouvez trouver votre project ref dans l'URL du tableau de bord Supabase : https://supabase.com/dashboard/project/<project-ref>.

Note : Cela crée toutes les tables, les politiques Row Level Security et les fonctions de base de données dont votre application a besoin.

Avec Convex, le schéma est défini en TypeScript et déployé automatiquement. Exécutez simplement :

npx convex dev

Cela déploie votre schéma et vos fonctions vers votre projet Convex. Il n'y a pas de migrations à gérer — Convex gère les changements de schéma pour vous.

Note : npx convex dev surveille les changements et recharge automatiquement votre backend pendant le développement.

8. Déployer les Edge Functions (Local)

Pour servir les Supabase Edge Functions localement en développement :

npx supabase functions serve

Cela démarre le serveur Edge Functions en parallèle de vos applications.

Avec Convex, il n'y a pas d'étape séparée pour déployer les fonctions. Toutes vos fonctions (queries, mutations, actions et HTTP actions) sont automatiquement déployées lorsque vous exécutez npx convex dev. Elles sont déjà actives et prêtes à l'emploi.

9. Démarrer le serveur de développement

Depuis la racine du projet, démarrez toutes les applications simultanément :

pnpm dev

Turborepo exécute les trois applications en parallèle. Ouvrez :

ApplicationURLDescription
Site marketinghttp://localhost:3000Page d'accueil, tarifs, blog
Tableau de bordhttp://localhost:5173Tableau de bord utilisateur après connexion
Panneau d'administrationhttp://localhost:5174Outils d'administration internes

10. Tester le flux

  1. Visitez localhost:3000 — vous devriez voir la page d'accueil
  2. Cliquez sur Sign up et créez un compte avec email/mot de passe
  3. Vérifiez votre email (ou les logs Supabase Auth) pour le lien de confirmation
  4. Après confirmation, visitez localhost:5173 — vous devriez être dans le tableau de bord
  5. Essayez de passer à un plan payant — le mode test Stripe accepte le numéro de carte 4242 4242 4242 4242
  6. Visitez localhost:5174 et connectez-vous avec un email de la liste blanche admin

Dépannage

pnpm install échoue ? Assurez-vous d'avoir pnpm 8+ installé : pnpm --version. Mettez à jour avec npm install -g pnpm@latest.

Erreur de connexion Supabase ? Vérifiez bien votre SUPABASE_URL et SUPABASE_ANON_KEY. Assurez-vous qu'il n'y a pas d'espaces en fin de ligne.

Erreurs de webhook Stripe ? Pour le développement local, utilisez le Stripe CLI pour rediriger les webhooks :

stripe listen --forward-to localhost:3000/api/webhooks/stripe

Copiez le webhook signing secret affiché dans votre .env.local en tant que STRIPE_WEBHOOK_SECRET.

Port déjà utilisé ? Tuez le processus sur ce port : lsof -ti:3000 | xargs kill -9

Prochaines étapes

Votre SaaS tourne en local. Maintenant, approfondissez :

Fini ? Marquez cette page comme terminée.

On this page

Lancez en 5 Minutes1. Cloner le dépôt2. Installer les dépendances3. Configurer votre backend4. Créer un compte Stripe5. Créer un compte Resend6. Configurer les variables d'environnement7. Pousser le schéma de base de données8. Déployer les Edge Functions (Local)9. Démarrer le serveur de développement10. Tester le fluxDépannageProchaines étapes