Skip to main content

​
Overview

The FE Monorepo uses different deployment strategies for each application:
  • SPA & Web: Vercel for hosting and deployment
  • Expo: EAS (Expo Application Services) for building and distributing to app stores

​
SPA Deployment (Vercel)

The SPA is built with Vite and deployed to Vercel.

​
Building for Production

1

Build for Development

Build with development environment:
bun spa build
This uses .env.dev and builds in development mode.
2

Build for Production

Build with production environment:
bun spa build:prod
This uses .env.prod and optimizes for production.
3

Preview Locally

Preview the production build:
bun spa preview

​
Vercel Configuration

1

Connect Repository

  1. Go to Vercel Dashboard
  2. Click “Add New Project”
  3. Import your Git repository
2

Configure Build Settings

Set the following in Vercel project settings:
  • Framework Preset: Vite
  • Root Directory: apps/spa
  • Build Command: bun run build:prod
  • Output Directory: dist
  • Install Command: bun install
3

Set Environment Variables

Add environment variables from apps/spa/.env.prod:
  1. Go to Settings → Environment Variables
  2. Add each variable (e.g., VITE_API_URL)
  3. Set the appropriate environment scope (Production, Preview, Development)
4

Deploy

Push to your Git repository’s main branch to trigger a deployment.
Vercel automatically deploys previews for pull requests and production builds for the main branch.

​
Web Deployment (Vercel)

The Web app is a Next.js 16 application deployed to Vercel.

​
Building for Production

1

Build for Development

Build with development environment:
bun web build
2

Build for Production

Build with production environment:
bun web build:prod
3

Preview Locally

Start the production server:
bun web start

​
Vercel Configuration

1

Connect Repository

  1. Go to Vercel Dashboard
  2. Click “Add New Project”
  3. Import your Git repository
2

Configure Build Settings

Set the following in Vercel project settings:
  • Framework Preset: Next.js
  • Root Directory: apps/web
  • Build Command: bun run build:prod
  • Output Directory: .next
  • Install Command: bun install
3

Set Environment Variables

Add environment variables from apps/web/.env.prod:
  1. Go to Settings → Environment Variables
  2. Add database URL, auth secrets, and public variables
  3. Ensure BETTER_AUTH_URL points to your production domain
4

Configure Database

Set up PostgreSQL database:
  1. Use Vercel Postgres or external provider
  2. Add DATABASE_URL to environment variables
  3. Run migrations if needed
5

Deploy

Push to your Git repository to trigger deployment.
Ensure your production database is properly configured and accessible from Vercel’s network.

​
Bundle Analysis

Analyze the production bundle size: 
bun web analyze-bundle-size
This builds the app with bundle analysis enabled.

​
Expo Deployment (EAS)

Expo uses EAS for building and distributing apps to Google Play Store and Apple App Store.

​
Prerequisites

1

Install EAS CLI

npm i -g eas-cli
2

Login to EAS

eas login
3

Initialize EAS Project

If not already done:
eas init
4

Set Up Environments

Configure environment variables in the EAS dashboard for each environment (development, preview, production).

​
Build Profiles

The monorepo includes three build profiles in eas.json:
  1. Development: For development builds with dev client
  2. Preview: For internal distribution (TestFlight, Google Play Beta)
  3. Production: For app store submission

​
Development Builds

Development builds include the Expo Dev Client for rapid development: 
bun expo build:android:dev
Local builds create .apk files for Android and .tar.gz files for iOS in the project root.

​
Preview Builds

Preview builds are for internal distribution via TestFlight (iOS) and Google Play Beta (Android): 
bun expo build:android:preview
Preview builds require an Apple Developer Account ($99/year) for iOS.

​
Production Builds

Production builds are optimized for app store submission: 
bun expo build:android:prod
  • Android production builds create .aab files (Android App Bundle) that can only be distributed through Google Play Store
  • iOS production builds create .ipa files that can only be distributed through App Store Connect
  • Neither can be installed directly on devices/simulators

​
OTA Updates

Send over-the-air updates for non-native changes (JS, styling, images): 
bun expo update:preview
OTA updates only work for JavaScript changes. Native code changes require a new build.

​
App Store Submission

1

Google Play Store Setup

Requirements:
  • Google Play Developer Account
  • Google Service Account key
  • Production build (.aab)
2

Apple App Store Setup

Requirements:
  • Apple Developer Account ($99/year)
  • Production build (.ipa)
  • App Store Connect configured
3

Submit Apps

bun expo submit:android
Follow best practices for app store submission including screenshots, descriptions, and privacy policies.

​
Bundle Size Optimization

Analyze the JavaScript bundle size: 
bun expo analyze
This starts the dev server with Expo Atlas. Press Shift+M and open Expo Atlas to view the bundle analysis.

​
CI/CD Integration

​
GitHub Actions

The monorepo includes CI workflows for building and testing:
.github/workflows/ci.yml
- name: Build SPA
  run: bun spa:ci build
  
- name: Build Web
  run: bun web:ci build

​
EAS Workflows

EAS supports automated workflows for Expo apps. Run manually: 
eas workflow:run .eas/workflows/create-development-builds.yaml --non-interactive
Connect your EAS project to GitHub repository to trigger workflows automatically on push/PR events.

​
Environment-Specific Deployments

​
Development Environment

  • SPA/Web: Deploy to Vercel preview URL
  • Expo: Development builds with EAS
  • Purpose: Testing new features

​
Preview/Staging Environment

  • SPA/Web: Vercel preview deployments from PRs
  • Expo: Preview builds distributed via TestFlight/Google Play Beta
  • Purpose: Internal testing and QA

​
Production Environment

  • SPA/Web: Vercel production deployment from main branch
  • Expo: Production builds submitted to app stores
  • Purpose: Public release

​
Troubleshooting

​
Vercel Deployment Issues

Build fails:
  1. Check build logs in Vercel dashboard
  2. Verify environment variables are set correctly
  3. Test build locally: bun run build:prod
App doesn’t work in production:
  1. Check browser console for errors
  2. Verify API endpoints are accessible
  3. Ensure environment variables use production values

​
EAS Build Issues

Build fails on EAS:
  1. Check EAS build logs
  2. Verify eas.json configuration
  3. Test local build first
iOS build requires credentials:
  1. Ensure Apple Developer Account is connected
  2. Run eas credentials to manage certificates
Can’t install production builds:
  1. Production builds (.aab, .ipa) can only be installed through app stores
  2. Use preview builds for local testing

​
Quick Reference

AppPlatformBuild CommandDeploy Target
SPAWebbun spa build:prodVercel
WebWebbun web build:prodVercel
ExpoAndroidbun expo build:android:prodGoogle Play Store
ExpoiOSbun expo build:ios:prodApple App Store

​
Deployment URLs

Build docs developers (and LLMs) love

Get started for freeTalk to us