Continuous delivery

Configure Gitlab CI for React Native continuous store delivery with Fastlane and Gitlab CI

This guide will help you set up a complete App Store and Google Play Store continuous delivery with Gitlab and Fastlane.

2 of 2 from the series:

React Native continuous store delivery with Fastlane and Gitlab CI

#gitlab

#react-native

#react

#fastlane

#cd

1

Context and reasoning

Continuous delivery is a powerful tool that helps your team automate your app distribution without the tedious manual builds that make you lose a considerable amount of time. In fact, compared to a team that manually delivers their apps at the end of every development cycle, a continuous delivery workflow enabled team is proved to make them [highly performant](Evidence and case studies - Continuous Delivery). I have experienced this radical shift in mindset first hands when I helped implement for one of my squads the following complete workflow.

This guide applies to React-Native only (not to native iOS and Android).

Pre-requisites

A working Gitlab installation (self hosted or on gitlab.com)
A react-native app that builds both on iOS and Android. This setup was done on React-Native 0.73.6
Make sure you have the latest version of the Xcode command line tools installed:
```
xcode-select --install
```
A machine with brew installed, ruby and gem (both are already present if you're using any recent mac version)
This installation is made on Mac OS Sonoma, it should work on Windows as well

2

Configure plugins

These plugins will ease the App Store and Google Play Store configurations.

3

## Configure Gitlab runners

4

## Configure Gitlab CI

image: node:16.20.1

stages:
  - deployiOS
  - deployAndroid

variables:
  LC_ALL: "en_US.UTF-8"
  LANG: "en_US.UTF-8"

ios:upload_testflight: # use for upload TestFight
  dependencies: []
  stage: deployiOS
  only:
    - staging-ios # run only branch staging-ios
  before_script:
    - gem install cocoapods-patch
    - gem install bundler -v 2.4.22
    - yarn
    - export PRIVATE_TOKEN=${PRIVATE_TOKEN}
    - export MATCH_PASSWORD=${MATCH_PASSWORD}
  script:
    - cd ios
    - bundle install
    - bundle exec fastlane ios beta # launch the lane beta
  tags:
    - macos # tag to launch your specific gitlab runner
  when: manual # use manual to review on gitlab before run

android:upload_internal: # use for upload Google Play
  dependencies: []
  stage: deployAndroid
  only:
    - staging-android # run only branch staging-android
  before_script:
    - yarn
    - cp ${PLAY_STORE_CREDENTIALS} android/play-store-credentials.json
    - echo -n ${PLAY_STORE_UPLOAD_KEYSTORE_FILE_BASE64} | base64 -d > ./android/release.keystore
    - echo "storeFile=release.keystore" > ./android/keystore.properties
    - echo "storePassword=${PLAY_STORE_UPLOAD_KEYSTORE_PASSWORD}" >> ./android/keystore.properties
    - echo "keyAlias=${PLAY_STORE_UPLOAD_KEYSTORE_ALIAS}" >> ./android/keystore.properties
    - echo "keyPassword=${PLAY_STORE_UPLOAD_KEY_PASSWORD}" >> ./android/keystore.properties
    - echo "sdk.dir=/<dir_to_android_sdk>/Android/sdk" >> ./android/local.properties
  script:
    - cd android
    - gem install bundler -v 2.4.22
    - bundle install
    - bundle exec fastlane android upload_internal # launch the lane upload_internal
  artifacts:
    paths:
      - ./android/app/upload.keystore
      - ./android/keystore.properties
    expire_in: 10 mins
  tags:
    - macos
  when: manual # use manual to review on gitlab before run

Explanation:

The script will run on release branch only
On iOS
On Android

5

Configure secure files

Wrapping up

When used with Gitlab CI, Fastlane can be a powerful tool to automate the delivery of your React-Native app to the stores, but one should note the setup process is not straightforward, whether it's the local configuration or the remote operations. Hopefully you can kickstart your own easily with my trials and errors. I wish there is a better tool that is more modern and more comprehensive than fastlane, as its language itself (ruby) is not familiar to a regular React-Native developer.

Inspirations and references