React native CI-CD setup with App Center

Code Setup


1.React native config library

Run npm i react-native-config command in terminal.


2.ENV file setup

create .env file at the root level...add env variables.[Do not push the .env file with the code]


3.Android/build.gradle setup

Move to the android folder and perform the following task

  • cd android/app/build.gradle 

  • Add the below line to the top of the file

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"


4.Android/settings.gradle

Add following line in android/settings.gradle


include ':react-native-config

project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')


5.Keystore file generation

 Generate .keystore key for signed building

command= keytool -genkeypair -v -keystore file-name-key.keystore -alias file-name-alias -keyalg RSA -keysize 2048 -validity 10000


On running the above command user has to provide the following details

  • First and last name

  • Organizational unit

  • Organization

  • City or locality

  • State or Province

  • Country Code (XX)

  • Keystore password

  • Key password

Do not share the above details (Especially Keystore file, key password, key store password)


6.Appcenter migration

Pass appcenter env variables into new .env file by creating .sh file in the root directory with the name

appcenter-pre-build.sh at the root level, add env variable as key and value as follow

#!/bin/bash

cd ${APPCENTER_SOURCE_DIRECTORY}

echo BASE_URL=${BASE_URL} > .env


[Note: appcenter-pre-build.sh file name shouldn’t tamper with as this is the file appcenter searches conducting build release]


App center setup

  1. Create a new app on the appcenter
  2. Provide appropriate details regarding the application like App name, release type, icon, etc... choose either android /ios and provide React native as a platform. 
  3. On creating a new application the interface will redirect the user to a dashboard, click on the build section to select the appropriate repository among the list of services provided. 
  4. Choose a particular branch and click on the settings button at the end of the card to configure the build.
  5. Build Configuration

        Enter the following details carefully 

    • Build variant is to be set to Release
    • Build frequency can be set to build at every push
    • Enable the following
      • Build android app gradle
      • Automatically increment the version code
      • Lint source code

    • Provide the environment variables that are used in the code and declared in the .env file.
Follow these steps for ios

In case of ios generate Certificate and .mobileprovision file and upload it for signing the build process




Follow these steps for Android



  • Keep the sign builds enabled and upload the above generated Keystore,  file.
  • Enter the Keystore password, key password, and key alias 
  • Click on build for save/build to build the latest version of the repository branch
    

To handle sign build in code follow the following steps


Follow the above steps till step 4 and continue with the below steps

5.Configure Signed Build release Move to the android folder and perform the following task Add following code in
Android{ signingConfigs{ release { if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
storeFile file(MYAPP_UPLOAD_STORE_FILE)
storePassword project.env.APPCENTER_KEYSTORE_PASSWORD
keyAlias project.env.APPCENTER_KEY_ALIAS keyPassword project.env.APPCENTER_KEY_PASSWORD 
     } } }
     buildTypes{
        release {
                  signingConfig signingConfigs.release
                  }
}
dependencies{
implementation project(':react-native-config')
}
}
      
6.Specify Keystore file
Place the Keystore file generated into android/app
 Add the Keystore file name in Gradle.properties
              MYAPP_UPLOAD_STORE_FILE=filename

7.Update .env file
  Add the keystore variable in .env file
  APPCENTER_KEYSTORE_PASSWORD=keystore password
  APPCENTER_KEY_ALIAS=key alias
  APPCENTER_KEY_PASSWORD=key password

}

7.Appcenter migration
Use the above-mentioned code to migrate APPCENTER env variables to the .env file using appcenter-pre-build.sh file

8.App center configuration
Follow the same steps as the above configuration but specify the env variables properly env section and in the signed build section keep the checkbox enabled for My Gradle settings are entirely set to handle signing automatically.
[Note: Code-level signed build release is applicable only for android]
Location: India