We, at Diophant Technologies, firmly believe that a CI/CD pipeline stabilizes and simplifies development. It forces standardization of the development environment, uncovers common problems such as developers forgetting to add new files to the branch before commits changes, and otherwise helps to guard against regressions creeping into production.
Normally, setting up a mobile CI pipeline is a relatively trivial task. Depending on the exact version of Classic React-Native and the way that the project files were produced, however, there are several possible annoyances that might take time to resolve. We will cover the configuration of complete build pipelines for Classic React-Native apps for running builds on Bitrise for anyone looking for options to jumpstart their mobile DevOps.
What pipelines to run?
While it is possible to build both Android and iOS binaries in the same pipeline, we recommend splitting platforms into two separate pipelines.
Let’s start by creating a new React-Native pipeline using Bitrise wizard. We click ‘Add new app’, choose the Bitrise account, privacy, connect the code repository and go through the entire process, including the webhook setup.
We now have a vanilla pipeline. View the pipeline Bitrise created from the Workflow tab. The React-Native template vanilla pipeline includes configurations for both iOS and Android, yet does not actually build binaries.
We will directly edit the bitrise.yml file to include the steps that we need. Under workflows section, let find our pipeline name. Below that will be the steps. Let’s replace the steps section with:
An awesome thing about Bitrise is that configuration changes made in YAML are immediately reflected in the configuration wizard and vice versa.
Click on the Workflows tab to view the visualization of our CI workflow.
We added several steps to the build pipeline. The NVM step tells Bitrise to use a specific Node.JS version. We added steps to: setup React Native CLI, autoprovision iOS profiles, automatically set iOS build number so there are no conflicts, and after Xcode archive, we upload the build artifact – release binary to iTunes.
The last step is to configure environmental variables and setup autoprovisioning so all our steps will work.
We again by adding a new app and having Bitrise create a vanilla React Native pipeline for us, then edit YAML as below:
Android pipeline is similar to iOS, except since Android apps could be installed by clicking a link, we did not have to push artifacts to Google Play.
Bitrise is one of several SaaS options for automating mobile app builds. The developer plan costs $40 per month, and will allow builds for pipeline to run up to 40 minutes before cancelling out. For us, 40 minutes is more than sufficient to build both React Native Android and iOS artifacts, even if both artifacts are included in the same pipeline. We, however, recommend separate pipelines for iOS and Android.
While there are alternatives to Bitrise, starting with Microsoft AppCenter and Azure Pipelines, Bitrise in our opinion is worth a consideration. Things that make Bitrise stand-out are the Bitrise build tools extremely useful for some of the tricky tasks such as iOS profile provisioning, and the Bitrise knowledgeable and responsive customer service second to none.