t3 turbo and clerk Téléchargement - t3 turbo and clerk Source Code Download

t3 turbo and clerk

Code Source AI

v1.1.0

Télécharger

Créer T3 Turbo avec authentification du commis

Configuration du tableau de bord du commis

Pour que ce modèle fonctionne, vous devez activer Discord en tant que fournisseur OAuth. Vous pouvez trouver les options sociales sous User & Authentication / Social Providers dans le tableau de bord du greffier

Si vous modifiez un paramètre ici en dehors de l'ajout de Discord, vous devrez peut-être mettre à jour votre code d'exposition pour gérer toutes les exigences que vous modifiez.

Il utilise TurborePo et contient:

Disposition du code

 .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

Démarrage rapide

Pour le faire fonctionner, suivez les étapes ci-dessous:

Configuration des dépendances

 # 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

Configurer l'application Expo

Expo n'utilise pas le .Env pour la clé de publication, vous devrez donc vous rendre sur apps/expo/app.config.ts et l'ajouter là-bas.

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

Configurer Expo `dev` -Script

Remarque: Si vous souhaitez utiliser un téléphone physique avec EXPO GO, exécutez simplement pnpm dev et scannez le code QR.

Utiliser le simulateur iOS

Assurez-vous que les outils de ligne Xcode et XCommand sont installés comme indiqué sur les documents Expo.
Modifiez le script dev sur apps/expo/package.json pour ouvrir le simulateur iOS.

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

Exécutez pnpm dev dans le dossier Root du projet.

Pour Android

Installez Android Studio Tools comme indiqué sur les documents Expo.
Modifiez le script dev sur apps/expo/package.json pour ouvrir l'émulateur Android.

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

Exécutez pnpm dev dans le dossier Root du projet.

Déploiement

Next.js

Remarque Si vous construisez localement, vous devrez insérer correctement votre Env, par exemple en utilisant pnpm with-env next build

Condition préalable

Nous ne recommandons pas de déployer une base de données SQLite sur des environnements sans serveur car les données ne seraient pas persistées. J'ai fourni une base de données postgresql rapide sur le chemin de fer, mais vous pouvez bien sûr utiliser tout autre fournisseur de base de données. Assurez-vous que le schéma PRISMA est mis à jour pour utiliser la bonne base de données.

Déployer à Vercel

Déployons l'application Next.js à Vercel. Si vous y avez déjà déployé une application TurborePo, les étapes sont assez simples. Vous pouvez également lire le Guide officiel de TurborePo sur le déploiement de Vercel.

Créez un nouveau projet sur Vercel, sélectionnez le dossier apps/nextjs comme répertoire racine et appliquez les paramètres de construction suivants:

Paramètres de déploiement de Vercel

La commande d'installation filtre le package Expo et enregistre quelques secondes (et la taille du cache) de l'installation de dépendance. La commande build nous fait construire l'application à l'aide de turbo.

Ajoutez votre DATABASE_URL , NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY et CLERK_SECRET_KEY Environment Variable.
Fait! Votre application doit être déployée avec succès. Attribuez votre domaine et utilisez-le au lieu de localhost pour l' url dans l'application Expo afin que votre application Expo puisse communiquer avec votre backend lorsque vous n'êtes pas en développement.

Expo

Le déploiement de votre application Expo fonctionne légèrement différemment par rapport à Next.js sur le Web. Au lieu de "déployer" votre application en ligne, vous devez soumettre des versions de production de votre application aux magasins d'applications, comme Apple App Store et Google Play. Vous pouvez lire la distribution complète de votre application, y compris les meilleures pratiques, dans les documents Expo.

Commençons par configurer EAS Build, qui est abrégé pour les services d'application Expo. Le service de build vous aide à créer des versions de votre application, sans nécessiter une configuration de développement native complète. Les commandes ci-dessous sont un résumé de la création de votre première version.
```
// 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
```
Après la configuration initiale, vous pouvez créer votre première version. Vous pouvez construire pour les plates-formes Android et iOS et utiliser différents profils de construction EAS.json pour créer des versions de production ou du développement, ou des builds de test. Faisons une construction de production pour iOS.
```
 $ eas build --platform ios --profile production
```
Si vous ne spécifiez pas l'indicateur --profile , EAS utilise le profil production par défaut.
Maintenant que vous avez votre première construction de production, vous pouvez soumettre cela aux magasins. EAS Soumettre peut vous aider à envoyer la construction dans les magasins.
```
 $ eas submit --platform ios --latest
```
Vous pouvez également combiner build et soumettre en une seule commande, en utilisant eas build ... --auto-submit .
Avant de pouvoir mettre votre application entre les mains de vos utilisateurs, vous devrez fournir des informations supplémentaires aux magasins d'applications. Cela comprend des captures d'écran, des informations sur l'application, des politiques de confidentialité, etc. Bien que toujours en avant-première , les métadonnées EAS peuvent vous aider avec la plupart de ces informations.
Si vous utilisez des fournisseurs sociaux OAuth avec Clerk, par exemple Google, Apple, Facebook, etc ..., vous devez la liste blanche de votre propre URL de redirection OAuth pour l'application Expo dans le tableau de bord du greffier.
Dans apps/expo/app.config.ts , ajoutez un scheme qui sera utilisé pour identifier votre application autonome.
```
 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" ,
   // ...
} ) ;
```
Ensuite, dans le tableau de bord du greffier, accédez à l'utilisateur et à l'authentification> Connexions sociales> Paramètres et ajoutez le schéma de votre application et redirigez l'URL vers le champ URL de redirection :
```
your-app-scheme://oauth-native-callback
```
Ici, your-app-scheme le scheme défini dans app.config.ts , et oauth-native-callback correspond à l'URL de redirection définie lors de l'authentification avec les fournisseurs sociaux. Voir signinwithoauth.tsx pour référence.
Vous pouvez trouver plus d'informations à ce sujet dans la documentation Expo.
Vous devriez maintenant être en mesure de vous connecter avec vos fournisseurs sociaux dans la construction d'application TestFlight.
Une fois que tout est approuvé, vos utilisateurs peuvent enfin profiter de votre application. Disons que vous avez repéré une petite faute de frappe; Vous devrez créer une nouvelle version, la soumettre aux magasins et attendre l'approbation avant de pouvoir résoudre ce problème. Dans ces cas, vous pouvez utiliser la mise à jour EAS pour envoyer rapidement un petit bugfix à vos utilisateurs sans passer par ce long processus. Commençons par configurer la mise à jour EAS.
Les étapes ci-dessous résument le guide de mise à jour de démarrage avec EAS.
```
// Add the ` expo-updates ` library to your Expo app
$ cd apps/expo
$ pnpm expo install expo-updates

// Configure EAS Update
$ eas update:configure
```
Avant de pouvoir envoyer des mises à jour à votre application, vous devez créer une nouvelle version et la soumettre aux magasins d'applications. Pour chaque modification qui comprend des API natives, vous devez reconstruire l'application et soumettre la mise à jour aux magasins d'applications. Voir les étapes 2 et 3.
Maintenant que tout est prêt pour les mises à jour, créons une nouvelle mise à jour pour les versions production . Avec l'indicateur --auto , la mise à jour EAS utilise votre nom de branche GIT actuel et le message de validation pour cette mise à jour. Voyez comment la mise à jour EAS fonctionne pour plus d'informations.
```
$ cd apps/expo
$ eas update --auto
```
Vos mises à jour OTA (Over the Air) doivent toujours suivre les règles de l'App Store. Vous ne pouvez pas modifier les fonctionnalités principales de votre application sans obtenir l'approbation de l'App Store. Mais c'est un moyen rapide de mettre à jour votre application pour les modifications mineures et les corrections de bogues.
Fait! Maintenant que vous avez créé votre construction de production, l'avez soumise aux magasins et installé la mise à jour EAS, vous êtes prêt pour tout!