Ever wondered how to migrate your T3 application into a monorepo? Stop right here! This is the perfect starter repo to get you running with the perfect stack!
It uses Turborepo and contains:
apps
|- expo
|- Expo SDK 46
|- React Native using React 18
|- Tailwind using Nativewind
|- Typesafe API calls using tRPC
|- next.js
|- React 18
|- TailwindCSS
|- E2E Typesafe API Server & Client
packages
|- api
|- tRPC v10 router definition
|- db
|- typesafe db-calls using Prisma
To get it running, follow the steps below:
# Install dependencies
npm install
# In packages/db/prisma update schema.prisma provider to use sqlite
- provider = "postgresql"
+ provider = "sqlite"
# Create a `.env` for prisma and make sure it's synced
echo DATABASE_URL=file:./db.sqlite >> packages/db/.env
npm run db-push
Note: If you want to use a physical phone with Expo Go, just run
npm run dev
and scan the QR-code.
- Make sure you have XCode and XCommand Line Tools installed as shown on expo docs.
- Change the
dev
script atapps/expo/package.json
to open the iOS simulator.
+ "dev": "expo start --ios",
- Run
npm run dev
at the project root folder.
- Install Android Studio tools as shown on expo docs.
- Change the
dev
script atapps/expo/package.json
to open the Android emulator.
+ "dev": "expo start --android",
- Run
npm run dev
at the project root folder.
We do not recommend deploying a SQLite database on serverless environments since the data wouldn't be persisted. I provisioned a quick Postgresql database on Railway, but you can of course use any other database provider. Make sure the prisma schema is updated to use the correct database.
Let's deploy the Next.js application to Vercel. If you have ever deployed a Turborepo app there, the steps are quite straightforward. You can also read the official Turborepo guide on deploying to Vercel.
-
Create a new project on Vercel, select the
apps/nextjs
folder as the root directory and apply the following build settings: -
Add your
DATABASE_URL
environment variable. -
Done! Your app should successfully deploy. Assign your domain and use that instead of
localhost
for theurl
in the Expo app so that your Expo app can communicate with your backend when you are not in development.
TODO: Feel free to PR a guide for this. Refer to the Expo docs:
The stack originates from create-t3-app.
A blog post where I wrote how to migrate a T3 app into this.