Building a React Native app is often a painful process since signing, and building apps manually is too frustrating. So, what if I told you that you could easily set up builds and signing that would happen automatically? Not only that, but you could also run automated tests similar to how typical CI/CD pipelines work. Sound too good to be true? I’ll show you how it’s done using Visual Studio App Center.
Requirements
Before setting up an iOS build, you need an Apple Developer Account so you can add Apple devices and create provisioning profiles. You also need to create an ad-hoc provisioning profile and a .p12 certificate for signing iOS Apps and adding Apple Devices for Testers.
Additionally, you need to create a keystore file before starting an Android build that will be used to sign and build your Android apps and with having your source code in Github to connect your application source code to Visual Studio App Center. Visual Studio App Center can be configured to work with other Version Control Systems but we will only show you on how to do it in Github.
If you are using a new Github account, you should create a new repository before setting up Visual Studio App Center, this will make it easier to integrate projects later.
If you're setting up a new React Native application, make sure that you run react-native init instead of create-react-native-app. This ensures that you do not need to run eject in order to have access to the native source code files. After creating the new application, make sure that you connect your application to Github right away. We use the version 0.55.0 in this tutorial, you might need to fix any issues you encounter in later versions.
Below is a list of what you need to start:
- Github Account with the React Native project repo
- Apple Developer Account
•Ad-hoc Provisioning Profile
•.p12 certificate - Android Keystore File
Visual Studio App Center
Visual Studio App Center is the service we will use to setup build configurations for iOS and Android apps. Build configurations is where automated tests are run, apps are signed, built, and then distributed to beta testers. All we need to do is register and authorize Visual Studio App Center with our Github account.
The first thing you need to do is enable Visual Studio App Center in Github through the marketplace by searching for Visual Studio App Center and setting up a free plan. You will be asked to register for Visual Studio App Center as part of the integration, next select Github and confirm the authorization in order for the integration to be completed. You can select the repository you want Visual Studio App Center to track or you can do it after the integration is finished.
After enabling Visual Studio App Center, you can now have a CI/CD pipeline that’s connected with your VCS. Make sure that you select React Native as the platform and both iOS and Android as devices when adding an app in Visual Studio App Center. After creating an app, continue with setting up the configuration for iOS and Android apps.
Android Build Setup
In order for the Android build pipeline to work, we need to set up a branch to have a build configuration. On the Build page of the Android app in Visual Studio App Center, select the branch you want to configure and set the settings to:
- Build variant: Release
- Automatically increment version code: On
- Run unit tests: On
- Lint source code: On
- Sign Builds: On
- Upload your keystore file and set the password
- Distribute Builds: On
- Distribution Group: Collaborators
iOS Build Setup
Just like in the Android app setup, you need to tell the Visual Studio App Center which branch to use for configuration. Before setting up the iOS build in the Visual Studio App Center, you need to add a pre-build configuration script on your project repo. You can check out the Visual Studio App Center scripts to learn more.
First create appcenter-pre-build.sh. and replace <YourApplicationName> with the name of your application and <Your Bundle ID> with your bundle id (ex. io.rangle.reactnative). Make sure that this name is the same name you set on react-native init.
#!/usr/bin/env bash if [ "$APPCENTER_BRANCH" != "master" ];' then plutil -replace CFBundleName -string "\$(PRODUCT_NAME) Beta" $APPCENTER_SOURCE_DIRECTORY/ios/<YourApplicationName>/Info.plist fi echo "Changing ios bundle identifier" plutil -replace CFBundleIdentifier -string "<Your Bundle ID>" $APPCENTER_SOURCE_DIRECTORY/ios/<YourApplicationName>/Info.plist
- Put the settings on: Automatically increment build number: On
- Run unit tests: On
- Sign Builds: On
- Upload your provisioning profile and p12 certificate
- Distribute Builds: On
- Distribution Group: Collaborators
Setup Collaborators
In order for beta testing to work successfully, you’ll want to establish a group of collaborators who can test the application (you need to do this for both iOS and Android apps). You can add Collaborators by going to Settings -> People and link your developer accounts in Visual Studio App Center to automatically add test devices. Go to Account Settings -> Developer Accounts then add an account and certificate.
After setting yourself as a Collaborator, you will be invited to join Visual Studio App Center. Once you sign up, you will be notified whenever a new release is out. Congratulations, you can now run releases on your own device!
Pull Request Checks
Now that you have successfully setup builds for both iOS and Android, you need to ensure that the build also runs whenever you are merging from a feature branch. In order to track this, we need to look at the checks whenever we perform a pull request. After the checks have successfully completed with no issues, you can then merge your code to the mainline. Make sure that these checks have passed before you merge your changes to ensure that it is safe to do so.
Conclusion
That's it! Now you know how to integrate your Github repository with Visual Studio App Center, how to setup React Native builds for both iOS and Android Devices, how to add Collaborators who can perform beta testing on your application and lastly, how to use checks in a pull request to ensure that the changes developers are attempting to merge do not break the current working version.For further experimentation, there are a few other features in Visual Studio App Center to improve the build process. These include the ability to distribute to the App Store, running end to end testing and Crash & analytics.
Looking to learn more about React Native? Check out some of our other blogs on the topic, here.