SaaS Boilerplate
v1.7.3
SaaS Boilerplate — это мощный и полностью настраиваемый шаблон для запуска ваших приложений SaaS. Построен с использованием Next.js и Tailwind CSS , а также модульных компонентов пользовательского интерфейса Shadcn UI . Этот SaaS-шаблон Next.js поможет вам быстро создать и запустить SaaS с минимальными усилиями.
Оснащен такими важными функциями, как встроенная аутентификация , многопользовательская поддержка с командной поддержкой, роли и разрешения , база данных, I18n (интернационализация), целевая страница, панель пользователя, обработка форм, SEO-оптимизация, ведение журнала, отчеты об ошибках с помощью Sentry, тестирование, развертывание. , мониторинг и олицетворение пользователя — этот шаблон SaaS предоставляет все, что вам нужно для начала работы.
Этот стартовый комплект Next.js, разработанный для разработчиков, использует TypeScript для обеспечения безопасности типов и интегрирует ESLint для поддержания качества кода, а также Prettier для единообразного форматирования кода. Пакет тестирования объединяет Vitest и библиотеку тестирования React для надежного модульного тестирования, а Playwright занимается интеграцией и E2E-тестированием. Непрерывная интеграция и развертывание управляются с помощью GitHub Actions. Для управления пользователями аутентификацией занимается Clerk. Для операций с базами данных он использует Drizzle ORM для типобезопасного управления базами данных в таких популярных базах данных, как PostgreSQL, SQLite и MySQL.
Независимо от того, создаете ли вы новое приложение SaaS или ищете гибкий, готовый к использованию шаблон SaaS , этот шаблон поможет вам. В этом бесплатном стартовом наборе с открытым исходным кодом есть все необходимое для ускорения разработки и легкого масштабирования продукта.
Клонируйте этот проект и используйте его для создания собственного SaaS. Вы можете проверить живую демо-версию на SaaS Boilerplate, которая представляет собой демо-версию с работающей системой аутентификации и мультиарендности.
 |  |   |
 | ||
| Добавьте сюда свой логотип |
Живая демонстрация: шаблон SaaS
| Целевая страница | Панель пользователя |
|---|---|
 |  |
| Управление командой | Профиль пользователя |
|---|---|
 |  |
| Зарегистрироваться | Войти |
|---|---|
 |  |
| Целевая страница с темным режимом (версия Pro) | Панель пользователя с темным режимом (версия Pro) |
|---|---|
 |  |
| Панель пользователя с боковой панелью (версия Pro) |
|---|
 |
Прежде всего, опыт разработчика, чрезвычайно гибкая структура кода и сохранение только того, что вам нужно:
@Встроенная функция Next.js:
Запустите следующую команду в своей локальной среде:
git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm installК вашему сведению, все зависимости обновляются каждый месяц.
Затем вы можете запустить проект локально в режиме разработки с живой перезагрузкой, выполнив:
npm run devОткройте http://localhost:3000 в своем любимом браузере, чтобы увидеть свой проект.
Создайте учетную запись Clerk на сайте Clerk.com и создайте новое приложение на панели инструментов Clerk. Затем скопируйте значения NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY и CLERK_SECRET_KEY в файл .env.local (который не отслеживается Git):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key На панели управления клерком вам также необходимо Enable Organization , перейдя в Organization management > Settings > Enable organization .
Теперь у вас есть полностью работающая система аутентификации с Next.js: регистрация, вход, выход, забытый пароль, сброс пароля, обновление профиля, обновление пароля, обновление электронной почты, удаление учетной записи и многое другое.
В проекте используется DrizzleORM, типобезопасный ORM, совместимый с базами данных PostgreSQL, SQLite и MySQL. По умолчанию проект настроен на бесперебойную работу с PostgreSQL, и вы можете легко выбрать любого поставщика базы данных PostgreSQL.
Для перевода проект использует next-intl в сочетании с Crowdin. Как разработчику вам нужно позаботиться только об английской версии (или другом языке по умолчанию). Переводы на другие языки автоматически создаются и обрабатываются Crowdin. Вы можете использовать Crowdin для сотрудничества с вашей командой переводчиков или самостоятельно переводить сообщения с помощью машинного перевода.
Чтобы настроить перевод (i18n), создайте учетную запись на Crowdin.com и создайте новый проект. Во вновь созданном проекте вы сможете найти идентификатор проекта. Вам также потребуется создать новый токен личного доступа, перейдя в «Настройки учетной записи» > «API». Затем в действиях GitHub вам необходимо определить следующие переменные среды: CROWDIN_PROJECT_ID и CROWDIN_PERSONAL_TOKEN .
После определения переменных среды в ваших действиях GitHub ваши файлы локализации будут синхронизироваться с Crowdin каждый раз, когда вы отправляете новый коммит в 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 Вы можете легко настроить Next.js SaaS Boilerplate, выполнив поиск по всему проекту по запросу FIXME: для быстрой настройки. Вот некоторые из наиболее важных файлов для настройки:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png и public/favicon-32x32.png : значок вашего веб-сайта.src/utils/AppConfig.ts : файл конфигурации.src/templates/BaseTemplate.tsx : тема по умолчанию.next.config.mjs : конфигурация Next.js..env : переменные среды по умолчаниюУ вас есть полный доступ к исходному коду для дальнейшей настройки. Предоставленный код — это всего лишь пример, который поможет вам запустить проект. Небо - это предел.
В исходном коде вы также найдете PRO комментарии, в которых указан код, доступный только в PRO-версии. Вы можете легко удалить или заменить этот код своей собственной реализацией.
Чтобы изменить схему базы данных в проекте, вы можете обновить файл схемы, расположенный по адресу ./src/models/Schema.ts . Этот файл определяет структуру таблиц вашей базы данных с использованием библиотеки Drizzle ORM.
После внесения изменений в схему создайте миграцию, выполнив следующую команду:
npm run db:generateПри этом будет создан файл миграции, отражающий изменения вашей схемы. Миграция автоматически применяется при следующем взаимодействии с базой данных, поэтому нет необходимости запускать ее вручную или перезапускать сервер Next.js.
Проект соответствует спецификации обычных коммитов, что означает, что все сообщения о коммитах должны быть отформатированы соответствующим образом. Чтобы помочь вам писать сообщения о фиксации, проект использует Commitizen, интерактивный интерфейс командной строки, который проведет вас через процесс фиксации. Чтобы использовать его, выполните следующую команду:
npm run commit Одним из преимуществ использования обычных коммитов является возможность автоматического создания файла CHANGELOG . Это также позволяет нам автоматически определять номер следующей версии на основе типов коммитов, включенных в выпуск.
Проект интегрирован со Stripe для оплаты подписки. Вам необходимо создать учетную запись Stripe, а также установить Stripe CLI. После установки Stripe CLI вам необходимо войти в систему с помощью CLI:
stripe loginЗатем вы можете запустить следующую команду, чтобы создать новую цену:
npm run stripe:setup-price После запуска команды вам необходимо скопировать идентификатор цены и вставить его в src/utils/AppConfig.ts обновив существующий идентификатор цены новым.
На панели инструментов Stripe вам необходимо настроить параметры клиентского портала по адресу https://dashboard.stripe.com/test/settings/billing/portal. Самое главное, нужно сохранить настройки.
В вашем файле .env вам необходимо обновить NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY , указав свой собственный публикуемый ключ Stripe. Вы можете найти ключ на панели инструментов Stripe. Затем вам также необходимо создать новый файл с именем .env.local и добавить в него следующие переменные среды:
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret Вы получаете STRIPE_SECRET_KEY на панели управления Stripe. STRIPE_WEBHOOK_SECRET создается путем выполнения следующей команды:
npm run dev В своем терминале вы найдете секрет подписи веб-перехватчика. Вы можете скопировать его и вставить в свой файл .env.local .
Все модульные тесты расположены рядом с исходным кодом в одном каталоге, что упрощает их поиск. Для модульного тестирования проект использует Vitest и библиотеку тестирования React. Вы можете запустить тесты с помощью следующей команды:
npm run testПроект использует Playwright для интеграции и сквозного (E2E) тестирования. Вы можете запустить тесты с помощью следующих команд:
npx playwright install # Only for the first time in a new environment
npm run test:e2e В локальной среде визуальное тестирование отключено, и терминал отобразит сообщение [percy] Percy is not running, disabling snapshots. . По умолчанию визуальное тестирование выполняется только в GitHub Actions.
Папка App Router совместима со средой выполнения Edge. Вы можете включить его, добавив следующие строки src/app/layouts.tsx :
export const runtime = 'edge' ; К вашему сведению, миграция базы данных несовместима со средой выполнения Edge. Итак, вам нужно отключить автоматическую миграцию в src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;После его отключения вам необходимо запустить миграцию вручную с помощью:
npm run db:migrateВам также необходимо запускать команду каждый раз, когда вы хотите обновить схему базы данных.
В процессе сборки миграция базы данных выполняется автоматически, поэтому нет необходимости запускать ее вручную. Однако вы должны определить DATABASE_URL в переменных среды.
Затем вы можете создать производственную сборку с помощью:
$ npm run buildОн генерирует оптимизированную производственную сборку шаблона. Чтобы протестировать сгенерированную сборку, запустите:
$ npm run start Вам также необходимо определить переменные среды CLERK_SECRET_KEY используя свой собственный ключ.
Эта команда запускает локальный сервер с использованием производственной сборки. Теперь вы можете открыть http://localhost:3000 в предпочитаемом вами браузере и увидеть результат.
В проекте используется Sentry для отслеживания ошибок. В среде разработки дополнительная настройка не требуется: NextJS SaaS Boilerplate предварительно настроен для использования Sentry и Spotlight (Sentry for Development). Все ошибки будут автоматически отправлены на ваш локальный экземпляр Spotlight, что позволит вам использовать Sentry локально.
Для производственной среды вам необходимо создать учетную запись Sentry и новый проект. Затем в next.config.mjs вам необходимо обновить атрибуты org и project в функции withSentryConfig . Кроме того, добавьте свой Sentry DSN в sentry.client.config.ts , sentry.edge.config.ts и sentry.server.config.ts .
SaaS-шаблон Next.js использует Codecov в качестве решения для создания отчетов о покрытии кода. Чтобы включить Codecov, создайте учетную запись Codecov и подключите ее к своей учетной записи GitHub. Ваши репозитории должны появиться на панели управления Codecov. Выберите нужный репозиторий и скопируйте токен. В действиях GitHub определите переменную среды CODECOV_TOKEN и вставьте токен.
Обязательно создайте CODECOV_TOKEN в качестве секрета действий GitHub, не вставляйте его непосредственно в исходный код.
Для ведения журнала в проекте используется Pino.js. В среде разработки логи по умолчанию отображаются в консоли.
Для производства проект уже интегрирован с Better Stack для управления журналами и запроса их с помощью SQL. Чтобы использовать Better Stack, вам необходимо создать учетную запись Better Stack и создать новый источник: перейдите на панель мониторинга Better Stack Logs > Источники > Подключить источник. Затем вам нужно дать имя вашему источнику и выбрать Node.js в качестве платформы.
После создания источника вы сможете просматривать и копировать исходный токен. В переменных среды вставьте токен в переменную LOGTAIL_SOURCE_TOKEN . Теперь все журналы будут автоматически отправляться и приниматься Better Stack.
В проекте используется Checkly, чтобы гарантировать, что ваша производственная среда всегда работает. Checkly через регулярные промежутки времени запускает тесты, заканчивающиеся расширением *.check.e2e.ts , и уведомляет вас, если какой-либо из тестов не пройден. Кроме того, у вас есть возможность выполнять тесты из нескольких мест, чтобы гарантировать доступность вашего приложения по всему миру.
Чтобы использовать Checkly, вам необходимо сначала создать учетную запись на их веб-сайте. После создания учетной записи сгенерируйте новый ключ API на панели управления Checkly и установите переменную среды CHECKLY_API_KEY в действиях GitHub. Кроме того, вам нужно будет определить CHECKLY_ACCOUNT_ID , который также можно найти на панели управления Checkly в разделе «Настройки пользователя» > «Основные».
Чтобы завершить настройку, обновите файл checkly.config.ts , указав свой адрес электронной почты и рабочий URL-адрес.
Next.js SaaS Starter Kit включает встроенный анализатор пакетов. Его можно использовать для анализа размера ваших пакетов JavaScript. Для начала выполните следующую команду:
npm run build-statsЗапустив команду, она автоматически откроет новое окно браузера с результатами.
В проекте уже настроена Drizzle Studio для исследования базы данных. Вы можете запустить следующую команду, чтобы открыть студию базы данных:
npm run db:studioЗатем вы можете открыть https://local.drizzle.studio в своем любимом браузере, чтобы изучить свою базу данных.
Если вы являетесь пользователем VSCode, вы можете улучшить интеграцию с VSCode, установив предложенное расширение в .vscode/extension.json . Стартовый код содержит настройки для плавной интеграции с VSCode. Конфигурация отладки также предоставляется для отладки внешнего и внутреннего интерфейса.
Благодаря плагинам, установленным в вашем VSCode, ESLint и Prettier могут автоматически исправлять код и отображать ошибки. То же самое относится и к тестированию: вы можете установить расширение VSCode Vitest для автоматического запуска тестов, а также оно показывает покрытие кода в контексте.
Советы профессионалам: если вам нужна проверка широкого типа проекта с помощью TypeScript, вы можете запустить сборку с помощью Cmd + Shift + B на Mac.
Каждый может внести свой вклад в этот проект. Не стесняйтесь открывать проблему, если у вас есть какие-либо вопросы или вы обнаружили ошибку. Полностью открыт для предложений и улучшений.
Лицензия MIT License © 2024.
См. ЛИЦЕНЗИЮ для получения дополнительной информации.
| | |
| ||
| Добавьте сюда свой логотип |
Сделано с ♥ автором CreativeDesignsGuru
Ищете индивидуальный шаблон для запуска вашего проекта? Буду рад обсудить, как я могу помочь вам его построить. Не стесняйтесь обращаться в любое время по адресу [email protected]!
