t3 turbo and clerk

สร้าง T3 Turbo ด้วยการรับรองความถูกต้องของเสมียน

การตั้งค่าแดชบอร์ดเสมียน

สำหรับเทมเพลตนี้ในการทำงานคุณต้องเปิดใช้งาน Discord ในฐานะผู้ให้บริการ OAuth คุณสามารถค้นหาตัวเลือกโซเชียลภายใต้ User & Authentication / Social Providers ในแผงควบคุมเสมียน

หากคุณเปลี่ยนการตั้งค่าใด ๆ ที่นี่นอกเหนือจากการเพิ่มความไม่ลงรอยกันคุณอาจต้องอัปเดตรหัส Expo ของคุณเพื่อจัดการกับข้อกำหนดใด ๆ ที่คุณเปลี่ยน

มันใช้ 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 Simulator

1. ตรวจสอบให้แน่ใจว่าคุณติดตั้งเครื่องมือ XCode และ XCommand Line ตามที่แสดงในเอกสาร Expo
2. เปลี่ยนสคริปต์ dev ที่ apps/expo/package.json เพื่อเปิด iOS Simulator

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

3. เรียกใช้ pnpm dev ที่โฟลเดอร์รูทโครงการ

สำหรับ Android

1. ติดตั้งเครื่องมือ Android Studio ตามที่แสดงในเอกสาร Expo
2. เปลี่ยนสคริปต์ dev ที่ apps/expo/package.json เพื่อเปิดเครื่องจำลอง Android

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

3. เรียกใช้ pnpm dev ที่โฟลเดอร์รูทโครงการ

การปรับใช้

next.js

หมายเหตุหากคุณกำลังสร้าง locallly คุณจะต้องแทรก env ของคุณอย่างถูกต้องตัวอย่างเช่นการใช้ pnpm with-env next build

ข้อกำหนดเบื้องต้น

เราไม่แนะนำให้ปรับใช้ฐานข้อมูล SQLite บนสภาพแวดล้อมที่ไม่มีเซิร์ฟเวอร์เนื่องจากข้อมูลจะไม่คงอยู่ ฉันจัดทำฐานข้อมูล PostgreSQL อย่างรวดเร็วบนทางรถไฟ แต่คุณสามารถใช้ผู้ให้บริการฐานข้อมูลอื่น ๆ ได้แน่นอน ตรวจสอบให้แน่ใจว่า Schema Prisma ได้รับการอัปเดตเพื่อใช้ฐานข้อมูลที่ถูกต้อง

ปรับใช้กับ vercel

มาปรับใช้แอปพลิเคชัน next.js ไปยัง Vercel หากคุณเคยใช้แอพพลิเคชั่น turborepo ที่นั่นขั้นตอนนั้นค่อนข้างตรงไปตรงมา นอกจากนี้คุณยังสามารถอ่านคู่มือ TurborePo อย่างเป็นทางการเกี่ยวกับการปรับใช้กับ Vercel

1. สร้างโครงการใหม่บน Vercel เลือกโฟลเดอร์ apps/nextjs เป็นไดเรกทอรีรูทและใช้การตั้งค่าบิลด์ต่อไปนี้:

คำสั่งการติดตั้งจะกรองแพ็คเกจ Expo และบันทึกไม่กี่วินาที (และขนาดแคช) ของการติดตั้งการพึ่งพา คำสั่ง build ทำให้เราสร้างแอปพลิเคชันโดยใช้เทอร์โบ

2. เพิ่ม DATABASE_URL , NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY และ CLERK_SECRET_KEY ตัวแปรสภาพแวดล้อม

3. เสร็จแล้ว! แอพของคุณควรปรับใช้สำเร็จ กำหนดโดเมนของคุณและใช้สิ่งนั้นแทนที่จะเป็น localhost สำหรับ url ในแอพ Expo เพื่อให้แอป Expo ของคุณสามารถสื่อสารกับแบ็กเอนด์ของคุณเมื่อคุณไม่ได้อยู่ในการพัฒนา

งานแสดงสินค้า

การปรับใช้แอปพลิเคชัน Expo ของคุณทำงานแตกต่างกันเล็กน้อยเมื่อเทียบกับ next.js บนเว็บ แทนที่จะเป็น "การปรับใช้" แอปของคุณทางออนไลน์คุณต้องส่งการสร้างการผลิตแอพของคุณไปยังแอพสโตร์เช่น Apple App Store และ Google Play คุณสามารถอ่านแอพพลิเคชั่นของคุณรวมถึงแนวทางปฏิบัติที่ดีที่สุดในเอกสาร Expo

1. เริ่มต้นด้วยการตั้งค่าการสร้าง EAS ซึ่งสั้นสำหรับบริการแอปพลิเคชัน Expo บริการบิลด์ช่วยให้คุณสร้างแอปของคุณโดยไม่ต้องมีการตั้งค่าการพัฒนาแบบเต็มรูปแบบ คำสั่งด้านล่างเป็นบทสรุปในการสร้างงานสร้างครั้งแรกของคุณ

   // 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 และใช้ profiles สร้าง eas.json ที่แตกต่างกันเพื่อสร้างการสร้างการผลิตหรือการพัฒนาหรือทดสอบการสร้าง มาสร้างการผลิตสำหรับ iOS

    $ eas build --platform ios --profile production
   

   หากคุณไม่ได้ระบุธง --profile โปรไฟล์ EAS จะใช้โปรไฟล์ production ตามค่าเริ่มต้น

3. ตอนนี้คุณมีงานสร้างครั้งแรกของคุณคุณสามารถส่งสิ่งนี้ไปยังร้านค้า EAS ส่งสามารถช่วยคุณส่งงานสร้างไปยังร้านค้า

    $ eas submit --platform ios --latest
   

   นอกจากนี้คุณยังสามารถรวมการสร้างและส่งในคำสั่งเดียวโดยใช้ eas build ... --auto-submit

4. ก่อนที่คุณจะได้รับแอปของคุณในมือของผู้ใช้คุณจะต้องให้ข้อมูลเพิ่มเติมกับแอพสตอร์ส ซึ่งรวมถึงภาพหน้าจอข้อมูลแอพนโยบายความเป็นส่วนตัว ฯลฯ ในขณะที่ยังคงอยู่ในตัวอย่าง ข้อมูลเมตา EAS สามารถช่วยคุณได้ส่วนใหญ่ของข้อมูลนี้

5. หากคุณใช้ OAuth Social Providers กับเสมียนเช่น Google, Apple, Facebook, ฯลฯ ... คุณต้องอนุญาตให้ใช้งาน URL เปลี่ยนเส้นทาง OAuth ของคุณเองสำหรับแอปพลิเคชัน Expo ในแดชบอร์ด Clerk

   ใน 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 สำหรับการอ้างอิง

   คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับสิ่งนี้ในเอกสารประกอบการงานแสดงสินค้า

   ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้กับผู้ให้บริการโซเชียลของคุณในการสร้างแอปพลิเคชัน 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 จะใช้ชื่อสาขา GIT ปัจจุบันของคุณและส่งข้อความถึงการอัปเดตนี้ ดูว่าการอัปเดต EAS ทำงานอย่างไรสำหรับข้อมูลเพิ่มเติม

   $ cd apps/expo
   $ eas update --auto

   การอัปเดต OTA (เหนืออากาศ) ของคุณจะต้องปฏิบัติตามกฎของ App Store เสมอ คุณไม่สามารถเปลี่ยนฟังก์ชั่นหลักของแอปโดยไม่ได้รับการอนุมัติจาก App Store แต่นี่เป็นวิธีที่รวดเร็วในการอัปเดตแอปของคุณสำหรับการเปลี่ยนแปลงเล็กน้อยและแก้ไขข้อบกพร่อง

9. เสร็จแล้ว! ตอนนี้คุณได้สร้างงานสร้างการผลิตของคุณส่งไปยังร้านค้าและติดตั้งการอัปเดต EAS คุณพร้อมสำหรับทุกสิ่ง!

การอ้างอิง

สแต็กมีต้นกำเนิดมาจาก Create-T3-turbo