Skip to main content

​
Overview

GymApp can be deployed to three platforms:
  • iOS - iPhone and iPad via App Store
  • Android - Phones and tablets via Google Play
  • Web - Static website hosted anywhere

​
Prerequisites

Before deploying, ensure you have:
1

Expo Account

Create a free account at expo.dev
2

Install EAS CLI

npm install -g eas-cli
3

Login to EAS

eas login
4

Platform Accounts

  • iOS: Apple Developer Account ($99/year)
  • Android: Google Play Developer Account ($25 one-time)
  • Web: Any static hosting (Vercel, Netlify, etc.)

​
Web Deployment

GymApp is configured for static web export ("output": "static" in app.json).

​
Building for Web

1

Install Dependencies

Ensure all dependencies are installed:
npm install
2

Build Static Files

npx expo export --platform web
This creates optimized static files in the dist/ directory.
3

Test Locally

Preview the production build:
npm run web
Or serve the dist folder:
npx serve dist

​
Deploying to Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel deploy dist

​
Deploying to Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --dir=dist --prod
The web build uses react-native-web to render React Native components in the browser. Most features work identically across platforms.

​
iOS Deployment

GymApp supports iOS deployment with tablet support enabled ("supportsTablet": true).

​
Initial Setup

1

Configure EAS

Initialize EAS in your project:
eas build:configure
This creates eas.json with build configurations.
2

Update app.json

Ensure iOS configuration is complete:
{
  "expo": {
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.acgym"
    }
  }
}
3

Prepare Assets

Verify your iOS icon exists at:
assets/images/icon.png
Should be 1024x1024px PNG.

​
Building for iOS

Development Build: 
eas build --platform ios --profile development
Production Build: 
eas build --platform ios --profile production
Submit to App Store: 
eas submit --platform ios
GymApp uses the New Architecture (newArchEnabled: true). Ensure all dependencies are compatible before building for production.

​
Testing iOS Builds

Install development builds on device: 
# Build and install via USB
eas build --platform ios --profile development --local
Or use TestFlight for beta testing: 
eas submit --platform ios --latest

​
Android Deployment

GymApp is configured with adaptive icons and edge-to-edge display.

​
Android Configuration

Key settings in app.json: 
{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#E6F4FE",
        "foregroundImage": "./assets/images/android-icon-foreground.png",
        "backgroundImage": "./assets/images/android-icon-background.png",
        "monochromeImage": "./assets/images/android-icon-monochrome.png"
      },
      "edgeToEdgeEnabled": true,
      "predictiveBackGestureEnabled": false,
      "package": "com.yourcompany.acgym"
    }
  }
}

​
Building for Android

1

Prepare Icons

Ensure adaptive icon assets exist:
  • assets/images/android-icon-foreground.png
  • assets/images/android-icon-background.png
  • assets/images/android-icon-monochrome.png
2

Build APK/AAB

# Development build
eas build --platform android --profile development

# Production build (AAB for Play Store)
eas build --platform android --profile production
3

Submit to Play Store

eas submit --platform android

​
Testing Android Builds

Install APK directly on device: 
# Build APK locally
eas build --platform android --profile development --local

# Install via ADB
adb install path-to-your-app.apk
Use internal testing tracks on Google Play for quick testing without full review process.

​
Build Profiles

Create different build configurations in eas.json: 
{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "distribution": "store"
    }
  }
}

​
Environment Variables

Manage secrets and configuration: 
# Set environment variable for build
eas build --platform ios --profile production \
  --non-interactive \
  --clear-cache

# Or use eas.json
{
  "build": {
    "production": {
      "env": {
        "API_URL": "https://api.example.com"
      }
    }
  }
}
Access in code: 
import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig?.extra?.apiUrl;

​
Over-The-Air (OTA) Updates

Deploy JavaScript updates without rebuilding: 
# Install EAS Update
npm install expo-updates

# Configure in app.json
{
  "expo": {
    "updates": {
      "url": "https://u.expo.dev/[your-project-id]"
    }
  }
}

# Publish update
eas update --branch production --message "Bug fixes"
OTA updates can only update JavaScript and assets. Native code changes require a new build.

​
Deep Linking

GymApp is configured with the scheme acgymmobile://: 
{
  "expo": {
    "scheme": "acgymmobile"
  }
}
Test deep links: 
# iOS
xcrun simctl openurl booted acgymmobile://path/to/screen

# Android
adb shell am start -W -a android.intent.action.VIEW \
  -d "acgymmobile://path/to/screen" com.yourcompany.acgym

​
Pre-Deployment Checklist

1

Update Version

Increment version in app.json:
{
  "expo": {
    "version": "1.0.1"
  }
}
2

Test All Platforms

npm run ios
npm run android
npm run web
3

Run Linter

npm run lint
4

Test Both Themes

Test app in both light and dark mode on all platforms.
5

Verify Assets

  • App icon (1024x1024)
  • Splash screen
  • Adaptive icons (Android)
  • Favicon (Web)
6

Review Configuration

Check app.json for:
  • Correct bundle identifiers
  • Proper orientation settings
  • Appropriate permissions

​
Common Issues

​
Build Fails with Native Dependencies

GymApp uses several native modules that require rebuilding: 
# Clear cache and rebuild
eas build --platform ios --profile production --clear-cache

​
New Architecture Compatibility

Some libraries may not support the New Architecture yet. Check compatibility at:
If you encounter issues with the New Architecture, you can disable it by setting "newArchEnabled": false in app.json, but you’ll lose performance benefits.

​
Web Build Missing Assets

Ensure assets are properly imported: 
// ✅ Correct
import icon from './assets/icon.png';

// ❌ Wrong (won't bundle)
const icon = './assets/icon.png';

​
Monitoring and Analytics

Consider adding crash reporting and analytics: 
# Sentry for crash reporting
npx expo install @sentry/react-native

# Expo Analytics
npx expo install expo-analytics

​
Next Steps

  • Review Development Workflow for debugging production issues
  • Check Styling Guide for theming deployed apps
  • Set up CI/CD with GitHub Actions and EAS
  • Configure app store listings and screenshots
  • Plan update strategy (OTA vs full rebuilds)

Build docs developers (and LLMs) love

Get started for freeTalk to us