wdc saas starter kit

Avis! Ce kit de démarrage n'est pas entièrement terminé, mais je rends simplement cela public pour l'instant si quelqu'un veut l'ajouter. Je m'épuise pour travailler sur ce sujet, donc je suis ouvert à tous ceux qui souhaitent aider à contribuer à corriger tous les bogues qu'ils trouvent, etc.

Discorde

Vous pouvez rejoindre la discorde si vous souhaitez parler du code ici ou suggérer des fonctionnalités / etc.

https://discord.gg/n2ueyp7rfu

Procédure pas à pas de code (Accès précoce)

Pour ceux qui veulent plus de contenu de procédures vidéo pratiques qui explique cette base de code, montre comment la déployer et comment la maintenir en production, je travaille sur une série de procédures vidéo payantes trouvées ici https://webdevcody.gumroad.com / l / wdc-saas-starter-kit-walkthrough. Je suis en train d'enregistrer et d'éditer des vidéos, mais si vous achetez maintenant, c'est 50% de réduction sur le prix d'origine.

Bienvenue sur le kit de démarrage

Bienvenue au Kit de démarrage WDC NEXT.JS! Il s'agit d'un modèle GitHub qui contient la technologie suivante qui, selon nous, est un excellent point de départ pour tout nouveau produit SaaS:

• Autorisation
• Gestion de l'abonnement (Stripe)
• Intégration de rayures / webhooks
• Gestion des groupes
• Téléchargement de fichiers sur R2
• Orm
• Mode clair / sombre
• Shadcn
• CSS du vent arrière
• Analytique de la posthog

Contributif

Si vous trouvez des problèmes évidents avec ce kit de démarrage, n'hésitez pas à soumettre une demande de traction ou à soumettre et à émettre. Nous voulons garder ce démarreur simple avec la technologie de base choisie, nous ne recommandons donc pas d'essayer d'ajouter diverses choses sans approbation préalable.

Comment commencer

Commencez par cliquer sur le bouton "Utilisez ce modèle" sur le repo GitHub. Nous suggérons de créer un nouveau référentiel afin que vous puissiez suivre vos modifications de code. Après, clonez votre propre référentiel vers votre ordinateur et commencez à y travailler.

Condition préalable

Ce kit de démarrage utilise Docker et Docker Compose pour exécuter une base de données Postgres, vous devrez donc les installer ou modifier le projet pour pointer vers une solution de base de données hébergée.

Comment courir

1. cp .env.sample .env
2. npm i
3. docker compose up
4. npm run db:migrate
5. npm run dev

Configuration de l'env

Ce kit de démarrage dépend de quelques services externes, tels que Google Oauth , Stripe et RENNED . Vous devrez suivre les étapes ci-dessous et vous assurer que tout est configuré et copier les valeurs de nécessité dans votre fichier .env:

Revivre

Créez un compte sur https://resend.com/ et générez une clé API et collez dans un e-mail_server_password

Configurez votre domaine en renvoi afin que vous puissiez envoyer des e-mails à partir de votre domaine personnalisé et définissez un e-mail_from pour correspondre à votre ligne attendue de la ligne. Pour ce faire, accédez à votre fournisseur de domaine et ajoutez les enregistrements nécessaires décrits dans RENNED.

Cloudflare r2

TODO: Ajouter des informations sur le seau et les clés

Base de données

Ce kit de démarrage utilise Postgres. Supabase fournit 2 bases de données postgres gratuites. Configurez une base de données et obtenez votre base de données_url .

Configuration de la bande

Ce kit de démarrage utilise Stripe, ce qui signifie que vous devrez configurer un compte Stripe sur https://stripe.com. Après avoir créé un compte et un projet, vous devrez définir les variables Env suivantes:

• Stripe_api_key
• Next_public_stripe_key
• Stripe_webhook_secret
• Price_id
• Next_public_stripe_manage_url

Comment vous pouvez trouver ceux-ci sont décrits ci-dessous:

Clés à rayures

Vous devez définir à la fois next_public_stripe_key et stripe_api_key à l'intérieur de .env. Ceux-ci peuvent être trouvés ici:

• https://dashboard.stripe.com/test/apikeys

Clés webhook

Selon que vous vous développez localement ou que vous vous déployez pour prod, il y a deux chemins que vous devez emprunter pour obtenir une clé WebHook:

Développement local

1. Installer la CLI Stripe: pour macOS ou Linux, vous pouvez utiliser Homebrew: brew install stripe/stripe-cli/stripe

• Pour Windows, vous pouvez utiliser l'installateur Windows à partir de la page Stripe CLI GitHub Releases - https://github.com/stripe/stripe-cli/releases

2. Ajoutez Stripe CLI à votre chemin: assurez-vous que le répertoire contenant l'exécutable CLI Stripe est dans la variable d'environnement de chemin de votre système.
3. Nous avons fourni une stripe:listen vous pouvez courir si vous souhaitez configurer votre application en cours d'exécution locale sur ListSen pour tout événement Stripe. Exécutez cette commande et copiez le secret WebHook qu'il imprime sur la console dans votre fichier .env.

Production

Lorsque vous allez en production, vous devrez créer un point de terminaison WebHook et copier votre secret Webhook dans Stripe_webhook_secret :

1. https://dashboard.stripe.com/test/webhooks
2. Créez un point de terminaison pointant vers https://your-domain.com/api/webhooks/stripe
3. Écoutez les événements facture.payment_succeeded et checkout.Session.completed
4. Trouvez votre clé secrète Stripe et copiez dans vos projets

ID de prix (produit)

Vous devrez créer un produit d'abonnement dans Stripe:

1. https://dashboard.stripe.com/products/create
2. Faites votre produit unique
3. Copiez l'ID de prix
4. Coller un prix ID dans .env de Price_id

Portail client

Stripe a une manière intégrée pour les clients d'annuler leurs abonnements. Vous devrez activer cette fonctionnalité:

1. https://dashboard.stripe.com/settings/billing/portal
2. Cliquez sur le bouton Activer le lien du portail
3. Copiez votre lien de portail
4. Coller une variable Env que Next_Public_stripe_manage_url

Host_name

Lorsque vous dépiez la production, vous souhaitez définir host_name à votre FQDN, comme https://you-domain.com

Configuration de l'automne

Fournisseur Google

Par défaut, ce démarreur n'est livré qu'avec le fournisseur Google que vous devrez configurer:

1. https://console.cloud.google.com/apis/credentials
2. Créer un nouveau projet
3. Configuration de l'écran de consentement OAuth
4. Créer des informations d'identification - ID client OAuth
5. Pour les origines JavaScript autorisées

• http: // localhost: 3000
• https://your-domain.com

6. URIS redirigé autorisé

• http: // localhost: 3000 / api / auth / rappel / google
• https://your-domain.com/api/auth/callback/google

7. Définissez votre identifiant Google et secret à l'intérieur de .env

• Google_client_id
• Google_client_secret

Fournisseur de github

TODO: Ajouter des informations

Posthogue