CUA

❗ Замечание. Это репо больше не поддерживается. ❗

? Create-Universal-App (CUA)

newdemo.mp4

? Что это?

Create-Universal-App (CUA) -это самоуверенный шаблон для создания приложений Universal (Mobile + Web + Code) со встроенной AUTH как для мобильной связи, так и для веб-сайта с использованием EXPO (Mobile), NextJS (WEB), TRPC , PRISMA , TAMAGUI (UI + Styling) и Clerk (Mobile + Web). Демонстрация живет на https://cua-demo.vercel.app/.

Вот 20 -минутный учебник на YouTube, который проходит по всему, если это больше вашего стиля!

Вы также можете запустить npx create-t3-universal-app чтобы начать свой проект (от Albbus). Добавьте один из следующих флагов, если вы хотите конкретный вариант CUA:

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

Если у вас есть какие -либо вопросы при использовании этого, не стесняйтесь присоединиться к нашему Discord?, Мы все довольно активны там!

Это репо сделано на вершине :

• CREATE-T3-TURBO: EXPO, NEXT, TRPC, PRISMA, Nextauth-No Code Code и No Mobile Auth.
• T3-Turbo-and-Clerk: T3 Turbo с Auth для мобильного + Web-по-прежнему нет кода пользовательского интерфейса.
• Tamagui + Solito Starter: Expo + Next Code Share - No TRPC и NO встроенная AUTH.

? Как это работает

Структура папки

• приложения
  • следующий
  • Экспо
• пакеты
  • пользовательский интерфейс (ваши многоразовые компоненты с тамагуи)
  • DB (DB Schema & Prisma Stuff)
  • приложение
    • Особенности (️ Весь ваш родной код фронта будет поступать здесь ️)
    • Навигация (объединение Web + мобильная навигация)
    • провайдер (объединяющие поставщики)
    • utils (ваши утильщики, такие как Auth & Trpc)
  • API (весь ваш код TRPC & Backend)

Немного больше

Ваш код Frontend будет в React Native, что означает, что вы собираетесь писать представления вместо DOV. Поскольку мы используем тамагуи, в частности, мы собираемся писать стеки вместо этого.

• apps/expo и apps/next являются практически пустыми папками, которые просто ссылаются на ваши packages/app .
• Если вы знакомы с Nate Native, то вы будете чувствовать себя так, как будто вы пишете приложение React Native, это просто очень хорошо работает в Интернете (с SSR и всеми этими вкусностями).
• Ваш код будет отображаться в виде HTML/CSS на стороне NextJS, а нормальный реагирует на собственной стороне.

Ваш бэкэндский код будет в packages/api . NextJS собирается запустить этот код в без серверной среде, если вы немного смущены тем, как это работает, вот хорошее видео Theo, в котором рассказывается о NextJS как бэкэнд -структуре.

• Ваш бэкэнд и фронт будут общаться с TRPC.
• Ваш бэкэнд и ваш БД будут общаться с Prisma (ORM).
• Mobile Auth выполняется с Clerk Expo, а Web Auth выполняется с Clerk React и Clerk Next.

Примечание: вам не нужно понимать, как все работает подробно, прежде чем вы сможете начать использовать этот шаблон. Как кто -то, кто хочет знать, как работает каждый болт и орех, меня часто «заблокируют» своим собственным перфекционизмом, поэтому я просто бросаю это там, если вы чувствуете то же самое о чем -то.

? За решениями

Почему тамагуи для пользовательского интерфейса и стиля?

Что такое тамагуи?

TLDR : Это для того, чтобы все было красиво выглядеть как на Интернете, так и на мобильных устройствах, в то же время очень быстро и легко работая. Более подробно, у тамагуи есть 3 вещи:

• Компилятор : их уникальный способ превращения вашего «кода, связанного с стилем» в чистый CSS быстрее. Самое главное здесь - это, вероятно, дерево, сглаживающее, что они делают.
• Ядро : небольшой набор компонентов, которые они создали, направлены на замену представления и текста, которые вы используете в Nate Native, с некоторыми преимуществами.
• Пользовательский интерфейс : набор компонентов пользовательского интерфейса, которые команда TAMA построила с использованием Core.

Проверьте их документы для получения дополнительной информации.

Почему бы не Nativewind & Tailwind?

Что мне нравится в Tamagui, так это то, что он одновременно вытекает на ветер и Daisyui, созданный с нуля, предназначенных для универсальных приложений с собственными компиляторами и основными компонентами.

Не стесняйтесь использовать NativeWind & Taillid вместо Tamagui, вы должны быть в состоянии установить вещи довольно легко (и если вы это сделаете , внести свой вклад в этот шаблон, создавая филиал с установкой NativeWind).

Почему клерк для Auth?

На высоком уровне Клерк обещает общее решение управления пользователями, а не просто аутентификацию с такими вещами, как профиль пользователя, встроенный запрет и управление устройствами. На практике у них есть очень похожая библиотека Expo/Next со встроенными крючками, которые очень приятно использовать! Я лично отлично провел время, используя клерк по сравнению с другими решениями, такими как Firebase или Supabase.

Практические вещи

• Действительно хорошие крючки и компоненты (подписание/подписание), которые работают как для Expo, так и для NextJS.
• SDK для всех 3 платформ: Expo Frontend, NextJs Frontend, NextJS Serverside.
• Фантастическая поддержка и помощь от их команды по Discord (от личного опыта).

Недостатки

• Не делает SMS, если вы не заплатите: Big Oftion для мобильных устройств, но компенсирует это с легким оаутом.
• Премиальный план дорогой по сравнению с альтернативами.
• Двойной красный меч о том, как быть стартапом.

Какой БД?

Я рекомендую вам либо развернуть экземпляр Postgres на железной дороге, либо использовать Supabase, вы можете принести свой собственный, поскольку это не имеет большого значения.

? Как использовать это?

1. Настройка проекта

• yarn install для установки пакетов и создания проекта.
• Настройка переменных среды должным образом путем дублирования файла .env.example , удаления .example и введя переменные вашей среды.
  • CLERK_SECRET_KEY & NEXT_PUBLIC_CLERK_PUPLISABLE_KEY : Зарегистрируйтесь на клерке, чтобы получить ключи API
  • Database_url ( необязательно ): разверните экземпляр Postgres с железной дорогой или супабазой (мы сейчас используем SQLLITE по умолчанию, поэтому вам не нужно делать это, если вы не готовы к производству!)
• yarn db-push , чтобы подтолкнуть нашу схему Prisma к нашему БД.

2. Запустите свой проект

• yarn web , чтобы запустить веб -сервер.
• yarn native для работы на iOS или Android. PS : Для этого вам понадобится ваше веб -приложение, работающее на Localhost: 3000, помните, что ваше приложение NextJS также является вашим бэкэнд!
• yarn studio , чтобы запустить вашу Prisma Studio. PS : Пример примера TRPC покажет example_entry , который вы можете удалить вместе с подключенным example_user .
• yarn dev , чтобы запустить все пакеты и приложения одновременно.

3. Добавление нового экрана

Для автоматизации процесса, объясненного ниже, вы можете использовать VSCODE Extension T3-CUA-Tools, также доступные на рынке. Он создаст файлы и добавит для вас необходимый импорт и навигационный код.

• Создайте новые экраны в packages/app/features/ .
• Для небольших компонентов не стесняйтесь помещать их в packages/ui/ .
• Для новых маршрутов добавьте новый routeName.ts в packages/api/src/router/ и обязательно объедините его в маршрутизаторе приложения index.ts .
• Когда вы добавляете новую страницу или экран, вам нужно добавить страницу как в Expo, так и в NextJS:
  • Экспо
    • Перейдите в apps/expo/app/ и создайте новый routeName.tsx , который импортирует ваш элемент из /app/features/screenName/ .
  • Следующий
    • Перейдите в apps/next/pages/ , Создайте новую папку с именем, являющимся вашим маршрутом, и index.tsx , который импортирует ваш элемент из /app/features/screenName/ .

Развертывание в Vercel

После того, как вы создали новый проект на Vercel и связали его со своим репозитором GitHub, вам придется ввести переменные среды:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(Игнорируйте команду установки сейчас)

Часто задаваемые вопросы

1. Где мне установить пакеты? Если он содержит натуральный код, вы должны установить его в папку /expo .

2. Как я узнаю, содержит ли он собственный код? В общем, если это включает в себя некоторые взаимодействия с телефонной ОС, такими как API, для взаимодействия с хранением, камерой, гирозоном, уведомлением и т. Д. Это включает в себя натуральный код!