CUA

❗️❗️❗️❗️ NOTE Ce repo n'est plus activement maintenu. ❗️❗️❗️❗️

? Créer-Universal-App (CUA)

newdemo.mp4

? Qu'est-ce que c'est?

Create-Universal-App (CUA) est un modèle d'opinion pour créer des applications universelles complètes (mobile + web codeshare) avec Auth intégrée pour mobile et Web à l'aide de l'Expo (mobile), NextJS (Web), TRPC , PRISMA , TAMAGUI (UI + Styling) et Clerk (Mobile + Web Auth). Une démo est en direct sur https://cua-demo.vercel.app/.

Voici un tutoriel YouTube de 20 minutes qui dépasse tout si c'est plus de votre style!

Vous pouvez également exécuter npx create-t3-universal-app pour démarrer votre projet (par Albbus). Ajoutez l'un des drapeaux suivants si vous voulez une variation spécifique de CUA:

• --with-supabase
• --with-drizzle-pg
• --with-drizzle-sql

Si vous avez une question lors de l'utilisation, n'hésitez pas à rejoindre notre? Discord ?, Nous sommes tous assez actifs là-dedans!

Ce repo est fabriqué au-dessus de :

• Create-T3-Turbo: Expo, Next, TRPC, PRISMA, NextAuth - pas de partage de code d'interface utilisateur et pas d'authentification mobile.
• T3-turbo-et-clerk: T3 Turbo avec auth pour mobile + web - toujours pas de partage d'interface utilisateur.
• Tamagui + Solito Starter: Expo + Next Code Share - Pas de TRPC et pas d'authentification intégrée.

? Comment ça marche

Structure de dossier

• applications
  • suivant
  • expo
• packages
  • ui (vos composants réutilisables avec Tamagui)
  • DB (DB Schema et Prisma Stuff)
  • appliquer
    • Caractéristiques (️ Tout votre code frontal natif ira ici ️)
    • Navigation (Unification Web + Navigation mobile)
    • fournisseur (fournisseurs unificateurs)
    • utils (vos utils comme auth & trpc)
  • API (tous votre code TRPC et backend)

Dans un peu plus de détail

Votre code Frontend sera dans React Native, ce qui signifie que vous allez écrire des vues au lieu des div. Puisque nous utilisons Tamagui en particulier, nous allons écrire des piles à la place.

• apps/expo et apps/next sont des dossiers pratiquement vides qui font simplement référence à votre dossier packages/app .
• Si vous êtes familier avec React Native, il va avoir l'impression que vous écrivez une application React Native, cela se produit également très bien sur le Web (avec SSR et tous ces goodies).
• Votre code sera rendu sous forme de HTML / CSS du côté suivant et natifs réactifs normaux du côté natif.

Votre code backend sera en packages/api . NextJS va exécuter ce code dans un environnement sans serveur, si vous êtes un peu confus sur la façon dont cela fonctionne, voici une bonne vidéo de Theo qui parle de NextJS en tant que cadre backend.

• Votre backend et votre frontend communiquera avec TRPC.
• Votre backend et votre base de données communiquera avec Prisma (ORM).
• Mobile Auth a terminé avec Clerk Expo, et Web Auth a ensuite fait le commis React and Clerk.

Remarque: vous n'avez pas besoin de comprendre comment tout fonctionne en détail avant de pouvoir commencer à utiliser ce modèle. En tant que personne qui veut savoir comment fonctionne chaque boulon et écrou, je suis souvent "bloqué" par mon propre perfectionnisme, donc je jette ça là-bas au cas où vous ressentiriez la même chose à propos de quelque chose.

? Derrière les décisions

Pourquoi Tamagui pour l'interface utilisateur et le style?

Qu'est-ce que Tamagui?

TLDR : C'est pour rendre les choses jolies sur le Web et le mobile tout en étant très rapide et facile à travailler. Plus en détail, Tamagui a 3 choses:

• Compiler : leur façon unique de transformer votre "code lié à style" en CSS pur plus rapidement. La chose la plus importante ici est probablement l'aplatissement des arbres qu'ils font.
• Core : Un petit ensemble de composants qu'ils ont construits visant à remplacer la vue et le texte que vous utilisez dans React Native, avec certains avantages.
• UI : un ensemble de composants d'interface utilisateur que l'équipe TAMA a construite en utilisant Core.

Consultez leurs documents pour plus d'informations.

Pourquoi pas Nativewind & Tailwind?

Ce que j'aime chez Tamagui, c'est qu'il est simultanément du vent arrière et de Daisyui qui est construite à partir de zéro conçue pour les applications universelles avec son propre compilateur et composants principaux.

N'hésitez pas à utiliser Nativewind & Tailwind au lieu de Tamagui, vous devriez être en mesure de configurer les choses assez facilement (et si vous le faites, veuillez contribuer à ce modèle créant une branche avec l'installation nativewind).

Pourquoi le greffier pour Auth?

À un niveau élevé, Clerk promet une solution globale de gestion des utilisateurs au lieu de simplement authentification avec des choses comme le profil utilisateur, l'interdiction et la gestion des appareils intégrés. En pratique, ils ont une bibliothèque d'expo / prochaine très similaire avec des crochets intégrés qui sont très agréables à utiliser! J'ai personnellement passé un bon moment à utiliser le greffier par rapport à d'autres solutions comme Firebase ou Supabase.

Choses pratiques

• Vraiment beaux crochets et composants (SignedIn / Signedout) qui fonctionnent pour Expo et NextJS.
• SDKS pour les 3 plates-formes: Expo Frontend, NextJS Frontend, NextJS Serverside.
• Soutien fantastique et aide de leur équipe sur Discord (de l'expérience personnelle).

Des inconvénients

• Ne fait pas de SMS à moins que vous ne payiez: un grand négatif pour le mobile, mais le compense avec un OAuth facile.
• Plan premium coûteux par rapport aux alternatives.
• Épée à double tranchant d'être une startup.

Quelle base de données?

Je vous recommande de faire tourner une instance Postgres sur le chemin de fer ou d'utiliser Supabase, vous pouvez apporter le vôtre car cela n'a pas trop d'importance.

? Comment utiliser ceci?

1. Configurer le projet

• yarn install pour installer des packages et construire le projet.
• Configurez correctement vos variables d'environnement en reproduisant le fichier .env.example , en supprimant .example et en entrant vos variables d'environnement.
  • Clerk_secret_key & next_public_clerk_publishable_key : Inscrivez-vous sur le greffier pour obtenir vos clés d'API
  • DATABASE_URL ( Facultatif ): Tournez une instance Postgres avec Railway ou Supabase (nous utilisons Sqllite par défaut maintenant, vous n'avez donc pas à le faire à moins que vous ne soyez prêt pour la production!)
• yarn db-push pour pousser notre schéma PRISMA à notre DB.

2. Démarrez votre projet

• yarn web pour démarrer un serveur de développement Web.
• yarn native à fonctionner sur iOS ou Android. PS : Pour que cela fonctionne, vous aurez besoin de votre application Web en cours d'exécution sur LocalHost: 3000, n'oubliez pas que votre application NextJS est également votre backend!
• yarn studio pour démarrer votre studio Prisma. PS : La requête de l'exemple TRPC affichera un example_entry que vous pouvez supprimer avec l' example_user connecté_user.
• yarn dev pour démarrer simultanément tous les packages et applications.

3. Ajout d'un nouvel écran

Pour automatiser le processus expliqué ci-dessous, vous pouvez utiliser le VScode Extension T3-Cua-Tools, également disponible sur le marché. Il créera les fichiers et ajoutera les importations et le code de navigation nécessaires pour vous.

• Créez de nouveaux écrans dans packages/app/features/ .
• Pour les petits composants, n'hésitez pas à les mettre en packages/ui/ .
• Pour les nouvelles itinéraires, ajoutez un nouveau routeName.ts dans packages/api/src/router/ et assurez-vous de le fusionner dans le routeur de l'application index.ts .
• Lorsque vous ajoutez une nouvelle page ou un nouvel écran, vous devrez ajouter la page à la fois dans Expo et NextJS:
  • Expo
    • Accédez à apps/expo/app/ et créez un nouveau routeName.tsx qui importe votre élément à partir de /app/features/screenName/ .
  • Suivant
    • Accédez à apps/next/pages/ , créez un nouveau dossier avec le nom étant votre itinéraire et un index.tsx qui importe votre élément de /app/features/screenName/ .

Déploiement à Vercel

Après avoir créé un nouveau projet sur Vercel et l'avoir lié à votre dépôt GitHub, vous devrez saisir vos variables d'environnement:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(Ignorez la commande d'installation maintenant)

FAQ

1. Où dois-je installer les packages? S'il contient du code natif, vous devez l'installer dans le dossier /expo .

2. Comment savoir s'il contient du code natif? En général, si cela implique certaines interactions avec le système d'exploitation du téléphone comme les API pour interagir avec le stockage, la caméra, le gyroscope, la notification, etc., il implique le code natif!