A Practical Guide To Implementing CI/CD For Mobile Apps Using React Native

Continuous integration and continuous deployment (CI/CD) is a powerful software development practice that can help teams build, test, and release mobile apps faster and more reliably. In this guide, we will walk you through the steps to set up a CI/CD pipeline for your mobile applications using React Native.

You will learn about the tools and techniques you need to automate the build, test, and deployment process, as well as best practices for maximizing efficiency and quality. By the end of this guide, you will have a solid foundation for implementing CI/CD for mobile app development workflow using React Native.

Developer Changes

Step 1: Config folder

1. Create an android project
2. Create a config folder in the root directory. Like the below image.

3. Create 3 files debug.properties, staging.properties and release.properties.

4. These files should contain constants that vary according to the environment. Like BASE_URL, API_URL, AWS ACCESS and SECRET KEYs.

5. Above created .properties files must contain two variables.

a) APPNAME and APPLICATION_ID_SUFFIX

#Application Name
APPNAME = "DEV <app-name>"

#Application ID Suffix 
APPLICATION_ID_SUFFIX = .dev


API_URL =  "Your URL"
BUCKET_NAME = "My bucket"
AWS_ACCESS_KEY = "Your access key"
AWS_SECRET_KEY = "your secret key"

b) APPLICATION_ID_SUFFIX 

👉 Development => .dev

👉 Staging => .staging

👉 Release => NO suffix

6. Variables declared in this file you can access it using BuildConfig class.

private final String bucketName = BuildConfig.BUCKET_NAME;

Step 2: Remove App Name From src/values/string.xml

1. Remove app name line from string.xml file.

Step 3: Edit App/build.gradle

1. Update build types.

2.Replace the build type block with the below code.

a) Adding new staging build type.

b) Read variables from the above-created properties files.

buildTypes {
   release {
       minifyEnabled false
       proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

       ext.config = getProps('../config/release.properties')
       ext.config.each { p ->
           if(p.key == "APPNAME"){
               resValue "string","app_name", p.value
           }
           else if(p.key=="APPLICATION_ID_SUFFIX"){
               applicationIdSuffix p.value
           }else
               buildConfigField 'String', p.key, p.value
       }


   }
   staging {
       minifyEnabled false
       proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

       ext.config = getProps('../config/staging.properties')
       ext.config.each { p ->
           if (p.key == "APPNAME") {
               resValue "string", "app_name", p.value.replace('"', '')
           } else if (p.key == "APPLICATION_ID_SUFFIX") {
               applicationIdSuffix p.value
           } else {
               buildConfigField 'String', p.key, p.value//.replace('"','')
           }
       }
   }

   debug {
       minifyEnabled false
       proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

       ext.config = getProps('../config/dev.properties')
       ext.config.each { p ->
           if (p.key == "APPNAME") {
               resValue "string", "app_name", p.value
           } else if (p.key == "APPLICATION_ID_SUFFIX") {
               applicationIdSuffix p.value
           } else
               buildConfigField 'String', p.key, p.value

       }
   }
}

3. Add the below function at the end of the app/build.gradle file

Which reads properties files

def getProps(path) {
   Properties props = new Properties()
   props.load(new FileInputStream(file(path)))
   return props
}

Step 4: Create Folder Structure For Build Types

1. We want to create 3 apps for 3 build types.

2. We have to create a folder structure to keep dependencies different.

3. You can keep files that are different for build types. Such as resources, firebase, and aws files for debugging, staging, and release build types.

4. You can also keep res files that vary between different build types.

Step 5:Create releaseNotes.txt File

Create one file in the root directory and name it releaseNotes.txt

Step 6:Create App On Firebase

1. We have to create 3 projects for dev, staging and release. If we are not using any dependent service, we can create 3 apps in a single project.

2. Create an app under the firebase project.

a) For dev application id suffix => .dev

b) For staging application id suffix => .staging

3. Download googleService.json and it to the project directory as per build types [environment].

4. Enable firebase app distribution.

Note: Do not create a firebase project in your personal or demo account. Ask a devops engineer to create a firebase project if you don’t have a client account yet.

Related Read: How To Implement CI/CD For Android App Development?

Devops Changes

Step 1: Setup

1. To try and set it up, you have to install some softwares.

2. You must have an android studio or android SDK installed.

3. Install Fastlane. [Fastlane does not support windows os]

4. Create a new branch for DevOps changes.

Step 2: Firebase Setup

1. Enable app distribution service.

2. Create a new group in the app distribution named “Internal” and “Client.” And add members to the group.

Step 3: Create Keystore Files

1. We have decided to maintain the format, so keep the names below.

a) Development => projectnameDev.jks

b) Staging => projectnameStag.jks

c) Release => projectname.jks

2. Command to generate Keystore.

keytool -genkey -alias urgidoctor -keyalg RSA -keystore urgidoctorDev.jks -keysize 2048 -validity 36500

3. The password format is Projectname@123

4. Save the details of the Keystore in the keystoredetails.txt file.

Step 4: Fastlane

Fastlane is an open-source platform aimed at simplifying Android and iOS deployment. It lets you automate every aspect of your development and release workflow.

Install:

Fastlane for iOS

Fastlane Setup in Ubuntu

1. Open the terminal and go to the project folder.

cd <project>

2. Initialize Fastlane or can directly jump to step 7.

fastlane init

3. Add firebase distribution plugin.

fastlane add_plugin firebase_app_distribution

4. Fastlane has the main file, which is Fastfile.

5. Open and add 3 lanes named development, staging and release. 

OR

6. Download the Fastlane folder and add /replace the Fastlane folder with your folder.

7. The above folder contains Fastfile and .env files for 3 environments.

Go through all the lanes.

8. Edit Fastfile and change the Keystore details you created above for all the lanes.

9.  Edit .env files.

a) Add the application id that you have saved in the firebase setup step.

10. Edit .env.development, .env.staging, .env.release files and add application id respective to the environment.

Step 5: Devops File Repository

1. Get access to the mindbowser-devops-files repo if not. 

2. Create a new branch with a project name.

3. We have pre-created a folder structure decided for android. Just add/replace files for this project.

4. Create the same structure concerning this project.

Add config, Keystore and firebase files, respectively.

5. Here urgidoctor is the project name. Add your project name.

6. You can find the pre-created folder structure and files here for reference.

Step 6: Jenkins

1. Add Jenkinsfile in the root directory of the project.

2. You can download the pre-created Jenkinsfile here.

3. Points where you have to change in the above file.

👉 replace_file_folder = here, give the folder name you created in step 5. In the above image, it is ‘urgidoctor.’

👉 Slack_channel = add slack channel name 

If you have a new workspace other than Mindbowser, then use this link to generate a webhook.

👉 In stage(‘download necessary files stage’), update the checkout branch name to that you created in step 5.

4. Create a new multi-branch job on Jenkins.

5. Configure as below images.

• • Add bitbucket source
  • Select mindbowser credentials
  • Add the owner’s name, “mindbowser.”
  • Select your repository name
  • Select all branches in discover branched
  • And again, filter it out for branches you need to add
  • Select branches

QA  Changes

Step 1: Firebase

1. Ask DevOps engineers to add all the 3 projects to the firebase “Internal” group.

2. After that, you will get notified of each build upload via mail, or you can check it on firebase.

3. Open the firebase console.

4. Go to the app distribution section.

5. Here you can download and test it.

Step 2: Create Public link

1. The build you want to forward to the client.

a) Click on the build.

b) You can also edit release notes and send them to clients.

2. If you want to create a public link, then please click the invite links option on the console.

Note: There are three environments in use: Development, Staging, and Release. Each of these environments has its own backend, with unique app IDs, base URLs, push notifications, and Google APIs. When using the firebase database, it is important to use the correct firebase google-service.json file for the corresponding environment.

It is also necessary to update the devops engineer about any changes or updates to app building dependencies, including changes to properties files, the enabling of services that depend on keystore sha, or the addition of files to src/debug, src/release, or src/staging. If these changes are not properly communicated to the devops engineer, it may result in issues with the CI build.
Related Read: How to Implement Continuous Integration for Quality Automation in Product Engineering?