React Native — Automated build with Jenkins tool
The goal of this story is to set up Jenkins for the React Native project to automate the process using the CI/CD process. The main purpose is to understand what is required to build for the Android and iOS platforms, how to download, install, and the process for the build.
So let’s get started!
To download Jenkins for relevant OS click on the corresponding download link. If you have downloaded and installed then the first step is over!
and your Jenkins journey has started, stay tuned!
Reference:
After Installation, go to unlock the Jenkins step.
Windows user Go to
C:\Program Files (x86)\Jenkins\secrets\intialAdminPassword
Copy key, paste it and click to continue !
It will ask to Customize Jenkins, I prefer to Install the suggested plugins option.
Now time to create a user to log in or continue as admin.
Save and Finish. Jenkins Dashboard looks like this ✔
Click on New Item to create a new project.
Select Multi-configuration project, give the name. 🚗
After successfully creating an item, it will appear on the Dashboard. Click on Item and go to the configure option.
By default, General Tab will be selected where the description of the item can be mentioned.
The most important thing is to configure the Source Code Management. In other source code options which I prefer to select git. Make sure to install the git plugin properly. Under the repository URL, mention the source code URL and select credentials if the repository is private.
Now the question is, How to add credentials to Jenkins? 🧐
Next step, to create a token in Github and add it to Jenkins. Check that you have access to Github URL, now go to the settings option.
Click on the Personal Access token, enter a token description, and select the scope of the repository. It will ask for a Github password to enter and a token will be generated. 😁 Please save this token as it will be used later. In case you forget it you need to re-generate it.
Go back to Jenkins and select an item where you can see the option is credentials. Click on credentials and select option as add Username with Password and add. In the password field copy the access token from GitHub.
Go back to Jenkins configuration and select credentials. Ta-da. 😀
In the build Triggers tab, you can select the time when to schedule a job. As of now, I am going with no option in it that means manual Job schedule.
Going ahead, In the ConfigurationMatrix tab select the slave axis option from the dropdown.
How to create a Slave in Jenkins?🚀
Go to the Manage Jenkins option, select the Manage Node option.
Click on Add node, give an appropriate node name. I will create two nodes as I require to run android and iOS builds so the first node name is Windows slave another one is Mac slave.
After creating the node, click on the configure option, it will show Windows slave and Mac slave as shown below.
Click on save. Now the Launch option will appear as per the below reference.
Go back to Jenkins, resume from the Configuration Matrix option.
Go to Build Option, select the add shell script option. Shell script option is selected which will be run on Windows and Mac machine both.
For android and iOS build commands are as below
npm add @react-native-community/cli-platform-android@3.0.3
cd android
./gradlew clean
./gradlew assembleRelease
if [ "$PLATFORM" == "ios" ];
then
xcodebuild clean -project /Users/buildadmin/Documents/Build/workspace/projectname/PLATFORM/ios/platforms/ios/projectname.xcodeproj -configuration Release -alltargets -UseModernBuildSystem=NO
xcodebuild -workspace /Users/buildadmin/Documents/Build/workspace/projectname/PLATFORM/ios/platforms/ios/projectname.xcworkspace -list -UseModernBuildSystem=NO
echo "archive started"
xcodebuild archive -workspace /Users/buildadmin/Documents/Build/workspace/projectname/PLATFORM/ios/platforms/ios/projectname.xcworkspace -scheme projectname -archivePath /Users/buildadmin/Documents/Build/workspace/projectname/PLATFORM/ios/platforms/ios/projectname.xcarchive CODE_SIGN_STYLE="Manual" PROVISIONING_PROFILE_SPECIFIER="545a5a7b-0907-4192-bfc9-42d20b671b94" CODE_SIGN_IDENTITY="iPhone Distribution" DEVELOPMENT_TEAM="G46YUYTZ12Q" -UseModernBuildSystem=NO
xcodebuild -exportArchive -archivePath /Users/buildadmin/Documents/Build/workspace/projectname/PLATFORM/ios/platforms/ios/projectname.xcarchive -exportPath /Users/buildadmin/Documents/Build/projectname.ipa -exportOptionsPlist /Users/buildadmin/Documents/Build/workspace/projectname/PLATFORM/ios/exportOptionsPlist.plist -UseModernBuildSystem=NO
cd /Users/buildadmin/Documents/Build/projectname.ipa
cp -rf projectname.ipa $WORKSPACE
fi
if [ "$PLATFORM" == "android" ];
then
cd $OUTPUT_BUILD_PATH_PROJECTNAME
mv $INPUT_FILE_NAME JenkinsBuild.apk
cp -rf JenkinsBuild.apk $WORKSPACEclick on save and schedule the job.
Few points to take care 🙄🙄
How to launch a slave? 🗼
Click on the slave and the Launch option will appear. It will download the JNLP file then click on it and the slave will connect successfully.
To execute the mac slave, for example, in mac machine type https://IPAddress:8080. This IP Address is where Jenkins is hosted(localhost:8080). Log in with the same user credentials and launch mac slave on mac machine to execute shell commands for a given project.
Manage Jenkins → Global Tool Configuration add git path.
Now we have successfully created both builds for android and iOS using the Jenkins tool 😀
Thank you for reading this. I hope you have successfully executed a Job! In case you have any queries feel free to contact me by commenting below, see you soon in my next post 🍕🍟