How to automate Deploy and Release of React Native app. Setup CI&CD in 2020
Hello everyone. In this and few next stories, I would like to share with you guide how to deploy React Native applications in an easy and elegant way.
Approximate publications plan will be next:
Part 1 — How to setup CI/CD for React Native app [iOS].
In this article, you will learn how to set up basic CI flow and as a result, you will have new build in TestFlight on each push to development branch.
Part 2 — Manage different environments (development/production etc) for your React Native app. [iOS]
In this article, we will have the production-ready infrastructure and as a result, we will have different build in TestFlight for development and production builds. (different applications with different bundle_id and app name).
Part 3 — How to setup CI/CD for React Native app [Android].
In this article we will have exactly the same as in Part 1, but for Android.
Part 4 — Manage different environments (development/production etc) for your React Native app. [Android]
Same as Part 2, but Android platform-specific configurations.
Part 1 — Basic set up CI/CD [iOS].
Prerequisites
- Apple developer account
- Bitrise CI account
- Empty Private Git repository for Signing Certificates.
Step 1. Setup Fastlane.
Follow setup instructions from official Fastlane documentation.
Step 2. Create App in Bitrise Dashboard.
Open Bitrise, press Add New App, then Add a new app on Web UI.
On a new page, go thought all required fields and as a result we have an app on the dashboard.
Step 3. Add Bitrise SSH key to Certificate Repository.
Go to Apps Settings page, scroll down and press Show SSH Public Key.
Then we need to put this key to your git repository. Usually, it’s possible to do in a repository setting, for example in Bitbucket it possible to do in Settings — Access keys tab.
We need this key to give CI the possibility to download Signing certificates from the repository while creating a new iOS build.
Step 4. Setup Fastlane Match
At this stage, we will generate Signing and Provisioning certificates for the app and put them to our Certificate Repository.
Follow this official setup instructions. Basically, you will need to run 3 commands:
fastlane match initfastlane match appstore
fastlane match development
After running these commands make sure you have certificates stored in Certificates Repository.
Step 5. Setup Fastlane
We are getting closer to automating app build generation and Fastlane CLI will help us with it. Use official documentation to set up and initialize Fastlane.
After Fastlane initialisation, we will have Fastfile in /ios/fastlane folder.
What we basically do here is pulling signing certificates from the repository, incrementing build number by getting the last build number from Info.plist file and incrementing it by 1. FYI, you cannot upload two builds with the same build number to TestFlight, so it’s important to keep track of the build number.
After that, we generate a build with build_app command and upload it to Testflight.
After build uploaded to Testflight we need to push the latest changes with updated build number to our git repository.
Step 6. Midterm check
At this stage we basically need to make sure we did everything right during all previous steps. So, we need to run fastlane beta from ./ios folder.
We can assume this Step is completed when a new app build will be successfully uploaded to TestFlight.
Step 7. Configurate bitrise.yml
At this point, we starting our CI automation process. I will share bitrise.yml config, which may be copy-pasted into Workflow Editor -> bitrise.yml tab of Application in Bitrise Dashboard.
Step 8. Configurate Env Files
One of the workflow steps is setting application environment variables, it may be BASE_SERVER_URL, STIPE_PRIVATE_KEY, etc.
So, in order to handle environment variables properly, we may use Bitrise CI Generic File Storage.
We need to create .env.development file which consists of environment variables we need to use in our app and upload it to Generic File Storage. To do that, open Workflow Editor and select the Code Signing tab.
On the very bottom you may find an interface for file uploading, it requires just to enter file id and upload file. The example is shown on the screen below.
After file will be uploaded, on the app build stage CI will refer to this file (as it is specified in bitrise.yml config), it will copy this file and paste to the folder with application code, which will be pulled from the repository. And re-named of course ;)
Step 9. Final check.
All right! We have everything completed and now we need just to push something to our master branch, in order to make Build Trigger active (refer to Workflow Editor — Triggers section).
Tips&Tricks
Add <key>ITSAppUsesNonExemptEncryption</key><false/> key to Info.plist file, in order to omit build fails, because of App Store Compliance reasons. Example below.
Thank you for reading this article. Subscribe to me and itjet publication to get updates about our articles regarding React and React Native development.
