React Native Pipeline with Fastlane, Gradle & Sonarqube | Lean Apps

React Native with Fastlane, Gradle & Sonarqube

Jenkins pipeline for React Native

15 February 2018

React Native is one of the fastest growing framework which is being adopted very fast by a huge number of development teams across the industry. What started as an internal Hackathon project at Facebook in 2013, has now become one of the most popular repositories on GitHub. With ever increasing adoption rate, GitHub stats support the argument with over 1500 contributors committing over 12000 commits in 59 branches and 225 releases, as on 26th October 2017 afternoon, being the 4 most starred repository on GitHub. With its ever increasing popularity brings the need for an efficient continuous delivery React Native pipeline.

At Lean Apps, we had started a couple of projects based on React Native back in April 2017. With the DevOps culture in place, fortunately we did setup CI/CD pipelines for Testing and Demo from Day 1 of Development, and automated the entire process and streamlined development.

 React Native pipeline in our Jenkins CI

We setup the React Native pipeline in our Jenkins CI (unfortunately Fastlane was introduced later, hence it’s missing in the picture above).

I will be outlining the steps to configure Jenkins to setup the React Native pipeline.

Before beginning to setup first you need to add your git credentials in Jenkins. Then enter the following code in your script space.

node {

def gradleHome = tool ‘Gradle341′ def androidHome =’/home/ec2-user/android-sdk-linux’

stage(‘SCM’) {

echo ‘\nStep to checkout code from SCM’ checkout([$class: ‘GitSCM’, branches: [[name: ‘*/sprint’]], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: ‘bitbucketLogin’, url: ‘https://bitbucket.org/infinaretailwmsreactnative/infiniaretail-wms-reactnative.git’]]])

}

stage(‘Build’) { sh returnStdout: true, script: ‘export LC_ALL=”en_US.UTF-8″‘

echo ‘\nStep to remove old node modules’ sh returnStdout: true, script: ‘cd ./InfiniaWms && rm -rf ./node_modules’

echo ‘\nStep to install new node modules and dependencies’ sh returnStdout: true, script: ‘cd ./InfiniaWms && npm install’

echo ‘\nStep to run Unit Test Cases’ sh returnStdout: true, script: ‘cd ./InfiniaWms && npm test — -u’

/** //The below two steps are to be executed only when a pipeline is to be run for the first time.

//Don’t delete this part, let it be commented.

echo ‘\nStep to start the android emulator’ sh ‘cd ${ANDROID_HOME} && emulator -avd android-nexus -no-skin -no-window’

echo ‘\nStep to install the application on the emulator’ sh ‘cd ./InfiniaWms && react-native run-android’ **/

echo ‘\nStep to bundle all resources for the app’ sh returnStdout: true, script: ‘cd ./InfiniaWms && react-native bundle –dev false –platform android –entry-file index.android.js –bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle –assets-dest ./android/app/build/intermediates/res/merged/debug’

echo ‘\nStep to run sonar-runner and send analysis reports to Sonarqube’

sh returnStdout: true, script: ‘cd ./InfiniaWms && /opt/sonarqube/sonar-runner-2.4/bin/sonar-runner’

echo ‘\nStep to build app with Gradle’ sh returnStdout: true, script: “cd /var/lib/jenkins/workspace/TestPipeline/InfiniaWms/android && ‘${gradleHome}/bin/gradle’ assembleDebug”

}

stage(‘Archive Artifact’) {

echo ‘\nStep to archive the apk file’ archiveArtifacts ‘InfiniaWms/android/app/build/outputs/apk/app-debug.apk’

}

stage(‘Notify’) {

echo ‘\nStep to send email notification’ def mailRecipients = “yash.shanker@theleanapps.com, shubham.soin@theleanapps.com,divyansh.yadav@theleanapps.com”

def jobName = currentBuild.fullDisplayName

emailext body: ”’${JELLY_SCRIPT, template=”static-analysis-android”}”’, mimeType: ‘text/html’, subject: “[Jenkins] ${jobName}”, to: “${mailRecipients}”, replyTo: “${mailRecipients}”, recipientProviders: [[$class: ‘CulpritsRecipientProvider’]]

} }

For the iOS part, copy the below commands and paste them in the Execute Shell Script section in Jenkins after configuring source code management.

NOTE: Make necessary changes.

export LC_ALL=”en_US.UTF-8″ cd ./InfiniaWms rm -rf ./node_modules file=”./ios/fastlane/IPAs/InfiniaWms.ipa” if [ -f $file ] ; then

rm $file fi yarn cache clean yarn install CUR_SPACE=. cd $CUR_SPACE/node_modules/react-native/scripts/ curl https://raw.githubusercontent.com/facebook/react-native/5c53f89dd86160301feee024bce4ce0c 89e8c187/scripts/ios-configure-glog.sh >ios-configure-glog.sh chmod +x ios-configure-glog.sh cd ../../.. npm test — -u cd ./ios/InfiniaWms cp AppDelegate_no_bundle.m AppDelegate.m cat AppDelegate.m cd ../.. react-native bundle –entry-file index.ios.js –platform ios –dev false –bundle-output ios/main.jsbundle –assets-dest ios cd ./ios/InfiniaWms cp AppDelegate_bundle.m AppDelegate.m cat AppDelegate.m cd .. fastlane beta

cd ..

Above steps will deploy your iOS application on Testflight and  for your Android app it will send the apk file via email.

For any questions contact me on yash.shanker@theleanapps.com or tweet me at @yash.bhs

    Want to receive an email when we post a new blog?


    About the author: Gaurav is our Operation head, who makes sure things get delivered – in time and in quality. He is responsible for everything that needs to be done for smooth operations at offshore. His philosophy is simple “GET S#!T DONE”



    Do you want to calculate the cost of app?

    Interested in Working together to change the world?