How you can Deal with Cellular CI/CD: A Arms-on Information

React Native is a well-liked framework for creating cross-platform cell apps utilizing JavaScript and the React library. This text will educate find out how to arrange a CI/CD pipeline for a React Native mission.

Steady Integration and Steady Supply/Deployment (CI/CD) is a software program growth methodology that goals to scale back the time between writing code and to ship it to customers. This consists of mechanically constructing, testing, and deploying code adjustments. This apply permits builders to rapidly and simply push new options and bug fixes to their customers with out manually constructing and deploying the code.

You possibly can arrange a CI/CD pipeline in your React Native mission utilizing numerous instruments. Widespread selections are:

CircleCI
Jenkins
TravisCI
GitLab CI/CD
GitHub Actions

On this article, we’ll focus solely on CircleCI. Nonetheless, you may apply all of the rules mentioned right here to another CI/CD instrument. Additionally, we can be utilizing yarn, however you would do the identical with npm.

Table of Contents

Organising CircleCI

You should first register on the CircleCI web site to be able to arrange a CI/CD pipeline utilizing CircleCI. Following that, you have to add a config.yml file to the circleci listing you simply created on the root of your React Native app. The directions for constructing and testing your code can be on this file. You should utilize the next instance config.yml file as a place to begin.

The construct job is the one one outlined on this config.yml file, and it performs the next actions:

First, obtain the repository’s code.
Subsequent, use yarn to put in the mission necessities.
Third, use the yarn check to run the check suite.
Lastly, use yarn construct to create the app’s manufacturing model.

This config.yml file could be modified.

  jobs:
    construct:
      docker:
        -image: circleci/node:12
      steps:
        -checkout
        -run: yarn
        -run: yarn check
        -run: yarn construct

Constructing, Testing, and Deploying Your App

Everytime you publish a change to your repository, CircleCI will mechanically construct and check your code in case your config.yml</soan> file is in place. The CircleCI dashboard means that you can view the construct standing and logs.

You possibly can proceed to the following step of deploying your code if the construct is profitable.

Relying on the distribution mechanism and goal platform (iOS or Android), quite a few methods exist to publish a React Native app (App Retailer, Play Retailer, or on to customers). Some commonplace choices obtainable:

AppCenter
Fastlane
AWS Amplify

On this article, we’ll use AppCenter to publish our iOS and Android apps to their respective app shops.

You should open an AppCenter account after which comply with the setup directions to configure it. It is advisable to embody particulars just like the identify of the app, the bundle identify, and the construct scripts. Moreover, you’ll have to add the Keystore for Android, the provisioning profiles for iOS, and the signing certificates.

It may be a irritating course of, so we now have put collectively a brief step-by-step information so you may go forward and generate the mandatory certificates, provisioning profiles, and key shops in your app.

Producing Signing Certificates and Provisioning Profiles for Your iOS App

To generate signing certificates and provisioning profiles for an iOS app, you’ll need to comply with these steps:

First, signal into your Apple Developer account at developer.apple.com/account/.
Navigate to the “Certificates, Identifiers & Profiles” part.
Within the “Certificates” part, click on on the “+” button to create a brand new certificates.
Choose the kind of certificates you wish to create:
- iOS App Growth: This certificates means that you can check your app on a bodily machine and submit it to the App Retailer for evaluate.
- App Retailer and Advert Hoc: This certificates means that you can distribute your app outdoors the App Retailer (e.g., by TestFlight) and submit it to the App Retailer for evaluate.
Comply with the prompts to generate your signing certificates. First, you have to add a Certificates Signing Request (CSR) file, which you’ll be able to generate utilizing the Keychain Entry utility in your Mac.
As soon as your certificates has been issued, obtain it, and double-click it to put in it in your Keychain.
Within the “Identifiers” part, create a brand new identifier in your app. First, you’ll need to pick a singular identifier in your app, resembling a reverse-DNS fashion string (e.g., com.instance.myapp).
Within the “Provisioning Profiles” part, click on on the “+” button to create a brand new provisioning profile.
Choose the kind of provisioning profile you wish to create:
- Growth: This profile means that you can check your app on a bodily machine and submit it to the App Retailer for evaluate.
- App Retailer: This profile means that you can submit your app to the App Retailer for evaluate.
- Advert Hoc: This profile means that you can distribute your app outdoors the App Retailer (e.g., by TestFlight).
Comply with the prompts to generate your provisioning profile. You have to to pick the signing certificates you created earlier and the app identifier you created.
As soon as your provisioning profile has been generated, obtain it and double-click it to put in it in Xcode.

You need to now be capable of use these signing certificates and provisioning profiles to construct and signal your iOS app.

Making a Keystore for Your Android App

To create a Keystore for an Android app, you’ll need to comply with these steps:

First, open a terminal or command immediate in your growth machine.
Then, navigate to the listing the place you wish to create your keystore file.
Run the next command to create a brand new Keystore file:

keytool -genkey -v -keystore my-keystore.jks -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Substitute “my-keystore.jks” along with your keystore’s desired filename and “my-key-alias” with a reputation for the important thing inside the Keystore.
You may be prompted to enter a password for the keystore and the important thing. Select a powerful password and make an observation of it, as you’ll need it each time you signal your app.
Additionally, you will be prompted to enter your private data (e.g., identify, group, and so on.). This data can be included within the certificates that’s generated in your app.
As soon as the keystore has been created, you may signal your Android app by specifying the keystore and key alias in your construct configuration.

You need to preserve your keystore file securely and make a backup copy in case the unique is misplaced or broken. Additionally, you will want to recollect the keystore password, as you’ll need it each time you signal your app.

Now that we now have all the things essential to proceed, it is time to proceed establishing AppCenter to be able to add our construct to the app shops.

Embody the under directions in your config.yml file. Then, after you have configured your app in AppCenter, it’s possible you’ll add it to your CircleCI pipeline:

  - run:
          identify: Set up AppCenter CLI
          command: |
            npm set up -g appcenter-cli
      - run:
          identify: Deploy to AppCenter (Android)
          command: |
            appcenter login --token $APPCENTER_TOKEN
            appcenter distribute launch -f $CIRCLE_ARTIFACTS/app-release.apk --group "Collaborators" --release-notes "Automated deployment from CircleCI"
      - run:
          identify: Deploy to AppCenter (iOS)
          command: |
            appcenter login --token $APPCENTER_TOKEN
            appcenter distribute launch -f $CIRCLE_ARTIFACTS/app-release.ipa --group "Collaborators" --release-notes "Automated deployment from CircleCI"

To deploy the app-release.apk and app-release.ipa information on this instance, we’re logging into AppCenter utilizing the AppCenter CLI.

The CircleCI dashboard ought to be configured with the surroundings variables $APPCENTER TOKEN and $CIRCLE ARTIFACTS.

The deployment command could be modified to satisfy your wants. For instance, to publish to the App Retailer or Play Retailer somewhat than customers instantly, it’s best to present a distinct distribution group or launch notes.

Conclusion

This text covers find out how to arrange CircleCI and AppCenter to create a CI/CD pipeline for a React Native mission. Because of this, it can save you effort and time by automating the construct, check, and deployment processes, and you’ll present your customers with new options and problem fixes extra quickly and constantly.

In the event you do not feel like going by all of the steps, you should utilize the react-native-ci bundle that may automate establishing CircleCi for you. Nonetheless, we don’t advocate it because it’s nonetheless an experimental bundle and depends on the next opinionated stack: