CUA

❗️❗️❗️❗️ Wenn dieses Repo nicht mehr aktiv gepflegt wird. ❗️❗️❗️❗️

? Create-universal-App (CUA)

newdemo.mp4

? Was ist das?

Create-universal-App (CUA) ist eine Meinung für die Erstellung von Apps mit Full-Stack-Universal (Mobile + Web Codeshare) mit integriertem AUTH für Mobile und Web mit Expo (Mobile), NextJS (Web), TRPC , Prisma , Tamagui (UI + Styling) und Clerk (Mobile + Web Author). Eine Demo ist live unter https://cua-demo.vercel.app/.

Hier ist ein 20 -minütiges YouTube -Tutorial, das alles übergeht, wenn das mehr von Ihrem Stil ist!

Sie können auch npx create-t3-universal-app ausführen, um Ihr Projekt (von Albbus) zu starten. Fügen Sie eine der folgenden Flags hinzu, wenn Sie eine bestimmte Variation von CuA wünschen:

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

Wenn Sie während der Verwendung eine Frage haben, können Sie sich unserer Diskordie anschließen? Wir sind alle ziemlich aktiv drin!

Dieses Repo wird oben gemacht :

• Create-T3-Turbo: Expo, Weiter, TRPC, Prisma, NextAuth-No UI-Code-Freigabe und kein mobiles Auth.
• T3-Turbo-and-Clerk: T3 Turbo mit Auth für Mobile + Web-immer noch keine UI-Codefreigabe.
• Tamagui + Solito Starter: Expo + Nächster Codefreigabe - kein TRPC und kein integriertes Auth.

? Wie es funktioniert

Ordnerstruktur

• Apps
  • nächste
  • Expo
• Pakete
  • UI (Ihre wiederverwendbaren Komponenten mit Tamagui)
  • DB (DB -Schema & Prisma -Zeug)
  • App
    • Features (️ Alle Ihre nativen Frontend -Code gehen hier ️)
    • Navigation (einheitliche Web + Mobile Navigation)
    • Anbieter (Vereinheitliche Anbieter)
    • utils (Ihre Utils wie Auth & TRPC)
  • API (alle Ihr TRPC- und Backend -Code)

Ein bisschen detaillierter

Ihr Frontend -Code wird in React Native sein, was bedeutet, dass Sie Ansichten anstelle von Divs schreiben werden. Da wir insbesondere Tamagui verwenden, werden wir Statts stattdessen Ansichten schreiben.

• apps/expo und apps/next sind praktisch leere Ordner, die einfach auf Ihren packages/app -Ordner verweisen .
• Wenn Sie mit React Native vertraut sind, wird es sich so anfühlen, als ob Sie eine React Native App schreiben, die im Internet auch sehr gut läuft (mit SSR und all diesen Leckereien).
• Ihr Code wird auf der nächsten Seite als HTML/CSS auf der nächsten Seite und normaler Reaktion auf der nativen Seite gerendert.

Ihr Backend -Code wird in packages/api sein. NextJS wird diesen Code in einer serverlosen Umgebung ausführen. Wenn Sie ein wenig verwirrt sind, wie das funktioniert. Hier ist ein gutes Video von Theo, das über NextJs als Backend -Framework spricht.

• Ihr Backend und Frontend werden mit TRPC kommunizieren.
• Ihr Backend und Ihr DB werden mit Prisma (ORM) kommunizieren.
• Mobile Auth wird mit Clerk Expo durchgeführt, und Web Authauthar erfolgt als nächstes mit Clerk React und Clerk.

Hinweis: Sie müssen nicht verstehen, wie alles im Detail funktioniert, bevor Sie diese Vorlage verwenden können. Als jemand, der wissen möchte, wie jede Bolzen und Nuss funktioniert, werde ich oft durch meinen eigenen Perfektionismus "blockiert", also werfe ich das nur raus, falls du das Gleiche über etwas fühlst.

? Hinter den Entscheidungen

Warum Tamagui für UI & Styling?

Was ist Tamagui?

TLDR : Es ist sowohl im Web als auch im Handy, die Dinge hübsch aussehen, und gleichzeitig wirklich schnell und einfach zu arbeiten. Ausführlicher hat Tamagui 3 Dinge:

• Compiler : Ihre einzigartige Art, Ihren "stylenbezogenen Code" schneller in reine CSS zu verwandeln. Das Wichtigste hier ist wahrscheinlich der Baumabflachungss, den sie tun.
• Kern : Ein kleiner Satz von Komponenten, die sie erstellten, zielten darauf ab, die Ansicht und Text zu ersetzen, die Sie in React Native mit einigen Vorteilen verwenden.
• UI : Eine Reihe von UI -Komponenten, die das TAMA -Team mit Core aufgebaut hat.

Weitere Informationen finden Sie in ihren Dokumenten.

Warum nicht einheimischer Wind & Rückenwind?

Was ich an Tamagui mag, ist, dass es gleichzeitig Rückenwind und Daisyui ist, das von Grund auf für universelle Apps mit eigenen Compiler- und Kernkomponenten entwickelt wurde.

Fühlen Sie sich frei, nativeWind & Tailwind anstelle von Tamagui zu verwenden.

Warum Angestellte für Auth?

Auf hohem Niveau verspricht Clerk eine allgemeine Lösung für Benutzerverwaltung anstelle einer Authentifizierung mit Dingen wie dem integrierten Benutzerprofil, Verbot und Geräteverwaltung. In der Praxis haben sie eine sehr ähnliche Expo/nächste Bibliothek mit eingebauten Haken, die sehr schön zu verwenden sind! Ich persönlich hatte eine großartige Zeit mit dem Angestellten im Vergleich zu anderen Lösungen wie Firebase oder Supabase.

Praktische Dinge

• Wirklich schöne Hooks und Komponenten (signedIn/signedout), die sowohl für Expo als auch für NextJs funktionieren.
• SDKs für alle 3 Plattformen: Expo Frontend, NextJS Frontend, NextJS Serverside.
• Fantastische Unterstützung und Hilfe von ihrem Team auf Zwietracht (aus persönlicher Erfahrung).

Nachteile

• NICHT SMS, es sei denn, Sie zahlen: groß negativ für Mobilgeräte, aber es macht es mit einfachem OAuth wieder wett.
• Premium -Plan im Vergleich zu den Alternativen teuer.
• Doppeltes Schwert des Startups.

Welcher DB?

Ich empfehle Ihnen entweder eine Postgres -Instanz auf der Eisenbahn oder verwenden Sie Supabase. Sie können Ihre eigene mitbringen, da dies nicht zu viel spielt.

? Wie benutze ich das?

1. Projekt einrichten

• yarn install , um Pakete zu installieren und das Projekt zu erstellen.
• Richten Sie Ihre Umgebungsvariablen ordnungsgemäß ein, indem Sie die .env.example -Datei, Entfernen von .example und Ihre Umgebungsvariablen eingeben.
  • CLERK_SECRET_KEY & NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY : Melden Sie sich bei Clerk an, um Ihre API -Tasten zu erhalten
  • Database_url ( optional ): Spalten Sie eine Postgres -Instanz mit Eisenbahn oder Supabase auf (wir verwenden standardmäßig SQLLite jetzt, sodass Sie dies nicht tun müssen, es sei denn, Sie sind bereit für die Produktion!)
• yarn db-push , um unser Prisma-Schema auf unsere DB zu bringen.

2. Starten Sie Ihr Projekt

• yarn web zum Starten eines Web Dev -Servers.
• yarn native auf iOS oder Android läuft. PS : Damit dies funktioniert, benötigen Sie Ihre Web -App auf Localhost: 3000. Denken Sie daran, dass Ihre nächste J -App auch Ihr Backend ist!
• yarn studio , um Ihr Prisma -Studio zu starten. PS : Die TRPC -Beispielabfrage zeigt ein example_entry an, das Sie zusammen mit dem angeschlossenen example_user löschen können.
• yarn dev , um alle Pakete und Anwendungen gleichzeitig zu starten.

3.. Hinzufügen eines neuen Bildschirms

Um den nachstehend erläuterten Prozess zu automatisieren, können Sie die VSCODE-Erweiterung T3-CUA-Tools verwenden, die ebenfalls auf dem Markt erhältlich ist. Es wird die Dateien erstellt und die erforderlichen Importe und Navigationscode für Sie hinzugefügt.

• Erstellen Sie neue Bildschirme in packages/app/features/ .
• Für kleinere Komponenten können Sie sie gerne in packages/ui/ einfügen.
• Für neue Routen fügen packages/api/src/router/ index.ts neuen routeName.ts hinzu.
• Wenn Sie eine neue Seite oder einen neuen Bildschirm hinzufügen, müssen Sie die Seite sowohl in Expo als auch in NextJs hinzufügen:
  • Expo
    • Gehen Sie zu apps/expo/app/ und erstellen Sie einen neuen routeName.tsx , der Ihr Element aus /app/features/screenName/ importiert.
  • Nächste
    • Gehen Sie zu apps/next/pages/ Erstellen Sie einen neuen Ordner mit dem Namen Ihre Route und einen index.tsx , der Ihr Element aus /app/features/screenName/ importiert.

Bereitstellung in Vercel

Nachdem Sie ein neues Projekt auf Vercel erstellt und mit Ihrem Github -Repo verknüpft haben, müssen Sie Ihre Umgebungsvariablen eingeben:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(Ignorieren Sie jetzt den Befehl installieren.)

FAQ

1. Wo soll ich die Pakete installieren? Wenn es einen nativen Code enthält, müssen Sie ihn in den /expo -Ordner installieren.

2. Woher weiß ich, ob es nativen Code enthält? Im Allgemeinen, wenn es einige Interaktionen mit dem Telefon -Betriebssystem wie die APIs umfasst, um mit Speicher, Kamera, Gyro, Benachrichtigung usw. zu interagieren. Es handelt sich um native Code!