cedaei.com/content/posts/React-Native-with-Gitlab-CI.md

+++ title = "React Native with Gitlab CI/CD" date = "2020-04-06" author = "Ceda EI" authorTwitter = "" #do not include @ cover = "" tags = ["react-native", "javascript", "gitlab"] keywords = ["react-native", "javascript", "gitlab", "ci", "cd"] description = "Recently, I decided to set up automated builds for Sonzai" showFullContent = false aliases = [ "/2020/04/06/React-Native-with-Gitlab-CI.html" ] +++

Introduction

The aim of setting up CI/CD is to automatically build the app on every commit and send the APK. I looked into Gitlab CI/CD for this purpose since Sonzai is already hosted on Gitlab.

Build Stage

To get started, I needed to choose a docker image in which the repo would be built. After looking around a bit, I found that the react-native-community has an official Docker image, the source of which can be found on GitHub.

Gitlab CI/CD is controlled by a versioned file in the repo: .gitlab-ci.yml. To start off, I added the build job in the file and set image to the docker image above.

stages:
    - build

build:
    image: reactnativecommunity/react-native-android
    stage: build

I needed to add the commands to be executed in order to build the app. Those commands are added under the script key as an array. In my case, I need to run yarn install to install all dependencies followed by ./gradlew assembleRelease in the android directory. The file now looks like.

stages:
    - build

build:
    image: reactnativecommunity/react-native-android
    stage: build
    script:
        - yarn install
        - cd android && chmod +x gradlew
        - ./gradlew assembleRelease

Next, once the build is done, I need to export the outputs generated in the build to be consumed by the deploy stage. This is done by adding an artifacts object which contains a path array for all the paths that need to be included in the artifacts. In this case, the outputs are in android/app/build/outputs/. The file now looks like:

stages:
    - build
    - deploy

build:
    image: reactnativecommunity/react-native-android
    stage: build
    script:
        - yarn install
        - cd android && chmod +x gradlew
        - ./gradlew assembleRelease
    artifacts:
        paths:
            - android/app/build/outputs/

The build stage is now done.

Deploy Stage

Although I could use the same image, the image is fairly large and takes time to initialize. So, I used curlimages/curl which is an alpine image with curl added and thus is really light. I will be using curl to upload the file to Telegram. Check out the documentation for bots API. Adding the deploy stage, the file looks as:

stages:
    - build
    - deploy

build:
    image: reactnativecommunity/react-native-android
    stage: build
    script:
        - yarn install
        - cd android && chmod +x gradlew
        - ./gradlew assembleRelease
    artifacts:
        paths:
            - android/app/build/outputs/


deploy_tg:
    image: curlimages/curl
    stage: deploy

I created a bot via @BotFather and added it to a channel. Next, I got the channel's chat ID. I stored the Bot Token and the channel's chat ID as variables in Gitlab's UI under Repository > Settings > CI / CD > Variables as TG_BOT_TOKEN and TG_CHAT_ID respectively.

Next, I added a curl request in the script array to make the actual request to Telegram Bot API which utilizes these variables. It also utilizes some predefined variables in Gitlab's default environment. Here is the final .gitlab-ci.yml

stages:
    - build
    - deploy

build:
    image: reactnativecommunity/react-native-android
    stage: build
    script:
        - yarn install
        - cd android && chmod +x gradlew
        - ./gradlew assembleRelease
    artifacts:
        paths:
            - android/app/build/outputs/


deploy_tg:
    image: curlimages/curl
    stage: deploy
    script:
        - >-
            curl
            -F chat_id=$TG_CHAT_ID
            -F document=@android/app/build/outputs/apk/release/app-release.apk
            -F caption=" <b>Branch</b>: <code>$CI_COMMIT_BRANCH</code>

            <b>Commit</b>: <code>$CI_COMMIT_SHORT_SHA</code>

            <b>Tag(if any)</b>: <code>$CI_COMMIT_TAG</code>


            <code>$CI_COMMIT_MESSAGE</code>"
            -F parse_mode=html
            https://api.telegram.org/bot${TG_BOT_TOKEN}/sendDocument            

Here is the first build using this.

{{< rawhtml >}}

{{< /rawhtml >}}