Unduh t3 turbo and clerk - t3 turbo and clerk Sumber Unduh

t3 turbo and clerk

Kode Sumber AI

v1.1.0

Unduh

Buat T3 Turbo dengan otentikasi petugas

Pengaturan Dasbor Panitera

Agar template ini berfungsi, Anda perlu mengaktifkan perselisihan sebagai penyedia oAuth. Anda dapat menemukan opsi sosial di bawah User & Authentication / Social Providers di dasbor petugas

Jika Anda mengubah pengaturan apa pun di sini di luar menambahkan perselisihan, Anda mungkin perlu memperbarui kode Expo Anda untuk menangani persyaratan apa pun yang Anda ubah.

Menggunakan turborepo dan berisi:

Tata letak kode

 .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

Awal yang cepat

Untuk menjalankannya, ikuti langkah -langkah di bawah ini:

Pengaturan dependensi

 # 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

Konfigurasikan Aplikasi Expo

Expo tidak menggunakan .env untuk kunci yang dapat diterbitkan, jadi Anda harus pergi ke apps/expo/app.config.ts dan menambahkannya di sana.

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

Konfigurasikan Expo `dev` -Script

Catatan: Jika Anda ingin menggunakan telepon fisik dengan Expo Go, cukup jalankan pnpm dev dan pindai kode-QR.

Gunakan simulator iOS

Pastikan Anda memiliki alat Xcode dan XCommand Line yang diinstal seperti yang ditunjukkan pada dokumen Expo.
Ubah skrip dev di apps/expo/package.json untuk membuka simulator iOS.

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

Jalankan pnpm dev di folder Project Root.

Untuk Android

Instal alat Android Studio seperti yang ditunjukkan pada dokumen Expo.
Ubah skrip dev di apps/expo/package.json untuk membuka emulator android.

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

Jalankan pnpm dev di folder Project Root.

Penyebaran

Next.js

CATATAN Jika Anda membangun secara lokal, Anda harus memasukkan env Anda dengan benar, misalnya menggunakan pnpm with-env next build

Prasyarat

Kami tidak merekomendasikan menggunakan database SQLite di lingkungan tanpa server karena data tidak akan bertahan. Saya menyediakan database PostgreSQL yang cepat di kereta api, tetapi tentu saja Anda dapat menggunakan penyedia database lainnya. Pastikan skema prisma diperbarui untuk menggunakan database yang benar.

Diseret ke Vercel

Mari kita gunakan aplikasi Next.js ke Vercel. Jika Anda pernah menggunakan aplikasi Turborepo di sana, langkah -langkahnya cukup mudah. Anda juga dapat membaca Panduan Turborepo Resmi tentang Deploying to Vercel.

Buat proyek baru di Vercel, pilih folder apps/nextjs sebagai direktori root dan terapkan pengaturan build berikut:

Pengaturan Penerapan Vercel

Perintah instalasi memfilter paket Expo dan menghemat beberapa detik (dan ukuran cache) dari instalasi ketergantungan. Perintah build membuat kami membangun aplikasi menggunakan turbo.

Tambahkan DATABASE_URL Anda, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY dan variabel lingkungan CLERK_SECRET_KEY .
Selesai! Aplikasi Anda harus berhasil digunakan. Tetapkan domain Anda dan gunakan itu alih -alih localhost untuk url di aplikasi Expo sehingga aplikasi Expo Anda dapat berkomunikasi dengan backend Anda saat Anda tidak dalam pengembangan.

Expo

Menyebarkan aplikasi Expo Anda bekerja sedikit berbeda dibandingkan dengan Next.js di web. Alih -alih "menggunakan" aplikasi Anda secara online, Anda perlu mengirimkan build produksi aplikasi Anda ke toko aplikasi, seperti Apple App Store dan Google Play. Anda dapat membaca sepenuhnya distribusi aplikasi Anda, termasuk praktik terbaik, di Expo Docs.

Mari kita mulai dengan menyiapkan EAS Build, yang kependekan dari Layanan Aplikasi Expo. Layanan Build membantu Anda membuat build dari aplikasi Anda, tanpa memerlukan pengaturan pengembangan asli penuh. Perintah di bawah ini adalah ringkasan membuat bangunan pertama Anda.
```
// 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
```
Setelah pengaturan awal, Anda dapat membuat build pertama Anda. Anda dapat membangun untuk platform Android dan iOS dan menggunakan profil Eas.json Build yang berbeda untuk membuat produksi atau pengembangan produksi, atau uji build. Mari kita buat produksi untuk iOS.
```
 $ eas build --platform ios --profile production
```
Jika Anda tidak menentukan flag --profile , EAS menggunakan profil production secara default.
Sekarang setelah Anda memiliki produksi pertama Anda, Anda dapat mengirimkan ini ke toko -toko. Kirim EAS dapat membantu Anda mengirim build ke toko.
```
 $ eas submit --platform ios --latest
```
Anda juga dapat menggabungkan build dan kirim dalam satu perintah, menggunakan eas build ... --auto-submit .
Sebelum Anda bisa mendapatkan aplikasi di tangan pengguna Anda, Anda harus memberikan informasi tambahan ke toko aplikasi. Ini termasuk tangkapan layar, informasi aplikasi, kebijakan privasi, dll. Saat masih dalam pratinjau , Metadata EAS dapat membantu Anda dengan sebagian besar informasi ini.
Jika Anda menggunakan penyedia sosial OAuth dengan Panitera, misalnya Google, Apple, Facebook, dll ..., Anda harus memutar daftar URL Redirect OAuth Anda sendiri untuk aplikasi Expo di dasbor Panitera.
Di apps/expo/app.config.ts , tambahkan scheme yang akan digunakan untuk mengidentifikasi aplikasi mandiri Anda.
```
 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" ,
   // ...
} ) ;
```
Kemudian, di dasbor Panitera, buka Pengguna & Otentikasi> Koneksi Sosial> Pengaturan dan tambahkan skema aplikasi Anda dan mengarahkan URL ke bidang URL Redirect :
```
your-app-scheme://oauth-native-callback
```
Di sini, your-app-scheme sesuai dengan scheme yang didefinisikan dalam app.config.ts , dan oauth-native-callback sesuai dengan URL pengalihan yang ditentukan saat mengautentikasi dengan penyedia sosial. Lihat SigninwithoAuth.tsx untuk referensi.
Anda dapat menemukan informasi lebih lanjut tentang ini dalam dokumentasi Expo.
Anda sekarang harus dapat masuk dengan penyedia sosial Anda di TestFlight Application Build.
Setelah semuanya disetujui, pengguna Anda akhirnya dapat menikmati aplikasi Anda. Katakanlah Anda melihat kesalahan ketik kecil; Anda harus membuat bangunan baru, mengirimkannya ke toko, dan menunggu persetujuan sebelum Anda dapat menyelesaikan masalah ini. Dalam kasus ini, Anda dapat menggunakan pembaruan EAS untuk dengan cepat mengirim perbaikan bug kecil ke pengguna Anda tanpa melalui proses panjang ini. Mari kita mulai dengan mengatur pembaruan EAS.
Langkah -langkah di bawah ini merangkum Panduan Pembaruan Mulai dengan EAS.
```
// Add the ` expo-updates ` library to your Expo app
$ cd apps/expo
$ pnpm expo install expo-updates

// Configure EAS Update
$ eas update:configure
```
Sebelum kami dapat mengirimkan pembaruan ke aplikasi Anda, Anda harus membuat build baru dan mengirimkannya ke toko aplikasi. Untuk setiap perubahan yang mencakup API asli, Anda harus membangun kembali aplikasi dan mengirimkan pembaruan ke toko aplikasi. Lihat Langkah 2 dan 3.
Sekarang semuanya siap untuk pembaruan, mari kita buat pembaruan baru untuk pembuatan production . Dengan bendera --auto , pembaruan EAS menggunakan nama cabang Git Anda saat ini dan komit pesan untuk pembaruan ini. Lihat bagaimana pembaruan EAS bekerja untuk informasi lebih lanjut.
```
$ cd apps/expo
$ eas update --auto
```
Pembaruan OTA (Over Air) Anda harus selalu mengikuti aturan App Store. Anda tidak dapat mengubah fungsionalitas utama aplikasi Anda tanpa mendapatkan persetujuan toko aplikasi. Tetapi ini adalah cara cepat untuk memperbarui aplikasi Anda untuk perubahan kecil dan perbaikan bug.
Selesai! Sekarang setelah Anda membuat build produksi Anda, mengirimkannya ke toko, dan menginstal pembaruan EAS, Anda siap untuk apa pun!