Creating React Native Simulator Builds in App Center

I generally like using App Center for mobile CI/CD. It is dead simple to get a pipeline up and running. However, it does not allow for much customization. I recently ran up against this limitation when trying to set up a build pipeline for iOS simulator builds.

Our QA team requested a

The general idea is:

1. Create the

   .app
   artifact by running
   xcodebuild
   in a pre-build script

2. Distribute the artifact using the App Center CLI

3. Exit the build before the usual build steps run

Adding the build pipelines

We are going to set up two pipelines, one for building the app, and one for distribution. The reason we need a separate pipeline for distributions is that the standard iOS OS type in App Center will only let you distribute

The first pipeline should be configured the same as any other iOS build pipeline you may have already set up. Set an environment variable (eg.

The second will be a “Custom” app type, which has no build step but lets us distribute

We will also need to create an authentication token. We will use this later to authenticate with the App Center CLI in order to upload our build.

Pre-build Script

Branching paths in appcenter-pre-build.sh

if [[ $IS_CI_SIMULATOR_BUILD ]]; then
  bash ./scripts/ios-sim-build.sh
fi

Our codebase should be build-agnostic, so we can use an environment variable to tell App Center to run our simulator build script at the end of the regular build script.

We also need to add an additional environment variable to our build pipeline called

The simulator build script

#!/usr/bin/env bash
unset PREFIX 
cd ios && pod install && cd ..
xcodebuild -workspace "ios/MyApp.xcworkspace" \
  -derivedDataPath "./ios-sim-build" \
  -scheme "MyApp" \
  -configuration "Release" \
  -destination "generic/platform=iOS Simulator" \
  clean build
appcenter login --token $APPCENTER_USER_TOKEN
export BUILD_VERSION=`appcenter distribute releases list --app $APPCENTER_OWNER_APP_NAME | sed -n '1p' | sed "s/[^0-9]//g"`
# path may be different based on the name of your configuration
cd ios-sim-build/Build/Products/qa-iphonesimulator
zip -rq MyApp.zip MyApp.app
appcenter distribute release \
  --app $APPCENTER_OWNER_APP_NAME \
  --file PayPower.zip \
  --group "QA"
  --build-version $(($BUILD_VERSION + 1))
exit

xcodebuild

• Ok, here’s the meat of the script:

  • xcodebuild
    runs the build, resulting in the
    .app
    file we need.

    • -workspace
      : path to the .xcworkspace file

    • -derivedDataPath
      : path to the directory where the temp build files will be stored

    • -scheme
      : usually the name of your project unless you have created custom schemes

    • -configuration
      : usually
      "Debug"
      or
      "Release"
      unless you have created custom configurations. You probably want
      Release
      because it will include the bundled JS, whereas
      Debug
      will be looking for the metro server.

    • -destination
      : use
      "generic/platform=iOS Simulator"
      as the value to get a
      .app
      artifact

    • clean
      +
      build
      : clean cache files and start the build

AppCenter Distribution

• We’ve got our

  .app
  artifact. All we have to do now is find a way to distribute it!

• Authenticate using

  appcenter login --token $APPCENTER_USER_TOKEN

• Get the previous build number using

  appcenter distribute releases list
  and
  sed
  , so we can increment it and use it for the current release

• Zip the .app file

• Distribute using

  appcenter distribute release

• exit
  quits the builds early and shows a green checkmark

Conclusion

After using this approach with my team for a few weeks, we identified some opportunities for improvement. We realized that the

Creating this pipeline has allowed our QA team to stay perfectly in sync with the development team. Before this approach, we had to manually run a build every time there was a push to