t3 turbo and clerk

Создать T3 Turbo с аутентификацией клерка

Установка приборной панели клерка

Чтобы этот шаблон работал, вам необходимо обеспечить Discord в качестве поставщика OAuth. Вы можете найти социальные варианты в рамках User & Authentication / Social Providers на приборной панели клерка

Если вы измените какие -либо настройки здесь, кроме добавления Discord, вам может потребоваться обновить код выставки для выполнения любых требований, которые вы измените.

Он использует Turborepo и содержит:

Макет кода

 .github
  └─ workflows
        └─ CI with pnpm cache setup
.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  ├─ expo
  └─ next.js
      ├─ Next.js 13
      ├─ React 18
      └─ E2E Typesafe API Server & Client
packages
 ├─ api
 |   └─ tRPC v10 router definition
 └─ db
     └─ typesafe db-calls using Prisma

Быстрый старт

Чтобы запустить его, следуйте шагам ниже:

Настройка зависимости

 # Install dependencies
pnpm i


# Configure environment variables.
# There is an `.env.example` in the root directory you can use for reference
cp .env.example .env

# Push the Prisma schema to your database
pnpm db-push

Настройка приложения Expo

Expo не использует .env для опубликованного ключа, поэтому вам нужно перейти в apps/expo/app.config.ts и добавить его туда.

 const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key";

Настроить Expo dev -Script

Примечание. Если вы хотите использовать физический телефон с Expo Go, просто запустите pnpm dev и сканируйте QR-код.

Используйте симулятор iOS

1. Убедитесь, что у вас установлены инструменты линейки Xcode и Xcommand Line, как показано на Expo Docs.
2. Измените сценарий dev в apps/expo/package.json чтобы открыть симулятор iOS.

 +  "dev": "expo start --ios",

3. Запустите pnpm dev в папке Project Root.

Для Android

1. Установите инструменты Android Studio, как показано на Expo Docs.
2. Измените сценарий dev в apps/expo/package.json чтобы открыть эмулятор Android.

 +  "dev": "expo start --android",

3. Запустите pnpm dev в папке Project Root.

Развертывание

Next.js

Примечание, если вы строите локацию, вам нужно будет правильно вставить свою Env, например, используя pnpm with-env next build

Предварительные условия

Мы не рекомендуем развертывать базу данных SQLite в средах без серверов, поскольку данные не будут сохраняться. Я предоставил быструю базу данных PostgreSQL на железной дороге, но, конечно, вы можете использовать любой другой поставщик базы данных. Убедитесь, что схема Prisma обновляется, чтобы использовать правильную базу данных.

Развернуть в Vercel

Давайте развернем приложение Next.js в Vercel. Если вы когда -либо развернули там приложение Turborepo, шаги довольно просты. Вы также можете прочитать официальное руководство Turborepo по развертыванию в Vercel.

1. Создайте новый проект на Vercel, выберите папку apps/nextjs в качестве корневого каталога и примените следующие настройки сборки:

Команда установки фильтрует пакет Expo и сохраняет несколько секунд (размер кэша) установки зависимостей. Команда сборки заставляет нас строить приложение с помощью Turbo.

2. Добавьте свою DATABASE_URL , NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY и CLERK_SECRET_KEY Variable.

3. Сделанный! Ваше приложение должно успешно развернуть. Назначьте свой домен и используйте его вместо localhost для url в приложении Expo, чтобы ваше приложение Expo могло общаться с вашим бэкэнд, когда вы не находитесь в разработке.

Экспо

Развертывание вашего приложения Expo работает немного по -разному по сравнению с Next.js в Интернете. Вместо того, чтобы «развернуть» ваше приложение онлайн, вам необходимо отправить производственные сборки вашего приложения в магазины приложений, такие как Apple App Store и Google Play. Вы можете прочитать полное распространение вашего приложения, включая лучшие практики, в Expo Docs.

1. Давайте начнем с настройки EAS Build, что является коротким для Expo Application Services. Служба сборки помогает вам создавать сборки вашего приложения, не требуя полной настройки разработки. Команды ниже представляют собой резюме создания вашей первой сборки.

   // Install the EAS CLI
   $ pnpm add -g eas-cli
   
   // Log in with your Expo account
   $ eas login
   
   // Configure your Expo app
   $ cd apps/expo
   $ eas build:configure

2. После первоначальной настройки вы можете создать свою первую сборку. Вы можете построить для платформ Android и iOS и использовать различные профили сборки EAS.JSON для создания производственных сборок или разработки, или тестирования сборки. Давайте сделаем производственную сборку для iOS.

    $ eas build --platform ios --profile production
   

   Если вы не указываете флаг --profile , EAS по умолчанию использует production профиль.

3. Теперь, когда у вас есть первая сборка производства, вы можете отправить ее в магазины. EAS PUSET может помочь вам отправить сборку в магазины.

    $ eas submit --platform ios --latest
   

   Вы также можете объединить сборку и представить в одной команде, используя eas build ... --auto-submit .

4. Прежде чем вы сможете получить свое приложение в руках своих пользователей, вам придется предоставить дополнительную информацию в магазинах приложений. Это включает в себя скриншоты, информацию о приложениях, политики конфиденциальности и т. Д. Пока все еще находятся в предварительном просмотре , EAS Metadata могут помочь вам с большей частью этой информации.

5. Если вы используете социальных провайдеров OAuth с клерком, например, Google, Apple, Facebook и т. Д. И т. Д., Вы должны белые списки URL -адреса OAuth Redirect для приложения Expo на приборной панели клерка.

   В apps/expo/app.config.ts добавьте scheme , которая будет использоваться для определения вашего автономного приложения.

    import { ExpoConfig , ConfigContext } from "@expo/config" ;
   
   const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key" ;
   
   const defineConfig = ( _ctx : ConfigContext ) : ExpoConfig => ( {
      name : "expo" ,
      slug : "expo" ,
      scheme : "your-app-scheme" ,
      // ...
   } ) ;

   Затем, в панели инструментов клерка, перейдите к пользователю и аутентификации> Социальные соединения> Настройки и добавьте схему вашего приложения и перенаправить URL в поле URL -адреса перенаправления :

   your-app-scheme://oauth-native-callback

   Здесь your-app-scheme соответствует scheme определенной в app.config.ts , а oauth-native-callback соответствует URL-адресам перенаправления, определенным при аутентификации с социальными провайдерами. См. SigniNwithoauth.tsx для справки.

   Вы можете найти больше информации об этом в документации Expo.

   Теперь вы должны иметь возможность войти в систему со своими социальными провайдерами в сборке приложения Testflight.

6. Как только все будет одобрено, ваши пользователи могут наконец насладиться вашим приложением. Допустим, вы заметили небольшую опечатку; Вам придется создать новую сборку, отправить ее в магазины и подождать утверждение, прежде чем вы сможете решить эту проблему. В этих случаях вы можете использовать обновление EAS, чтобы быстро отправить небольшой ошибку для ваших пользователей, не проходя через этот долгий процесс. Давайте начнем с настройки обновления EAS.

   В приведенных ниже шагах обобщено руководство по началу работы с обновлением EAS.

   // Add the ` expo-updates ` library to your Expo app
   $ cd apps/expo
   $ pnpm expo install expo-updates
   
   // Configure EAS Update
   $ eas update:configure

7. Прежде чем мы сможем отправить обновления в ваше приложение, вы должны создать новую сборку и отправить ее в магазины приложений. Для каждого изменения, которое включает в себя собственные API, вы должны восстановить приложение и отправить обновление в магазины приложений. Смотрите шаги 2 и 3.

8. Теперь, когда все готово для обновлений, давайте создадим новое обновление для production сборок. С флагом --auto , EAS Update использует ваше текущее имя филиала GIT и сообщение Commit для этого обновления. Посмотрите, как работает обновление EAS для получения дополнительной информации.

   $ cd apps/expo
   $ eas update --auto

   Ваши обновления OTA (над воздухом) всегда должны следовать правилам магазина приложений. Вы не можете изменить основную функциональность своего приложения, не получая одобрения App Store. Но это быстрый способ обновить ваше приложение для незначительных изменений и исправлений ошибок.

9. Сделанный! Теперь, когда вы создали свою производственную сборку, отправили ее в магазины и установили обновление EAS, вы готовы ко всему!

Ссылки

Стек происходит из Create-T3-Turbo.