CI Pipeline for React Native

This post is on setting up a CI pipeline for React Native app. There are multiple options to enable continuous integration for react native apps.

Before we begin with the actual setup we should look into the options we have on setting up.

If its an Android only app we can use a windows or linux machine, but as the whole purpose of using React Native is to target IOS and Android we should use a Mac, this maybe the Mac Mini which is not used anymore or a developer’s machine.

There are several options when it comes to CI tools the famous one will be Jenkins which is commonly used, and most people are familiar with it. Here we will be using Jenkins, this post will cover setting up Jenkins and the Android builds, IOS will be a separate post.

Another tool that will be used here will be Fastlane. which does the most of the work for us.


Configuring the Mac

Follow the guide “Getting Started” in the react native documentation, follow the steps in building projects with native code,follow the macOS steps this will help you setup the development environment.

When setting up android environment make sure that you install the sdk components in a common location as we will be using the jenkins user to run the builds.This should be a path in the drive and be shared with all users in the machine.

Once the above steps are completed the machine is prepared for development.

Then download Jenkins from the official site . Download the Long Term Support version (LTS) for MacOS, as using a weekly version might not be stable for a longer run.Once the download is completed install it just by opening it.

Lets fix the first problem

If you install JDK along with android that will be a newer version and Jenkins require you to have JDK 8 (This might change in future). To fix this we will have to install JDK 8. again the minor version may change and it might be a problem, to fix this we will have to change the plist file of Jenkins.

First stop the Jenkins service

sudo launchctl unload /Library/LaunchDaemons/org.jenkins-ci.plist

The open the plist file using vi or any other editor you prefer (The location is same as above) and change the below lines and set the values for the Jenkins Home (only if you want to move it to different location) and Java Home which will be based on the version you just installed.

<dict>
<key>JENKINS_HOME</key>
<string>/Users/Shared/Jenkins/Home</string>
<key>JAVA_HOME</key>
<string>/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home</string>
</dict>

Then you will have to change the user which jenkins will run from daemon to jenkins.

<key>UserName</key>
<string>jenkins</string>

Once the changes are done the service can be started again using the below command.

sudo launchctl load /Library/LaunchDaemons/org.jenkins-ci.plist

Now that Jenkins is up and running you can access it using http://localhost:8080 which will be the default url for Jenkins. You can get the initial admin password from the below file.

sudo cat /Users/Shared/Jenkins/Home/secrets/initialAdminPassword

Once you are logged in go to the “Manage Jenkins->Configure System”, scroll down a bit and you will be able to see the “Global Properties” section. Here we will add some environment variables which are required for fastlane and our builds.

The values are the android sdk location that you set and the path variable

ANDROID_HOME : /<LOCATION>/androidsdk

PATH : /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

LANG : en_US.UTF-8

Jenkins setup is complete and the jobs can be configured now.

Fastlane should be installed to the machine as well.

The below command will install fastlane in mac

sudo gem install fastlane

Now that our mac is ready, we can setup our android project to use fastlane builds.

In order to Android apps to be built a keystore file is required. This file should be created and be placed in a shared location.

To setup fastlane for Android open terminal and navigate to the project folder and run the below commands.

cd android
fastlane init

The above command will get the required input and generate two files, the AppFile and the FastFile

Fastfile will have the lanes which will be run using from jenkins. Below is a sample fastlane file

desc "Build App"
lane :buildStg do
gradle(
task: "assemble",
build_type: "Release",
print_command: false,

properties: {
"android.injected.signing.store.file" => "/Users/Shared/Jenkins/shared/<keystorename>.keystore",
"android.injected.signing.store.password" => "<password>",
"android.injected.signing.key.alias" => "<alias>",
"android.injected.signing.key.password" => "<password>",
}
)
end

The above lane will build the apk file and will place it in the standard location.

/android/app/build/outputs/apk/release/app-release.apk

once the build is done we move it to the shared location.

When building the app there might be issues due to watchman, to fix this we will have to uninstall the watchman that is installed via brew.

brew uninstall watchman

The below steps will be carried out in the jenkins job.

  1. Checkout code
  2. Install node packages
  3. Run fastlane android build
  4. Move the apk to shared location.

The below shell script will be used to do the above.

npm install
cd android
fastlane android buildDev

Its a matter of creating a new jenkins job and connecting to your repo and running the above shell commands.

You can create another shared folder and move the apk to that location if required.

Happy Coding 😊

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade