t3 turbo and clerk
v1.1.0
Para que esta plantilla funcione, debe habilitar Discord como proveedor de OAuth. Puede encontrar las opciones sociales en User & Authentication / Social Providers en el tablero del empleado
Si cambia cualquier configuración aquí fuera de la adición de Discord, es posible que deba actualizar su código de exposición para manejar cualquier requisito que cambie.
Usa turborepo y contiene:
.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
Para que se ejecute, siga los pasos a continuación:
# 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 no usa el .env para la clave publicable, por lo que deberá ir a apps/expo/app.config.ts y agregarla allí.
const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key";
dev -scriptNota: Si desea usar un teléfono físico con Expo Go, simplemente ejecute
pnpm devy escanee el código QR.
dev en apps/expo/package.json para abrir el simulador iOS. + "dev": "expo start --ios",pnpm dev en la carpeta Root Project. dev en apps/expo/package.json para abrir el emulador de Android. + "dev": "expo start --android",pnpm dev en la carpeta Root Project. Nota Si está construyendo localmente, deberá insertar su env su envío correctamente, por ejemplo, usando
pnpm with-env next build
No recomendamos implementar una base de datos SQLite en entornos sin servidor ya que los datos no se persistirían. Provisé una base de datos rápida de PostgreSQL en el ferrocarril, pero por supuesto puede usar cualquier otro proveedor de bases de datos. Asegúrese de que el esquema de Prisma se actualice para usar la base de datos correcta.
Implementemos la aplicación Next.js a Vercel. Si alguna vez ha implementado una aplicación Turborepo allí, los pasos son bastante sencillos. También puede leer la Guía oficial de Turborepo sobre la implementación de Vercel.
apps/nextjs como directorio raíz y aplique la siguiente configuración de compilación: 
El comando de instalación filtra el paquete Expo y ahorra unos segundos (y tamaño de caché) de la instalación de dependencia. El comando de compilación nos hace construir la aplicación usando turbo.
Agregue su DATABASE_URL , NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY y CLERK_SECRET_KEY Variable de entorno.
¡Hecho! Su aplicación debe implementar con éxito. Asigne su dominio y use eso en lugar de localhost para la url en la aplicación Expo para que su aplicación Expo pueda comunicarse con su backend cuando no esté en desarrollo.
La implementación de su aplicación de exposición funciona de manera ligeramente diferente en comparación con Next.js en la web. En lugar de "implementar" su aplicación en línea, debe enviar compilaciones de producción de su aplicación a las tiendas de aplicaciones, como Apple App Store y Google Play. Puede leer la distribución completa de su aplicación, incluidas las mejores prácticas, en los documentos de Expo.
Comencemos por configurar EAS Build, que es la abreviatura de Servicios de aplicaciones de Expo. El servicio de compilación lo ayuda a crear compilaciones de su aplicación, sin requerir una configuración de desarrollo nativo completa. Los comandos a continuación son un resumen de la creación de su primera compilación.
// 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:configureDespués de la configuración inicial, puede crear su primera compilación. Puede construir para plataformas Android e iOS y usar diferentes perfiles de compilación EAS.JSON para crear compilaciones o desarrollo de producción, o compilaciones de pruebas. Hagamos una construcción de producción para iOS.
$ eas build --platform ios --profile production
Si no especifica el indicador
--profile, EAS usa el perfilproductionde forma predeterminada.
Ahora que tiene su primera construcción de producción, puede enviar esto a las tiendas. EAS SENTS puede ayudarlo a enviar la construcción a las tiendas.
$ eas submit --platform ios --latest
También puede combinar la compilación y envío en un solo comando, usando
eas build ... --auto-submit.
Antes de que pueda obtener su aplicación en manos de sus usuarios, deberá proporcionar información adicional a las tiendas de aplicaciones. Esto incluye capturas de pantalla, información de aplicaciones, políticas de privacidad, etc. Mientras aún está en vista previa , los metadatos EAS pueden ayudarlo con la mayor parte de esta información.
Si está utilizando los proveedores sociales de OAuth con el empleado, por ejemplo, Google, Apple, Facebook, etc., debe conectar su propia URL de redirección de OAUTH para la aplicación Expo en el tablero del empleado.
En apps/expo/app.config.ts , agregue un scheme que se utilizará para identificar su aplicación independiente.
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" ,
// ...
} ) ;Luego, en el tablero del secretario, vaya al usuario y la autenticación> Conexiones sociales> Configuración y agregue el esquema de su aplicación y redirige URL al campo URL de redirección :
your-app-scheme://oauth-native-callback Aquí, your-app-scheme corresponde al scheme definido en app.config.ts , y oauth-native-callback corresponde a la URL de redirección definida cuando se autentica con proveedores sociales. Ver SigninWithoAuth.tsx para referencia.
Puede encontrar más información sobre esto en la documentación de Expo.
Ahora debería poder iniciar sesión con sus proveedores sociales en la compilación de la aplicación TestFlight.
Una vez que todo está aprobado, sus usuarios finalmente pueden disfrutar de su aplicación. Digamos que viste un pequeño error tipográfico; Tendrá que crear una nueva compilación, enviarla a las tiendas y esperar la aprobación antes de poder resolver este problema. En estos casos, puede usar la actualización EA para enviar rápidamente una pequeña disgusto a sus usuarios sin pasar por este largo proceso. Comencemos configurando la actualización EA.
Los siguientes pasos resumen la guía de actualización de inicio con EAS.
// Add the ` expo-updates ` library to your Expo app
$ cd apps/expo
$ pnpm expo install expo-updates
// Configure EAS Update
$ eas update:configureAntes de que podamos enviar actualizaciones a su aplicación, debe crear una nueva compilación y enviarla a las tiendas de aplicaciones. Para cada cambio que incluya API nativos, debe reconstruir la aplicación y enviar la actualización a las tiendas de aplicaciones. Ver los pasos 2 y 3.
Ahora que todo está listo para las actualizaciones, creemos una nueva actualización para compilaciones production . Con el indicador --auto , EAS Update utiliza su nombre de rama Git actual y mensaje de confirmación para esta actualización. Vea cómo funciona la actualización EA para más información.
$ cd apps/expo
$ eas update --autoSus actualizaciones OTA (sobre el aire) siempre deben seguir las reglas de la tienda de aplicaciones. No puede cambiar la funcionalidad principal de su aplicación sin obtener la aprobación de la tienda de aplicaciones. Pero esta es una forma rápida de actualizar su aplicación para cambios menores y correcciones de errores.
¡Hecho! Ahora que ha creado su compilación de producción, la envió a las tiendas e instaló la actualización EAS, ¡está listo para cualquier cosa!
La pila se origina en Create-T3-Turbo.
