SaaS Boilerplate
v1.7.3
SaaS Boilerplate est un modèle puissant et entièrement personnalisable pour démarrer vos applications SaaS. Construit avec Next.js et Tailwind CSS et les composants d'interface utilisateur modulaires de Shadcn UI . Ce modèle SaaS Next.js vous aide à créer et lancer rapidement un SaaS avec un minimum d'effort.
Doté de fonctionnalités essentielles telles que l'authentification intégrée, la multi-location avec support d'équipe, les rôles et autorisations , la base de données, I18n (internationalisation), la page de destination, le tableau de bord utilisateur, la gestion des formulaires, l'optimisation du référencement, la journalisation, le rapport d'erreurs avec Sentry, les tests, le déploiement. , Surveillance et Usurpation d'identité d'utilisateur , ce modèle SaaS fournit tout ce dont vous avez besoin pour commencer.
Conçu pour les développeurs, ce kit de démarrage Next.js utilise TypeScript pour la sécurité des types et intègre ESLint pour maintenir la qualité du code, ainsi que Prettier pour un formatage de code cohérent. La suite de tests combine Vitest et React Testing Library pour des tests unitaires robustes, tandis que Playwright gère l'intégration et les tests E2E. L'intégration et le déploiement continus sont gérés via GitHub Actions. Pour la gestion des utilisateurs, l'authentification est gérée par Clerk. Pour les opérations de base de données, il utilise Drizzle ORM pour une gestion de base de données sécurisée sur des bases de données populaires telles que PostgreSQL, SQLite et MySQL.
Que vous créiez une nouvelle application SaaS ou que vous recherchiez un modèle SaaS flexible et prêt pour la production , ce passe-partout est là pour vous. Ce kit de démarrage gratuit et open source contient tout ce dont vous avez besoin pour accélérer votre développement et faire évoluer votre produit en toute simplicité.
Clonez ce projet et utilisez-le pour créer votre propre SaaS. Vous pouvez consulter la démo en direct sur SaaS Boilerplate, qui est une démo avec un système d'authentification et de multi-location fonctionnel.
 |  |   |
 | ||
| Ajoutez votre logo ici |
Démo en direct : SaaS Boilerplate
| Page de destination | Tableau de bord utilisateur |
|---|---|
 |  |
| Gestion d'équipe | Profil utilisateur |
|---|---|
 |  |
| S'inscrire | Se connecter |
|---|---|
 |  |
| Page de destination avec mode sombre (version Pro) | Tableau de bord utilisateur avec mode sombre (version Pro) |
|---|---|
 |  |
| Tableau de bord utilisateur avec barre latérale (version Pro) |
|---|
 |
Expérience de développeur avant tout, structure de code extrêmement flexible et ne conservez que ce dont vous avez besoin :
@Fonctionnalité intégrée de Next.js :
Exécutez la commande suivante sur votre environnement local :
git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm installPour information, toutes les dépendances sont mises à jour chaque mois.
Ensuite, vous pouvez exécuter le projet localement en mode développement avec rechargement en direct en exécutant :
npm run devOuvrez http://localhost:3000 avec votre navigateur préféré pour voir votre projet.
Créez un compte Clerk sur Clerk.com et créez une nouvelle application dans le tableau de bord Clerk. Ensuite, copiez les valeurs de NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY et CLERK_SECRET_KEY dans le fichier .env.local (qui n'est pas suivi par Git) :
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key Dans votre tableau de bord de commis, vous devez également Enable Organization en accédant à Organization management > Settings > Enable organization .
Vous disposez désormais d'un système d'authentification entièrement fonctionnel avec Next.js : inscription, connexion, déconnexion, mot de passe oublié, réinitialisation du mot de passe, mise à jour du profil, mise à jour du mot de passe, mise à jour de l'e-mail, suppression du compte, etc.
Le projet utilise DrizzleORM, un ORM de type sécurisé compatible avec les bases de données PostgreSQL, SQLite et MySQL. Par défaut, le projet est configuré pour fonctionner de manière transparente avec PostgreSQL et vous pouvez facilement choisir n'importe quel fournisseur de base de données PostgreSQL.
Pour la traduction, le projet utilise next-intl combiné avec Crowdin. En tant que développeur, vous devez uniquement vous occuper de la version anglaise (ou d’une autre langue par défaut). Les traductions vers d'autres langues sont automatiquement générées et gérées par Crowdin. Vous pouvez utiliser Crowdin pour collaborer avec votre équipe de traduction ou traduire les messages vous-même à l'aide de la traduction automatique.
Pour configurer la traduction (i18n), créez un compte sur Crowdin.com et créez un nouveau projet. Dans le projet nouvellement créé, vous pourrez trouver l'ID du projet. Vous devrez également créer un nouveau jeton d'accès personnel en accédant à Paramètres du compte > API. Ensuite, dans vos actions GitHub, vous devez définir les variables d'environnement suivantes : CROWDIN_PROJECT_ID et CROWDIN_PERSONAL_TOKEN .
Après avoir défini les variables d'environnement dans vos actions GitHub, vos fichiers de localisation seront synchronisés avec Crowdin chaque fois que vous pousserez une nouvelle validation vers la branche main .
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── scripts # Scripts folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # Reusable components
│ ├── features # Components specific to a feature
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ └── utils # Utilities folder
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration Vous pouvez facilement configurer Next.js SaaS Boilerplate en recherchant FIXME: pour effectuer une personnalisation rapide. Voici quelques-uns des fichiers les plus importants à personnaliser :
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png et public/favicon-32x32.png : le favicon de votre site Websrc/utils/AppConfig.ts : fichier de configurationsrc/templates/BaseTemplate.tsx : thème par défautnext.config.mjs : configuration de Next.js.env : variables d'environnement par défautVous avez un accès complet au code source pour une personnalisation plus poussée. Le code fourni n'est qu'un exemple pour vous aider à démarrer votre projet. Le ciel est la limite.
Dans le code source, vous trouverez également des commentaires PRO qui indiquent le code disponible uniquement dans la version PRO. Vous pouvez facilement supprimer ou remplacer ce code par votre propre implémentation.
Pour modifier le schéma de la base de données dans le projet, vous pouvez mettre à jour le fichier de schéma situé dans ./src/models/Schema.ts . Ce fichier définit la structure de vos tables de base de données à l'aide de la bibliothèque Drizzle ORM.
Après avoir modifié le schéma, générez une migration en exécutant la commande suivante :
npm run db:generateCela créera un fichier de migration qui reflète vos modifications de schéma. La migration est automatiquement appliquée lors de la prochaine interaction avec la base de données, il n'est donc pas nécessaire de l'exécuter manuellement ou de redémarrer le serveur Next.js.
Le projet suit la spécification Conventional Commits, ce qui signifie que tous les messages de validation doivent être formatés en conséquence. Pour vous aider à rédiger des messages de validation, le projet utilise Commitizen, une CLI interactive qui vous guide tout au long du processus de validation. Pour l'utiliser, exécutez la commande suivante :
npm run commit L'un des avantages de l'utilisation des commits conventionnels est la possibilité de générer automatiquement un fichier CHANGELOG . Cela nous permet également de déterminer automatiquement le numéro de version suivant en fonction des types de commits inclus dans une version.
Le projet est intégré à Stripe pour le paiement de l'abonnement. Vous devez créer un compte Stripe et vous devez également installer la CLI Stripe. Après avoir installé Stripe CLI, vous devez vous connecter à l'aide de la CLI :
stripe loginEnsuite, vous pouvez exécuter la commande suivante pour créer un nouveau prix :
npm run stripe:setup-price Après avoir exécuté la commande, vous devez copier l'ID de prix et le coller dans src/utils/AppConfig.ts en mettant à jour l'ID de prix existant avec le nouveau.
Dans votre tableau de bord Stripe, vous devez configurer les paramètres de votre portail client sur https://dashboard.stripe.com/test/settings/billing/portal. Plus important encore, vous devez enregistrer les paramètres.
Dans votre fichier .env , vous devez mettre à jour le NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY avec votre propre clé publiable Stripe. Vous pouvez trouver la clé dans votre tableau de bord Stripe. Ensuite, vous devez également créer un nouveau fichier nommé .env.local et ajouter les variables d'environnement suivantes dans le fichier nouvellement créé :
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret Vous obtenez le STRIPE_SECRET_KEY à partir de votre tableau de bord Stripe. Le STRIPE_WEBHOOK_SECRET est généré en exécutant la commande suivante :
npm run dev Vous trouverez dans votre terminal le secret de signature du webhook. Vous pouvez le copier et le coller dans votre fichier .env.local .
Tous les tests unitaires sont situés à côté du code source dans le même répertoire, ce qui les rend plus faciles à trouver. Le projet utilise Vitest et React Testing Library pour les tests unitaires. Vous pouvez exécuter les tests avec la commande suivante :
npm run testLe projet utilise Playwright pour les tests d'intégration et de bout en bout (E2E). Vous pouvez exécuter les tests avec les commandes suivantes :
npx playwright install # Only for the first time in a new environment
npm run test:e2e Dans l'environnement local, les tests visuels sont désactivés et le terminal affichera le message [percy] Percy is not running, disabling snapshots. . Par défaut, les tests visuels s'exécutent uniquement dans GitHub Actions.
Le dossier App Router est compatible avec le runtime Edge. Vous pouvez l'activer en ajoutant les lignes suivantes src/app/layouts.tsx :
export const runtime = 'edge' ; Pour information, la migration de la base de données n'est pas compatible avec le runtime Edge. Vous devez donc désactiver la migration automatique dans src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;Après l'avoir désactivé, vous devez exécuter la migration manuellement avec :
npm run db:migrateVous devez également exécuter la commande chaque fois que vous souhaitez mettre à jour le schéma de la base de données.
Pendant le processus de création, les migrations de bases de données sont automatiquement exécutées, il n'est donc pas nécessaire de les exécuter manuellement. Cependant, vous devez définir DATABASE_URL dans vos variables d'environnement.
Ensuite, vous pouvez générer une version de production avec :
$ npm run buildIl génère une version de production optimisée du passe-partout. Pour tester la build générée, exécutez :
$ npm run start Vous devez également définir les variables d'environnement CLERK_SECRET_KEY en utilisant votre propre clé.
Cette commande démarre un serveur local à l'aide de la version de production. Vous pouvez maintenant ouvrir http://localhost:3000 dans votre navigateur préféré pour voir le résultat.
Le projet utilise Sentry pour surveiller les erreurs. Dans l'environnement de développement, aucune configuration supplémentaire n'est nécessaire : NextJS SaaS Boilerplate est préconfiguré pour utiliser Sentry et Spotlight (Sentry for Development). Toutes les erreurs seront automatiquement envoyées à votre instance Spotlight locale, vous permettant de découvrir Sentry localement.
Pour l'environnement de production, vous devrez créer un compte Sentry et un nouveau projet. Ensuite, dans next.config.mjs , vous devez mettre à jour les attributs org et project dans la fonction withSentryConfig . De plus, ajoutez votre DSN Sentry à sentry.client.config.ts , sentry.edge.config.ts et sentry.server.config.ts .
Le modèle SaaS Next.js s'appuie sur Codecov pour la solution de reporting de couverture de code. Pour activer Codecov, créez un compte Codecov et connectez-le à votre compte GitHub. Vos référentiels devraient apparaître sur votre tableau de bord Codecov. Sélectionnez le référentiel souhaité et copiez le jeton. Dans GitHub Actions, définissez la variable d'environnement CODECOV_TOKEN et collez le jeton.
Assurez-vous de créer CODECOV_TOKEN en tant que secret GitHub Actions, ne le collez pas directement dans votre code source.
Le projet utilise Pino.js pour la journalisation. Dans l'environnement de développement, les journaux sont affichés dans la console par défaut.
Pour la production, le projet est déjà intégré à Better Stack pour gérer et interroger vos journaux à l'aide de SQL. Pour utiliser Better Stack, vous devez créer un compte Better Stack et créer une nouvelle source : accédez à votre tableau de bord Better Stack Logs > Sources > Connecter la source. Ensuite, vous devez donner un nom à votre source et sélectionner Node.js comme plateforme.
Après avoir créé la source, vous pourrez afficher et copier votre jeton source. Dans vos variables d'environnement, collez le jeton dans la variable LOGTAIL_SOURCE_TOKEN . Désormais, tous les journaux seront automatiquement envoyés et ingérés par Better Stack.
Le projet utilise Checkly pour garantir que votre environnement de production est toujours opérationnel. À intervalles réguliers, Checkly exécute les tests se terminant par l'extension *.check.e2e.ts et vous avertit si l'un des tests échoue. De plus, vous avez la possibilité d'exécuter des tests à partir de plusieurs emplacements pour garantir que votre application est disponible dans le monde entier.
Pour utiliser Checkly, vous devez d'abord créer un compte sur leur site Web. Après avoir créé un compte, générez une nouvelle clé API dans le tableau de bord Checkly et définissez la variable d'environnement CHECKLY_API_KEY dans GitHub Actions. De plus, vous devrez définir le CHECKLY_ACCOUNT_ID , qui peut également être trouvé dans votre tableau de bord Checkly sous Paramètres utilisateur > Général.
Pour terminer la configuration, mettez à jour le fichier checkly.config.ts avec votre propre adresse e-mail et URL de production.
Le kit de démarrage Next.js SaaS comprend un analyseur de bundle intégré. Il peut être utilisé pour analyser la taille de vos bundles JavaScript. Pour commencer, exécutez la commande suivante :
npm run build-statsEn exécutant la commande, une nouvelle fenêtre de navigateur s'ouvrira automatiquement avec les résultats.
Le projet est déjà configuré avec Drizzle Studio pour explorer la base de données. Vous pouvez exécuter la commande suivante pour ouvrir le studio de base de données :
npm run db:studioEnsuite, vous pouvez ouvrir https://local.drizzle.studio avec votre navigateur préféré pour explorer votre base de données.
Si vous êtes un utilisateur de VSCode, vous pouvez avoir une meilleure intégration avec VSCode en installant l'extension suggérée dans .vscode/extension.json . Le code de démarrage propose des paramètres pour une intégration transparente avec VSCode. La configuration Debug est également fournie pour l'expérience de débogage front-end et back-end.
Avec les plugins installés dans votre VSCode, ESLint et Prettier peuvent automatiquement corriger le code et afficher les erreurs. Il en va de même pour les tests : vous pouvez installer l'extension VSCode Vitest pour exécuter automatiquement vos tests, et elle affiche également la couverture du code en contexte.
Conseils de pro : si vous avez besoin d'une vérification de type à l'échelle du projet avec TypeScript, vous pouvez exécuter une compilation avec Cmd + Shift + B sur Mac.
Tout le monde est invité à contribuer à ce projet. N'hésitez pas à ouvrir un ticket si vous avez des questions ou si vous trouvez un bug. Totalement ouvert aux suggestions et améliorations.
Sous licence MIT, Copyright © 2024
Voir LICENCE pour plus d’informations.
| | |
| ||
| Ajoutez votre logo ici |
Fabriqué avec ♥ par CreativeDesignsGuru
Vous recherchez un modèle personnalisé pour lancer votre projet ? Je serais heureux de discuter de la façon dont je peux vous aider à en construire un. N'hésitez pas à nous contacter à tout moment à [email protected] !
