A starter for a Next.js & Expo monorepo with shared UI components and logic, preconfigured tRPC and authentication, Drizzle & Solito.
Key Features • Structure • Start the app • Deployment • Migrations • MIT licensed
Many thanks to @FernandoTheRojo for Solito and the Solito starter monorepo which this was forked from.
The repo is baked with
- Expo SDK 51 & Next.js with App Router
- tRPC endpoints and tRCP client components for Next.js and Expo
- authentication with NextAuth for web, and an OAuth server with Expo AuthSession for Expo
- automatic token refresh and request repetition
- token validation on tRPC endpoints
- Drizzle as ORM
- NativeWind & TailwindCSS for styling
- Solito for unified navigation
- Docker Compose setup for development & production builds
To start the web and native app during development with instant refresh support, follow the steps below:
- Install dependencies (only once):
yarn
- Start Next.js:
docker compose up
(creates a mysql database container and runsyarn web
) - Start Expo:
- First, build a dev client onto your device or simulator (only once)
cd apps/expo
- Then, either
expo run:ios
, oreas build
- After building the dev client, from the root of the monorepo...
yarn native
- Ensure Next.js runs (see above)
- First, build a dev client onto your device or simulator (only once)
Yarn workspaces separate the code for the Expo & Next.js app and shared packages.
-
apps
Expo & Next.js appsexpo
next
-
packages
shared workspaces across appsapp
shared logic and ui for both Expo and Next.jsfeatures
define ui screens (feature centric) by using components fromdesign
provider
providers that wrap both Expo and Next.js appsdesign
shared components. Define new components as you needtypography
components regarding textlayout
components regarding layout
db
database configurationschema
table definitions
Changes to the database scheme must be committed by running
yarn migrations:generate
This command generates migration files. The migrations are applied automatically by restarting the container.
The environment variables inside /apps/expo/.env and /apps/expo/.env.production must be adopted to point to a running Next.js app
Install packages shared on all platforms in packages/app
:
cd packages/app
yarn add date-fns
cd ../..
yarn
If you're installing a library with any native code, you must install it in apps/expo
:
cd apps/expo
yarn add react-native-reanimated
cd ../..
yarn
Use the docker-compose.prod file to run the web app together with a MySQL database in your production environment. You may need to adjust the env variables in the docker-compose.prod file.
- Authentication in the Expo app throws an error like "Invalid redirect uri": Add the current Expo url (e.g. exp://192.168.178.117:8081) to
redirectUris
inapps/next/server/lib/typescript-node-oauth-server/repositories.ts