Untitled

avatar
unknown
markdown
2 months ago
8.2 kB
6
Indexable

Step-by-Step Process for Developing and Deploying a Mobile App Using Expo (Targeting Android and iOS)

Developing a mobile app with Expo simplifies cross-platform development using React Native. Expo Go is primarily for quick testing during development on physical devices or emulators/simulators. For production, you'll build standalone binaries (APK/AAB for Android, IPA for iOS) using Expo Application Services (EAS) and submit them to the app stores. This guide covers the full process from setup to production deployment, based on the latest Expo practices as of 2025.

1. Set Up Your Development Environment

  • Install Node.js: Download and install the LTS version from the official Node.js website. This is required for running Expo tools.
  • Install Expo CLI and EAS CLI: Open your terminal and run: 
    npm install -g expo-cli
npm install -g eas-cli
    The Expo CLI handles project creation and development, while EAS CLI is for building and submitting to production.
  • Set Up for Android: Install Android Studio to use emulators. Configure an Android Virtual Device (AVD) if testing on emulators.
  • Set Up for iOS: On a Mac, install Xcode from the App Store for simulators. iOS development requires a Mac for building.
  • Install Expo Go App: Download Expo Go from the Google Play Store (Android) or App Store (iOS) on your physical devices for quick previews during development.
  • Create an Expo Account: Sign up at expo.dev. This is free and required for EAS services (upgrades available for more features at $19/month, but not mandatory for basics).
  • Log In to EAS: Run eas login in your terminal and enter your Expo credentials.

Tips: Use a real device for accurate testing. Ensure your computer and devices are on the same Wi-Fi network. If you're in a monorepo or using private npm packages, configure them early (e.g., add npm tokens via EAS secrets).

2. Create and Initialize Your Project

  • Run the following command to create a new Expo project: 
    npx create-expo-app@latest my-app
    This sets up a basic React Native app with Expo tools. Choose a template (e.g., tabs for navigation).
  • Navigate to the project directory: 
    cd my-app
  • Customize your app configuration in app.json (or app.config.js for dynamic config). Include details like:
    • App name, version, icon, splash screen.
    • Bundle ID (e.g., com.yourcompany.yourapp for iOS).
    • Package name (e.g., com.yourcompany.yourapp for Android).
    • Platform-specific settings (e.g., iOS build number, Android version code).

By default, no android or ios folders are created (Expo uses Continuous Native Generation). If needed, generate them with npx expo prebuild.

3. Develop Your App

  • Start the development server: 
    npx expo start
    This launches Metro bundler and generates a QR code.
  • On your device:
    • Open Expo Go.
    • Scan the QR code to load your app.
    • For emulators/simulators: Press a (Android) or i (iOS) in the terminal.
  • Make code changes in files like app/(tabs)/index.tsx (default structure uses Expo Router for file-based navigation). Changes reload automatically with Fast Refresh.
  • Shake your device (or Ctrl+M on Android emulator, Cmd+D on iOS simulator) to open the developer menu for debugging, performance monitoring, or toggling Fast Refresh.
  • Add features: Use Expo SDK modules (e.g., for camera, notifications) via expo install. For custom native code, switch to a development build (see below).

Switch to Development Builds for Advanced Development:

  • Expo Go is limited (no custom native modules). For full flexibility, install expo-dev-client: 
    npx expo install expo-dev-client
  • Create a development build profile in eas.json (e.g., under "development" with simulator: true for iOS).
  • Build it with eas build --profile development --platform all (or locally with npx expo run:android/npx expo run:ios if set up).
  • Install the build on your device/emulator. This acts like a custom Expo Go, supporting native libraries and config plugins.

Tips: Use VS Code with the Expo extension for better debugging. Test on multiple devices. If using environment variables, configure them in EAS.

4. Test Your App

  • Local Testing: Use Expo Go or development builds for unit/integration tests (e.g., with Jest, included by default).
  • Over-the-Air (OTA) Updates: Test updates without rebuilding by publishing JS bundles with expo publish (free tier has limits).
  • Beta Testing:
    • Android: Share internal builds via EAS or Google Play internal testing.
    • iOS: Use TestFlight for beta distribution (npx testflight or EAS Submit).
  • End-to-End Testing: Use tools like Detox or Appium. For CI/CD, integrate with GitHub Actions.
  • Ensure compatibility: Test on various screen sizes, OS versions, and networks.

5. Prepare for Production

  • Configure Build Profiles: In eas.json, define a "production" profile: 
    {
  "build": {
    "production": {
      "android": { "buildType": "app-bundle" },
      "ios": { "buildType": "archive" }
    }
  }
}
    Set versions, credentials, and any Node/Yarn versions.
  • App Signing Credentials:
    • Android: Let EAS generate a keystore or provide your own. Need a Google Play Developer account ($25 one-time fee).
    • iOS: Let EAS handle provisioning profiles and certificates. Need an Apple Developer Program account ($99/year).
    • Run eas credentials to manage them.
  • Other Prep: Update app metadata (icons, splash screens must meet store guidelines). Increment version codes/build numbers.

6. Build for Production

  • Run: 
    eas build --platform all --profile production
    This builds AAB (Android App Bundle) for Google Play and IPA (iOS archive) for App Store. Builds run in the cloud (faster on EAS servers; Apple silicon for iOS).
  • Monitor progress via the EAS dashboard at expo.dev or eas build:view [build-id].
  • For local builds (if preferred, requires setup): Use npx expo run:android --variant release or Xcode for iOS, but EAS is recommended for simplicity.
  • Builds take a few minutes; download artifacts from expo.dev.

Tips: Use --local for local builds if avoiding cloud. Free tier has limits; upgrade for priority queues.

7. Submit to App Stores

  • Android (Google Play):
    • Create an app in Google Play Console.
    • Upload a Google Service Account Key to EAS (generate via Play Console).
    • Run eas submit --platform android.
    • Fill in store listings, then release to production or testing tracks.
  • iOS (App Store):
    • Create an app in App Store Connect.
    • Generate an App Store Connect API Key.
    • Run eas submit --platform ios.
    • Submit for review in App Store Connect (may take days; address any rejections).
  • Automate with CI/CD: Use GitHub Actions workflows to build/submit on pushes to main.

Review Process: Google Play reviews take hours to days; Apple can take 1-2 weeks. Prepare screenshots, descriptions, and privacy policies.

Additional Notes

  • Costs: Expo basics are free, but app stores charge fees. OTA updates may incur costs if exceeding free limits.
  • Updates After Launch: Use EAS Update for JS-only changes without resubmitting (e.g., eas update).
  • Troubleshooting: Check Expo forums, Discord, or docs for errors. Common issues: Credential mismatches, network problems during dev.
  • Limitations: Expo handles most things, but for very custom native code, you may need to eject (not recommended initially).
  • If stuck, refer to Expo's tutorials or YouTube series for visuals.

This process should get your app from idea to production. Start small, iterate, and test thoroughly!

Leave a Comment