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.
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