CI/CD For Mobile (React Native) Using Codemagic
Have you ever felt so lazy after a long day of debugging and then frustrated with the need to push your mobile artifacts to the apple app store connect or the google service account? You probably wished there was a tool that could help you from the inception (i.e. building the app) to the deployment (i.e. publishing this app to the target store) so to save yourself the whole stress of manually doing that!
I’m glad to let you know that there are tools available to help you achieve exactly that. Some examples of such tools are appcentre, buddy, codemagic to name a few. However these tools are somewhat different in terms of how the services are offered in that for some like buddy, there’s less manual scripting to be done as opposed to codemagic where you have to write the scripts to tailor them to be app specific.
For this post, we’ll take a look at how to build a react native app with Codemagic. We’re sticking with Codemagic because it offers much dexterity than the other tools in that we can bundle our android app in different formats (apk, aab, etc.), it also helps to build iOS apps as well which as at the point of writing this post, buddy doesn’t offer such. Hence, it is personally preferred because it is robust in its functions, it has an amazing support and it allows to be easily tailored to suit the needs for your app.
Codemagic UI operates with a yaml script where the workflow is defined. A workflow is simply the “script-head” under which the mobile OS (android and iOS) build command are scripted. The android and the iOS scripts can both be combined in one yaml script, though set as two different environments. I’ll quickly go through how to define each workflow and explain as much as i can each line so it can be easily replicated irrespective of the language being used to build the app. However, this is a script with a react native app as an example. Let’s dive right into the scripts already.
Android Workflow
When it comes to creating a Codemagic yaml script, there’s need to protect some variables you don’t want public. The Codemagic UI helps protect these variables by encrypting them and providing a corresponding value, these encrypted values are then inserted into the yaml script. Starting with the android scripting, below is how to create a Codemagic yaml script.
Line 7 in the snippet above is where you put the environment variable specific to your app build along with the keystore and key alias details needed for a successful build. Then we set a triggering event such that we don’t have to manually trigger a new build on each new commit made to the repository. Note that the Codemagic yaml script should always be in the root of the repository and not inside any directory. On line 19 is where we set the branch where the Codemagic file will be in. We have “branch_patterns:” where you insert the name of the branch you are working on.
The next thing is install the build dependencies on line 24 (either with npm install or yarn, app specific). After the dependency stage, the next stage is to set the sdk location on line 27 and afterwards set up the keystore values on line 29. Also at this stage, we pass in the all of the encrypted environment variables defined under the environment stage into a file in the Codemagic build env, in this case, it’s the “.env” file on line 32. The next line simply decodes the encrypted keystore file, forwarding the value to a defined directory in Codemagic build env. Afterwards, the other keystore values are defined to be used by the build environment. The next step then is to build the app, as this is a react native app, the build command is passed in a format to produce the artifact in the .aab extension. The artifacts are then stored in the directory defined in the build env. Should everything work accordingly, the next stage them will be the publishing stage where the successful build artifacts are published to the google developer account. At the publishing stage, the google service account json key is needed to grant access to Codemagic, the json key is also encrypted just as other values. If the json key is valid, then you should have a successful build time. At this point, you’ve been successfully able to fully automate your build.
iOS Workflow
For the iOS build automation, the yaml script is almost identical to the android build described above except for a few differences discussed below.
First things first for the iOS build is to insert your xcode scheme and workspace. Thereafter, insert the issuer ID, the key identifier and the encrypted values for the certificate private key and the app store connect private key. The Certificate private key can be generated locally using the command below on your terminal.
The certificate private key if not generated locally should be in the .p12 format as that’s what is useful in the Codemagic build env. The iOS scripting is quite straightforward and with the explanations done for the the android scripting, the iOS scripting should be understandable. For the publishing however, it’s important to note that the apple-id and password is the app specific id and password and not the sign-in password. The email recipient is simply for sending build notifications so it’s absolutely an optional line.
At the end of the whole scripting, the whole yaml script will look more like this;
With triggering defined on the script, you might also have to manually configure a webhook to work with your repo. That can be easily done in a few steps and the link below could help
https://docs.codemagic.io/building/webhooks/
When there’s a change to the repo as defined under the triggering stage, Codemagic automatically picks the change, initiate a new build and publishes the artifacts to the target stores.
Now that is how to configure an automated build for your mobile app, though this is react native specific, the build techniques can be tweaked for other apps and a result achieved.
Thanks for reading through, kindly drop your thoughts and opinions.
