CUA

❗️❗️❗️❗️note Este repositorio ya no se mantiene activamente. ❗️❗️❗️❗️

? create-universal-app (CUA)

newdemo.mp4

? ¿Qué es esto?

Create-Universal-APP (CUA) es una plantilla obstinada para crear aplicaciones universales de pila completa (móvil + webshare) con autenticación incorporada para dispositivos móviles y web utilizando Expo (Mobile), NextJS (Web), TRPC , Prisma , Tamagui (UI + Styling) y Clerk (Mobile + Web Auth). Una demostración está en vivo en https://cua-demo.vercel.app/.

¡Aquí hay un tutorial de YouTube de 20 minutos que repasa todo si ese es más de tu estilo!

También puede ejecutar npx create-t3-universal-app para comenzar su proyecto (por Albbus). Agregue una de las siguientes banderas si desea una variación específica de CUA:

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

Si tiene alguna pregunta mientras usa esto, siéntase libre de unirse a nuestro? Discord?, ¡Todos somos bastante activos allí!

Este repositorio está hecho además de :

• Create-T3-Turbo: Expo, Next, TRPC, Prisma, NextAuth-Sin código de interfaz de usuario compartido y sin autenticación móvil.
• T3-TURBO-Y-SECURN: T3 Turbo con autenticación para Mobile + Web: todavía no hay compartir el código de interfaz de usuario.
• TAMAGUI + SOLITO Starter: Expo + Next Code Share - No TRPC y sin autenticación incorporada.

? Cómo funciona

Estructura de carpetas

• aplicaciones
  • próximo
  • exposición
• paquetes
  • UI (sus componentes reutilizables con Tamagui)
  • DB (Cosas de esquema de DB y prisma)
  • aplicación
    • Características (️ Todo su código de frontend nativo irá aquí ️)
    • Navegación (unificando la web + navegación móvil)
    • Proveedor (proveedores unificadores)
    • Utils (sus utilizados como Auth & TRPC)
  • API (todo su código TRPC y backend)

Con un poco más de detalle

Su código frontend será en React Native, lo que significa que va a escribir puntos de vista en lugar de DIV. Dado que estamos usando Tamagui en particular, vamos a escribir pilas en lugar de vistas.

• apps/expo y apps/next son carpetas prácticamente vacías que simplemente están haciendo referencia a sus packages/app .
• Si está familiarizado con React Native, se sentirá como si esté escribiendo una aplicación Native React, eso también funciona muy bien en la web (con SSR y todas esas golosinas).
• Su código se representará como HTML/CSS en el lado de NextJS y React Normal Native en el lado nativo.

Su código de backend estará en packages/api . NextJS ejecutará este código en un entorno sin servidor, si está un poco confundido acerca de cómo funciona, aquí hay un buen video de Theo que habla sobre NextJS como un marco de backend.

• Su backend y frontend se comunicarán con TRPC.
• Su backend y su DB se comunicarán con Prisma (ORM).
• Mobile Auth se realiza con Clerk Expo, y Web Auth se realiza con el Secretario React y el Secretario a continuación.

Nota: No necesita comprender cómo funciona todo en detalle antes de poder comenzar a usar esta plantilla. Como alguien que quiere saber cómo funciona cada perno y tuerca, a menudo me "bloquean" por mi propio perfeccionismo, por lo que solo estoy lanzando esto en caso de que sienta lo mismo sobre algo.

? Detrás de las decisiones

¿Por qué Tamagui para ui y estilo?

¿Qué es Tamagui?

TLDR : Es para hacer que las cosas se vean bonitas tanto en la web como en el móvil, mientras que es realmente rápido y fácil de trabajar. Con más detalle, Tamagui tiene 3 cosas:

• Compilador : su forma única de convertir su "código relacionado con el estilo" en CSS puro más rápido. Lo más importante aquí es probablemente lo que hacen el aplanamiento del árbol que hacen.
• Core : un pequeño conjunto de componentes que crearon destinados a reemplazar la vista y el texto que usa en React Native, con algunas ventajas.
• UI : un conjunto de componentes de UI que el equipo de TAMA creó usando Core.

Echa un vistazo a sus documentos para obtener más información.

¿Por qué no nationalwind & tailwind?

Lo que me gusta de Tamagui es que es simultáneamente el viento de cola y Daisyui que se construyen desde cero diseñados para aplicaciones universales con su propio compilador y componentes centrales.

Siéntase libre de usar nationwind & tailwind en lugar de tamagui, debería poder configurar las cosas con bastante facilidad (y si lo hace , contribuye a esta plantilla creando una rama con la instalación de NativeWind).

¿Por qué empleado de autores?

En un alto nivel, el empleado promete una solución general de administración de usuarios en lugar de solo autenticación con cosas como el perfil de usuario, la prohibición y la administración de dispositivos incorporadas. En la práctica, tienen una biblioteca de Expo/Next muy similar con ganchos incorporados que son muy agradables de usar. Personalmente, la he pasado muy bien usando empleado en comparación con otras soluciones como Firebase o Supabase.

Cosas prácticas

• Hooks & Components realmente agradables (firmado/firmado) que funcionan tanto para Expo como para NextJS.
• SDK para las 3 plataformas: Expo Frontend, NextJS Frontend, NextJS ServerSide.
• Fantástico apoyo y ayuda de su equipo en Discord (desde experiencia personal).

Desventaja

• No hace SMS a menos que pague: Big Negated para Mobile, pero lo compensa con Easy Oauth.
• Plan premium costoso en comparación con las alternativas.
• Espada de doble filo de ser una startup.

¿Qué DB?

Le recomiendo que gire una instancia de Postgres en el ferrocarril o use Supabase, puede traer el suyo, ya que no importa demasiado.

? ¿Cómo usar esto?

1. Configuración del proyecto

• yarn install para instalar paquetes y construir el proyecto.
• Configure sus variables de entorno correctamente duplicando el archivo .env.example , eliminando .example e ingresando sus variables de entorno.
  • Empleado_secret_key & next_public_clerk_publishable_key : regístrese en el empleado para obtener tus claves API
  • Database_url ( opcional ): gire una instancia de Postgres con Railway o Supabase (estamos usando SQLLITE de forma predeterminada ahora, por lo que no tiene que hacerlo a menos que esté listo para la producción!)
• yarn db-push para empujar nuestro esquema de Prisma a nuestro DB.

2. Inicie su proyecto

• yarn web para iniciar un servidor de desarrollo web.
• yarn native para ejecutar en iOS o Android. PD : Para que esto funcione, necesitará que su aplicación web se ejecute en Localhost: 3000, ¡recuerde que su aplicación NextJS también es su backend!
• yarn studio para comenzar su estudio de Prisma. PS : La consulta de ejemplo TRPC mostrará un example_entry que puede eliminar junto con el example_user conectado.
• yarn dev para iniciar todos los paquetes y aplicaciones simultáneamente.

3. Agregar una nueva pantalla

Para automatizar el proceso explicado a continuación, puede utilizar las herramientas de extensión T3-CUA de VSCODE, también disponibles en el mercado. Creará los archivos y agregará las importaciones necesarias y el código de navegación para usted.

• Cree nuevas pantallas en packages/app/features/ .
• Para componentes más pequeños, no dude en ponerlos en packages/ui/ .
• Para nuevas rutas, agregue un nuevo routeName.ts en packages/api/src/router/ y asegúrese de fusionarlo en el enrutador de aplicaciones index.ts .
• Cuando agrega una nueva página o pantalla, deberá agregar la página tanto a Expo como a NextJS:
  • Exposición
    • Vaya a apps/expo/app/ y cree un nuevo routeName.tsx que importa su elemento desde /app/features/screenName/ .
  • Próximo
    • Vaya a apps/next/pages/ , cree una nueva carpeta con el nombre de su ruta y un index.tsx que está importando su elemento desde /app/features/screenName/ .

Desplegando a Vercel

Después de haber creado un nuevo proyecto en Vercel y vincularlo con su repositorio de GitHub, tendrá que ingresar sus variables de entorno:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(Ignore el comando de instalación uno ahora)

Preguntas frecuentes

1. ¿Dónde debo instalar los paquetes? Si contiene código nativo, debe instalarlo en la carpeta /expo .

2. ¿Cómo sé si contiene código nativo? En general, si implica algunas interacciones con el sistema operativo del teléfono como las API para interactuar con almacenamiento, cámara, giroscopio, notificación, etc. ¡Involucra el código nativo!