Download von t3 turbo and clerk - t3 turbo and clerk Source Code Download

t3 turbo and clerk

AI-Quellcode

v1.1.0

Herunterladen

Erstellen Sie T3 Turbo mit Angestellter Authentifizierung

Angestellter Dashboard -Setup

Damit diese Vorlage funktioniert, müssen Sie Discord als OAuth -Anbieter ermöglichen. Sie finden die sozialen Optionen unter User & Authentication / Social Providers im Clerk Dashboard

Wenn Sie hier außerhalb des Hinzufügens von Discord eine Einstellung ändern, müssen Sie möglicherweise Ihren Expo -Code aktualisieren, um alle von Ihnen geänderten Anforderungen zu erfüllen.

Es verwendet Turborepo und enthält:

Code -Layout

 .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

Schneller Start

Befolgen Sie die folgenden Schritte, um es zum Laufen zu bringen:

Setup -Abhängigkeiten

 # 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 -App konfigurieren

Expo verwendet den .Env für den veröffentlichbaren Schlüssel nicht, daher müssen Sie zu apps/expo/app.config.ts wechseln und dort hinzufügen.

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

Konfigurieren Sie Expo `dev` -Skript

Hinweis: Wenn Sie ein physisches Telefon mit Expo Go verwenden möchten, führen Sie einfach pnpm dev aus und scannen Sie den QR-Code.

Verwenden Sie den iOS -Simulator

Stellen Sie sicher, dass Sie mit Xcode- und XCommand -Zeilen -Tools wie in Expo -Dokumenten gezeigt installiert sind.
Ändern Sie das dev -Skript bei apps/expo/package.json um den iOS -Simulator zu öffnen.

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

Führen Sie pnpm dev im Projektstammordner aus.

Für Android

Installieren Sie Android Studio Tools, wie in Expo -Dokumenten gezeigt.
Ändern Sie das dev -Skript bei apps/expo/package.json um den Android -Emulator zu öffnen.

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

Führen Sie pnpm dev im Projektstammordner aus.

Einsatz

Weiter.js

Beachten Sie, dass Sie Ihre Umwelt korrekt einfügen müssen, z pnpm with-env next build

Voraussetzungen

Wir empfehlen nicht, eine SQLite -Datenbank in serverlosen Umgebungen bereitzustellen, da die Daten nicht bestehen würden. Ich habe eine kurze PostgreSQL -Datenbank auf der Eisenbahn bereitgestellt, aber Sie können natürlich jeden anderen Datenbankanbieter verwenden. Stellen Sie sicher, dass das Prisma -Schema aktualisiert ist, um die richtige Datenbank zu verwenden.

Bereitstellung in Vercel

Lassen Sie uns die nächste Anwendung von Vercel bereitstellen. Wenn Sie dort jemals eine Turborepo -App bereitgestellt haben, sind die Schritte recht einfach. Sie können auch die offizielle Turborepo -Anleitung zum Bereitstellen in Vercel lesen.

Erstellen Sie ein neues Projekt auf Vercel, wählen Sie den Ordner apps/nextjs als Stammverzeichnis aus und wenden Sie die folgenden Build -Einstellungen an:

Einstellungen zur Bereitstellung von Vercel

Der Befehl Install filtert das Expo -Paket und spart einige Sekunden (und Cache -Größe) der Abhängigkeitsinstallation. Mit dem Build -Befehl erstellen wir die Anwendung mit Turbo.

Fügen Sie Ihre DATABASE_URL , NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY und CLERK_SECRET_KEY hinzu.
Erledigt! Ihre App sollte erfolgreich bereitstellen. Weisen Sie Ihre Domain zu und verwenden Sie diese anstelle von localhost für die url in der Expo -App, damit Ihre Expo -App mit Ihrem Backend kommunizieren kann, wenn Sie nicht in der Entwicklung sind.

Expo

Die Bereitstellung Ihrer Expo -Anwendung funktioniert etwas anders als bei Next.js im Web. Anstatt Ihre App online bereitzustellen, müssen Sie Produktionsergebnisse Ihrer App in die App -Stores wie Apple App Store und Google Play einreichen. Sie können die vollständige Vertrieb Ihrer App, einschließlich Best Practices, in den Expo -Dokumenten lesen.

Beginnen wir mit der Einrichtung von Eas Build, die für Expo -Anwendungsdienste kurz vorhanden ist. Mit dem Build -Service können Sie Builds Ihrer App erstellen, ohne dass ein umfassendes Setup für native Entwicklung erforderlich ist. Die folgenden Befehle sind eine Zusammenfassung der Erstellung Ihres ersten Builds.
```
// 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
```
Nach dem ersten Setup können Sie Ihren ersten Build erstellen. Sie können für Android- und iOS -Plattformen erstellen und verschiedene EAS.JSON -Build -Profile verwenden, um Produktionsanwendungen oder -entwicklung oder Testbuilds zu erstellen. Lassen Sie uns eine Produktion für iOS erstellen.
```
 $ eas build --platform ios --profile production
```
Wenn Sie das Flag --profile nicht angeben, verwendet EAS das production standardmäßig.
Nachdem Sie Ihre erste Produktionsgebäude haben, können Sie dies an die Geschäfte senden. EAS Subjekt kann Ihnen helfen, den Build an die Geschäfte zu senden.
```
 $ eas submit --platform ios --latest
```
Sie können Build auch in einem einzigen Befehl mit eas build ... --auto-submit kombinieren.
Bevor Sie Ihre App in die Hände Ihrer Benutzer bringen können, müssen Sie zusätzliche Informationen in die App Stores bereitstellen. Dies beinhaltet Screenshots, App -Informationen, Datenschutzrichtlinien usw. Während der EAS -Metadaten können Sie bei den meisten dieser Informationen helfen.
Wenn Sie OAuth -Sozialanbieter mit Angestellter verwenden, z. B. Google, Apple, Facebook usw., müssen Sie Ihre eigene OAuth -URL für die Expo -Anwendung im Clerk Dashboard mit dem Whitelist umleiten.
Fügen Sie in apps/expo/app.config.ts ein scheme hinzu, mit dem Ihre eigenständige App identifiziert wird.
```
 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" ,
   // ...
} ) ;
```
Gehen Sie dann im Clerk -Dashboard zu Benutzer und Authentifizierung> Soziale Verbindungen> Einstellungen und fügen Sie das Schema Ihrer App hinzu und leiten Sie die URL zum Umbau -URLS -Feld weiter:
```
your-app-scheme://oauth-native-callback
```
Hier entspricht your-app-scheme dem in app.config.ts definierten scheme , und oauth-native-callback entspricht der Umleitungs-URL, die bei der Authentifizierung mit Sozialanbietern definiert ist. Siehe Signinwithoauth.tsx als Referenz.
Weitere Informationen dazu finden Sie in der Expo -Dokumentation.
Sie sollten sich nun in der Aufbau von TestFlight -Anwendungen bei Ihren Sozialanbietern anmelden können.
Sobald alles genehmigt ist, können Ihre Benutzer endlich Ihre App genießen. Nehmen wir an, Sie haben einen kleinen Tippfehler entdeckt. Sie müssen einen neuen Build erstellen, es an die Geschäfte senden und auf die Genehmigung warten, bevor Sie dieses Problem lösen können. In diesen Fällen können Sie EAS -Update verwenden, um Ihren Benutzern schnell einen kleinen Fehler zu senden, ohne diesen langen Prozess durchzuführen. Beginnen wir zunächst ein EAS -Update einrichten.
Die folgenden Schritte fassen den Start mit Eas Update Guide zusammen.
```
// Add the ` expo-updates ` library to your Expo app
$ cd apps/expo
$ pnpm expo install expo-updates

// Configure EAS Update
$ eas update:configure
```
Bevor wir Updates an Ihre App senden können, müssen Sie einen neuen Build erstellen und an die App Stores senden. Für jede Änderung, die native APIs enthält, müssen Sie die App neu aufbauen und das Update an die App Stores senden. Siehe Schritte 2 und 3.
Jetzt, da alles für Updates bereit ist, erstellen wir ein neues Update für production . Mit dem Flag --auto verwendet das EAS -Update Ihren aktuellen Git -Zweignamen- und Commit -Nachrichten für dieses Update. Weitere Informationen finden Sie unter der Funktionsweise des EAS -Updates.
```
$ cd apps/expo
$ eas update --auto
```
Ihre OTA -Updates (über die Luft) müssen immer den Regeln des App Store befolgen. Sie können die primäre Funktionen Ihrer App nicht ändern, ohne die Genehmigung von App Store zu erhalten. Dies ist jedoch eine schnelle Möglichkeit, Ihre App für geringfügige Änderungen und Fehlerbehebungen zu aktualisieren.
Erledigt! Nachdem Sie Ihren Produktionsbau erstellt haben, sie an die Geschäfte eingereicht und das EAS -Update installiert haben, sind Sie bereit für alles!