Build React Native IPA+APK using CLI (Simple CI/CD)
By: Bismo Baruno
Tags: Android, React Native, Ci Cd Pipeline, iOS, DevOps

Build React Native IPA+APK using CLI (Simple CI/CD)

Learn basic CLI for building IPA+APK files on React Native

Photo by pexels.com

Hi everyone! In this part, I want to share again some experience, though, or opinion about technology-related with the software engineering field. What the topic that this story will bring to you at this time? As the title, we will discuss my experience building IPA and APK for our mobile application in React Native using CLI.

This idea came out when our development was stable and organized. But, there is a conflict between the QA team and Mobile Developer. During the development period, QA wants to get a new IPA or APK twice a day, or more. Because they don’t want to pending all the tasks and test it together at the end of the period.

They afraid will be run out of time. It would be better if they can do it frequently. Then, Mobile Developer against the statement from QA. They said it’s wasting too much time to do it. Because the MacBook for building IPA and APK is quite old. It can take around 1–2 hours for building both IPA and APK, for every single build.

So, what the solution to this? We realized there is a high-end PC that supported for building those IPA and APK in a fast time. This PC is not used by anyone. And a long time ago, our boss once said, just use it to build! Okay, it’s time to build something, or tools, which is implement CI/CD concept that can easily be delivered both IPA and APK to the QA team directly.

After discussing with the whole team member, we decided this flow:

Picture 1. Our development of mobile application flow

Wait wait wait, what’s Blacksmith? Okay, let me explain from the flow diagram above. Basically, Blacksmith just the name for our tool to do this delivery. Inspired by Blacksmith character from Ragnarok Online game :)

Then our plan will look like this:

The blacksmith will check on our git repository periodically by API.

If there’s any update for the development version, Blacksmith will pull the latest code and start building the IPA and APK.

After successfully getting the files, Blacksmith will send those to Slack channel by API using Slack bot named Blacksmith also :).

Last, to notify the QA team, Blacksmith bot will be mentioning the QA team members that we have a new version, then prepare your job! lol :)

So, how do we make this done? I will not explain all of the technical side of this story. Just focused on the building with the CLI part. Because it’s the most important among others. If we can tackle this, you can easily adjust the flow according to your needs.

Android

For android, it’s not difficult to build APK using CLI. Make sure your project is ready to build and don’t have any error (we using React Native for both Android & iOS). In our case, we just need this command to do it:

$ cd [YOUR_RN_PROJECT]

$ npm install

$ cd android

$ ./gradlew clean

$ ./gradlew assembleRelease && react-native run-android --variant=release

After successfully build the APK, you can found the file in this location:

[YOUR_RN_PROJECT]/android/app/build/outputs/apk/release/app-release.apk

iOS

I can say, this part a little bit difficult because my background isn’t Mobile Developer especially iOS Developer. And our Mobile Developer not too familiar using CLI for making the IPA file. Usually, they using Xcode to do this.

Also, iOS is complicated compared with Android. We should have an Apple Developer account, certificate, provisioning profile, etc. After trial and error many times, asking some iOS developer friends (thank you Muhammad Alfiansyah, Riyan Pratama, Nico, Agita Firstawan, Robby Widyahartono, Reza Arifiansyah), finally we can getting the IPA!

But, have different behavior with Android, iOS should do the archive first, then exported it as an IPA file.

We use automatically signing for build this, so make sure you could getting the IPA file by your Xcode with automatically signing method

Picture 2. Automatically signing on Xcode

This command will archive the project before we exported it as an IPA file.

$ cd [YOUR_RN_PROJECT]

$ npm install

$ cd ios

$ pod install

$ xcodebuild clean archive -workspace [YOUR_RN_PROJECT]/ios/[YOUR_APP_NAME].xcworkspace -scheme [YOUR_APP_NAME] -archivePath [YOUR_ARCHIVE_PATH]/[YOUR_ARCHIVE_NAME].xcarchive | xcpretty

Note! You must have plist file for exporting the IPA, and change teamID string value

After successfully archive the project, we can export it as an IPA file with this command.

$ xcodebuild -exportArchive -archivePath [YOUR_ARCHIVE_PATH]/[YOUR_ARCHIVE_NAME].xcarchive -exportPath [YOUR_BUILD_PATH] -exportOptionsPlist [YOUR_EXPORT_PLIST_PATH]/[YOUR_EXPORT_PLIST_NAME].plist | xcpretty

If there’s no error, you can found your IPA file on your [YOUR_BUILD_PATH] !! Congratulations !!

Finally, we solved the important part of this flow! As you can see in Picture 1, we build tools to make sure the system is running well. We use Go for did a lot of tasks, for the example:

Check periodically to a git repository using the task scheduler.

Running the sh file that contains all of the command from pulling the latest code.

Change the configs (auto-increment build number).

Starting building.

Upload the IPA file to Diawi (https://www.diawi.com/) for easily distributed the application.

Sending the files to Slack and mentioned to the QA team (with changelog).

You can change the service with any programming language that you are good at, for example, Python, Javascript, Ruby, Java, etc.

Picture 3. Files sending to Slack and bot mentioned the QA team with changelog

NOTED!!

For IPA files, we using diawi https://www.diawi.com/ for installing into iPhone. And our distribution method is Ad Hoc, so we already registered the whole of our team members UUID phones

Maybe, you have a lot of questions, why don’t you using the cloud? Why don’t you using Fastlane, TestFlight? The answer is, we have a limited budget, so using the cloud isn’t our option. We still can solve it by using our internal PC.

About Fastlane and TestFlight, I think we can add it to our next plan, Fastlane is good actually and TestFlight will help a lot. But, this current solution can solve our problem. So, it’s not a high priority to change the system into Fastlane and TestFlight.

Hope you enjoy it, I’m happy if this article useful for you! Happy building!

Thank you!