CI/CD Pipeline for React Native Apps

January 5, 2024

CI/CD Pipeline for React Native Apps

Automating the deployment process for React Native apps is crucial for maintaining a fast development cycle. Here's how to set up a robust CI/CD pipeline using Fastlane and GitHub Actions.

The Setup

1. Fastlane Configuration

Create a Fastfile in your project root:

# fastlane/Fastfile
default_platform(:ios)

platform :ios do
  desc "Build and deploy iOS app"
  lane :beta do
    # Increment build number
    increment_build_number(
      build_number: latest_testflight_build_number + 1
    )
    
    # Build the app
    build_ios_app(
      scheme: "YourAppScheme",
      export_method: "app-store",
      configuration: "Release"
    )
    
    # Upload to TestFlight
    upload_to_testflight(
      skip_waiting_for_build_processing: true
    )
  end
  
  desc "Build and deploy Android app"
  lane :android_beta do
    # Build Android app
    gradle(
      task: "clean assembleRelease",
      project_dir: "android/"
    )
    
    # Upload to Play Console
    upload_to_play_store(
      track: 'internal',
      aab: '../android/app/build/outputs/bundle/release/app-release.aab'
    )
  end
end

2. GitHub Actions Workflow

Create .github/workflows/deploy.yml:

name: Deploy to App Stores

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  ios-deploy:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm install
      
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.0'
          bundler-cache: true
      
      - name: Install Fastlane
        run: |
          cd ios
          bundle install
      
      - name: Deploy to TestFlight
        env:
          MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
          FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD }}
        run: |
          cd ios
          bundle exec fastlane beta

  android-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm install
      
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.0'
          bundler-cache: true
      
      - name: Deploy to Play Store
        env:
          PLAY_STORE_CONFIG_JSON: ${{ secrets.PLAY_STORE_CONFIG_JSON }}
        run: |
          bundle exec fastlane android_beta

3. Code Quality Checks

Add automated testing and linting:

# Add to your workflow
- name: Run tests
  run: npm test

- name: Run linting
  run: npm run lint

- name: Type checking
  run: npm run type-check

Key Benefits

  • Automated Deployments: No manual intervention required
  • Consistent Builds: Same environment every time
  • Faster Releases: Reduced time from commit to production
  • Quality Gates: Automated testing before deployment

Best Practices

  1. Environment Management: Use different configurations for staging and production
  2. Secrets Management: Store sensitive data in GitHub Secrets
  3. Rollback Strategy: Always have a plan to quickly revert changes
  4. Monitoring: Set up alerts for failed deployments

Common Pitfalls

  • Certificate Management: Keep certificates and provisioning profiles up to date
  • Build Time: Optimize build times to avoid timeouts
  • Dependencies: Lock dependency versions to ensure reproducible builds

A well-configured CI/CD pipeline can save hours of manual work and reduce deployment errors significantly.