SaaS Boilerplate
v1.7.3
SaaS Boilerplate es una plantilla potente y totalmente personalizable para iniciar sus aplicaciones SaaS. Construido con Next.js y Tailwind CSS , y los componentes de interfaz de usuario modulares de Shadcn UI . Esta plantilla SaaS de Next.js le ayuda a crear e iniciar SaaS rápidamente con un mínimo esfuerzo.
Equipado con funciones esenciales como autenticación integrada, multiinquilino con soporte de equipo, función y permiso , base de datos, I18n (internacionalización), página de destino, panel de usuario, manejo de formularios, optimización SEO, registro, informe de errores con Sentry, pruebas, implementación. , Monitoreo y Suplantación de usuarios , esta plantilla SaaS proporciona todo lo que necesita para comenzar.
Diseñado pensando en los desarrolladores, este kit de inicio de Next.js utiliza TypeScript para la seguridad de tipos e integra ESLint para mantener la calidad del código, junto con Prettier para un formato de código consistente. El conjunto de pruebas combina Vitest y React Testing Library para realizar pruebas unitarias sólidas, mientras que Playwright se encarga de la integración y las pruebas E2E. La integración y la implementación continuas se gestionan a través de GitHub Actions. Para la gestión de usuarios, la autenticación está a cargo del Secretario. Para las operaciones de bases de datos, utiliza Drizzle ORM para la gestión de bases de datos con seguridad de tipos en bases de datos populares como PostgreSQL, SQLite y MySQL.
Ya sea que esté creando una nueva aplicación SaaS o buscando una plantilla SaaS flexible y lista para producción , este texto estándar lo tiene cubierto. Este kit de inicio gratuito y de código abierto tiene todo lo que necesita para acelerar su desarrollo y escalar su producto con facilidad.
Clona este proyecto y úsalo para crear tu propio SaaS. Puede consultar la demostración en vivo en SaaS Boilerplate, que es una demostración con un sistema de autenticación y multiinquilino que funciona.
 |  |   |
 | ||
| Añade tu logo aquí |
Demostración en vivo: modelo estándar de SaaS
| Página de destino | Panel de usuario |
|---|---|
 |  |
| Gestión de equipos | Perfil de usuario |
|---|---|
 |  |
| Inscribirse | Iniciar sesión |
|---|---|
 |  |
| Página de inicio con modo oscuro (versión Pro) | Panel de usuario con modo oscuro (versión Pro) |
|---|---|
 |  |
| Panel de usuario con barra lateral (versión Pro) |
|---|
 |
La experiencia del desarrollador es lo primero, una estructura de código extremadamente flexible y solo conserva lo que necesitas:
@Característica incorporada de Next.js:
Ejecute el siguiente comando en su entorno local:
git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm installPara su información, todas las dependencias se actualizan cada mes.
Luego, puedes ejecutar el proyecto localmente en modo de desarrollo con recarga en vivo ejecutando:
npm run devAbra http://localhost:3000 con su navegador favorito para ver su proyecto.
Cree una cuenta de Clerk en Clerk.com y cree una nueva aplicación en el Panel de Clerk. Luego, copie los valores de NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY y CLERK_SECRET_KEY en el archivo .env.local (que Git no rastrea):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key En su Panel de empleado, también debe Enable Organization navegando a Organization management > Settings > Enable organization .
Ahora tiene un sistema de autenticación completamente funcional con Next.js: registrarse, iniciar sesión, cerrar sesión, olvidar contraseña, restablecer contraseña, actualizar perfil, actualizar contraseña, actualizar correo electrónico, eliminar cuenta y más.
El proyecto utiliza DrizzleORM, un ORM con seguridad de tipos que es compatible con las bases de datos PostgreSQL, SQLite y MySQL. De forma predeterminada, el proyecto está configurado para funcionar perfectamente con PostgreSQL y usted puede elegir fácilmente cualquier proveedor de base de datos PostgreSQL.
Para la traducción, el proyecto utiliza next-intl combinado con Crowdin. Como desarrollador, sólo necesitas encargarte de la versión en inglés (u otro idioma predeterminado). Crowdin genera y maneja automáticamente las traducciones para otros idiomas. Puede utilizar Crowdin para colaborar con su equipo de traducción o traducir los mensajes usted mismo con la ayuda de la traducción automática.
Para configurar la traducción (i18n), cree una cuenta en Crowdin.com y cree un nuevo proyecto. En el proyecto recién creado, podrá encontrar el ID del proyecto. También deberá crear un nuevo token de acceso personal yendo a Configuración de la cuenta > API. Luego, en tus Acciones de GitHub, debes definir las siguientes variables de entorno: CROWDIN_PROJECT_ID y CROWDIN_PERSONAL_TOKEN .
Después de definir las variables de entorno en sus GitHub Actions, sus archivos de localización se sincronizarán con Crowdin cada vez que envíe una nueva confirmación a la rama 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 Puede configurar fácilmente Next.js SaaS Boilerplate buscando FIXME: para realizar una personalización rápida. Estos son algunos de los archivos más importantes para personalizar:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png y public/favicon-32x32.png : el favicon de tu sitio websrc/utils/AppConfig.ts : archivo de configuraciónsrc/templates/BaseTemplate.tsx : tema predeterminadonext.config.mjs : configuración de Next.js.env : variables de entorno predeterminadasTiene acceso completo al código fuente para una mayor personalización. El código proporcionado es sólo un ejemplo para ayudarle a iniciar su proyecto. El cielo es el límite.
En el código fuente también encontrarás comentarios PRO que indican el código que sólo está disponible en la versión PRO. Puede eliminar o reemplazar fácilmente este código con su propia implementación.
Para modificar el esquema de la base de datos en el proyecto, puede actualizar el archivo de esquema ubicado en ./src/models/Schema.ts . Este archivo define la estructura de las tablas de su base de datos utilizando la biblioteca Drizzle ORM.
Después de realizar cambios en el esquema, genere una migración ejecutando el siguiente comando:
npm run db:generateEsto creará un archivo de migración que refleja los cambios de su esquema. La migración se aplica automáticamente durante la siguiente interacción con la base de datos, por lo que no es necesario ejecutarla manualmente ni reiniciar el servidor Next.js.
El proyecto sigue la especificación de confirmaciones convencionales, lo que significa que todos los mensajes de confirmación deben tener el formato correspondiente. Para ayudarlo a escribir mensajes de confirmación, el proyecto utiliza Commitizen, una CLI interactiva que lo guía a través del proceso de confirmación. Para usarlo, ejecute el siguiente comando:
npm run commit Uno de los beneficios de utilizar confirmaciones convencionales es la capacidad de generar automáticamente un archivo CHANGELOG . También nos permite determinar automáticamente el número de la siguiente versión según los tipos de confirmaciones que se incluyen en una versión.
El proyecto está integrado con Stripe para el pago de suscripciones. Debe crear una cuenta de Stripe y también instalar la CLI de Stripe. Después de instalar Stripe CLI, debe iniciar sesión utilizando la CLI:
stripe loginLuego, puede ejecutar el siguiente comando para crear un nuevo precio:
npm run stripe:setup-price Después de ejecutar el comando, debe copiar el ID del precio y pegarlo en src/utils/AppConfig.ts actualizando el ID del precio existente con el nuevo.
En su Panel de Stripe, debe configurar los ajustes de su portal de clientes en https://dashboard.stripe.com/test/settings/billing/portal. Lo más importante es que debe guardar la configuración.
En su archivo .env , debe actualizar NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY con su propia clave Stripe Publishable. Puedes encontrar la clave en tu Panel de Stripe. Luego, también debe crear un nuevo archivo llamado .env.local y agregar las siguientes variables de entorno en el archivo recién creado:
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret Obtienes STRIPE_SECRET_KEY de tu Panel de Stripe. STRIPE_WEBHOOK_SECRET se genera ejecutando el siguiente comando:
npm run dev Encontrarás en tu terminal el secreto de firma del webhook. Puede copiarlo y pegarlo en su archivo .env.local .
Todas las pruebas unitarias se encuentran junto al código fuente en el mismo directorio, lo que facilita su búsqueda. El proyecto utiliza Vitest y React Testing Library para pruebas unitarias. Puede ejecutar las pruebas con el siguiente comando:
npm run testEl proyecto utiliza Playwright para la integración y las pruebas de un extremo a otro (E2E). Puede ejecutar las pruebas con los siguientes comandos:
npx playwright install # Only for the first time in a new environment
npm run test:e2e En el entorno local, las pruebas visuales están deshabilitadas y la terminal mostrará el mensaje [percy] Percy is not running, disabling snapshots. . De forma predeterminada, las pruebas visuales solo se ejecutan en GitHub Actions.
La carpeta App Router es compatible con el tiempo de ejecución de Edge. Puede habilitarlo agregando las siguientes líneas src/app/layouts.tsx :
export const runtime = 'edge' ; Para su información, la migración de la base de datos no es compatible con el tiempo de ejecución de Edge. Por lo tanto, debe deshabilitar la migración automática en src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;Después de deshabilitarlo, deberá ejecutar la migración manualmente con:
npm run db:migrateTambién debe ejecutar el comando cada vez que desee actualizar el esquema de la base de datos.
Durante el proceso de construcción, las migraciones de bases de datos se ejecutan automáticamente, por lo que no es necesario ejecutarlas manualmente. Sin embargo, debe definir DATABASE_URL en sus variables de entorno.
Luego, puedes generar una compilación de producción con:
$ npm run buildGenera una estructura de producción optimizada del texto estándar. Para probar la compilación generada, ejecute:
$ npm run start También debe definir las variables de entorno CLERK_SECRET_KEY usando su propia clave.
Este comando inicia un servidor local utilizando la compilación de producción. Ahora puede abrir http://localhost:3000 en su navegador preferido para ver el resultado.
El proyecto utiliza Sentry para monitorear errores. En el entorno de desarrollo, no se necesita ninguna configuración adicional: NextJS SaaS Boilerplate está preconfigurado para usar Sentry y Spotlight (Sentry for Development). Todos los errores se enviarán automáticamente a su instancia local de Spotlight, lo que le permitirá experimentar Sentry localmente.
Para el entorno de producción, deberá crear una cuenta Sentry y un nuevo proyecto. Luego, en next.config.mjs , debe actualizar los atributos org y project en la función withSentryConfig . Además, agregue su Sentry DSN a sentry.client.config.ts , sentry.edge.config.ts y sentry.server.config.ts .
La plantilla Next.js SaaS se basa en Codecov para la solución de informes de cobertura de código. Para habilitar Codecov, cree una cuenta Codecov y conéctela a su cuenta de GitHub. Sus repositorios deberían aparecer en su panel de Codecov. Seleccione el repositorio deseado y copie el token. En GitHub Actions, defina la variable de entorno CODECOV_TOKEN y pegue el token.
Asegúrate de crear CODECOV_TOKEN como un secreto de GitHub Actions, no lo pegues directamente en tu código fuente.
El proyecto utiliza Pino.js para iniciar sesión. En el entorno de desarrollo, los registros se muestran en la consola de forma predeterminada.
Para producción, el proyecto ya está integrado con Better Stack para administrar y consultar sus registros usando SQL. Para utilizar Better Stack, debe crear una cuenta de Better Stack y crear una nueva fuente: vaya a su Panel de control de registros de Better Stack > Fuentes > Conectar fuente. Luego, debe darle un nombre a su fuente y seleccionar Node.js como plataforma.
Después de crear la fuente, podrá ver y copiar su token de fuente. En sus variables de entorno, pegue el token en la variable LOGTAIL_SOURCE_TOKEN . Ahora, todos los registros serán enviados y absorbidos automáticamente por Better Stack.
El proyecto utiliza Checkly para garantizar que su entorno de producción esté siempre en funcionamiento. A intervalos regulares, Checkly ejecuta las pruebas que terminan con la extensión *.check.e2e.ts y le notifica si alguna de las pruebas falla. Además, tiene la flexibilidad de ejecutar pruebas desde múltiples ubicaciones para garantizar que su aplicación esté disponible en todo el mundo.
Para utilizar Checkly, primero debe crear una cuenta en su sitio web. Después de crear una cuenta, genere una nueva clave API en el Panel de Checkly y configure la variable de entorno CHECKLY_API_KEY en GitHub Actions. Además, deberá definir CHECKLY_ACCOUNT_ID , que también se puede encontrar en su Panel de control de Checkly en Configuración de usuario > General.
Para completar la configuración, actualice el archivo checkly.config.ts con su propia dirección de correo electrónico y URL de producción.
Next.js SaaS Starter Kit incluye un analizador de paquetes integrado. Se puede utilizar para analizar el tamaño de sus paquetes de JavaScript. Para comenzar, ejecute el siguiente comando:
npm run build-statsAl ejecutar el comando, se abrirá automáticamente una nueva ventana del navegador con los resultados.
El proyecto ya está configurado con Drizzle Studio para explorar la base de datos. Puede ejecutar el siguiente comando para abrir el estudio de base de datos:
npm run db:studioLuego, puedes abrir https://local.drizzle.studio con tu navegador favorito para explorar tu base de datos.
Si es usuario de VSCode, puede tener una mejor integración con VSCode instalando la extensión sugerida en .vscode/extension.json . El código de inicio incluye Configuración para una integración perfecta con VSCode. La configuración de depuración también se proporciona para la experiencia de depuración de frontend y backend.
Con los complementos instalados en su VSCode, ESLint y Prettier pueden corregir automáticamente el código y mostrar errores. Lo mismo se aplica a las pruebas: puede instalar la extensión VSCode Vitest para ejecutar automáticamente sus pruebas y también muestra la cobertura del código en contexto.
Consejos profesionales: si necesita una verificación de tipo completo del proyecto con TypeScript, puede ejecutar una compilación con Cmd + Shift + B en Mac.
Todos son bienvenidos a contribuir a este proyecto. No dude en abrir un problema si tiene alguna pregunta o encuentra un error. Totalmente abierto a sugerencias y mejoras.
Licenciado bajo la licencia MIT, Copyright © 2024
Consulte LICENCIA para obtener más información.
| | |
| ||
| Añade tu logo aquí |
Hecho con ♥ por CreativeDesignsGuru
¿Busca un modelo estándar personalizado para iniciar su proyecto? Estaría encantado de discutir cómo puedo ayudarle a construir uno. ¡No dudes en comunicarte con nosotros en cualquier momento a [email protected]!
