Best CI/CD tools for React Native
Tags: reactnative, webdev
Published: 2023-08-17 14:51:37

**Written by [Hussain Arif](https://blog.logrocket.com/author/hussain-arif/)✏️**

Continuous integration (CI) and continuous delivery (CD) pipelines are a set of automated processes that help developer teams deliver software more quickly and reliably. CI pipelines automate the process of building, testing, and deploying code, while CD pipelines automate the process of delivering that code to the end user. 

In this article, we will discuss the most popular CI/CD pipelines used by React Native developers. 

Here’s what we will discuss today:

*   [What problems does a CI/CD pipeline solve?](#problems-ci-cd-pipeline-solve)
*   [Expo App Services](#expo-app-services)
    *   [Pros and cons of EAS](#pros-cons-eas)
*   [Microsoft App Center](#microsoft-app-center)
    *   [Pros and cons of MAC](#pros-cons-mac)
*   [GitHub Actions](#github-actions)
    *   [Pros and cons of GitHub Actions](#pros-cons-github-actions)
*   [CodeMagic](#codemagic)
    *   [Pros and cons of CodeMagic](#pros-cons-codemagic)
*   [Honorable mentions](#honorable-mentions)
    *   [Bitrise](#bitrise)
        *   [Pros and cons of Bitrise](#pros-cons-bitrise)
    *   [Jenkins](#jenkins)
        *   [Pros and cons of Jenkins](#pros-cons-jenkins)
*   [Comparison table](#comparison-table)

## What problems does a CI/CD pipeline solve? <a name="problems-ci-cd-pipeline-solve">

As developers, we know that one of the most crucial steps while programming is to build, deploy and test our code. To make this happen, we can do the following:

*   Create a separate branch on our repository called `production`
*   When someone on the team commits to the branch, that team member must run a build script to create an executable file
*   Finally, the developer has to download this file on their machine and then upload it to a distribution platform. Through this platform, clients can then download and run the app

Even though this solution works, there are a few issues with this:

*   This process is tedious. In the first step, developers must first commit to the branch and then run a build script
    *   This takes up [valuable time](https://stackoverflow.com/questions/57918898/react-native-ios-build-is-taking-a-long-time) because the building process involves compiling the project, testing, and producing an artifact file
*   Furthermore, it consumes valuable resources on the local machine, which may lead to serious problems in cases where the project’s codebase is large and complex

This is the problem a [CI/CD pipeline](https://www.redhat.com/en/topics/devops/what-cicd-pipeline) comes in to solve. Let’s cover a few different options for React Native development.

## Expo App Services <a name="expo-app-services">

The [Expo Application Services (EAS)](https://expo.dev/eas) tool is geared towards React Native and Expo projects from the ground up. As a result, this means that the deployment and building process is a walk in the park — it is the easiest tool on this list to work with because it only requires a few commands to get up and running: ![Expo App Services dashboard](http://blog.logrocket.com/wp-content/uploads/2023/07/expo-app-services-dashboard.png) For example, to build and publish, all we need to do is the following:

```bash
npm install --global eas-cli
npx eas-login # sign into the service
eas build:configure # this will generate an eas.json file
# this file will allow you to configure your building process.
```

For more information on deployment and build configuration, navigate to [Expo’s documentation](https://docs.expo.dev/build/setup/).

### Pros and cons of EAS <a name="pros-cons-eas">

Here are some of the things I like about EAS:

*   It’s the easiest option to host and deploy apps, especially if they’re built with Expo
*   Developers provide an option to host the [Expo Build process on your server](https://docs.expo.dev/build-reference/local-builds/), but consequently, it is suited for companies where the project’s code has to be kept private
*   Handles the stressful stuff for you, like signing certificates and keystore files, which saves a lot of engineering time and effort
*   Provides extensive documentation in case you need help
*   Supports both Expo and React Native apps

Here are the cons:

*   The free tier is limited if builds are frequent
*   During peak hours, you might have to wait a bit for your builds to complete on the free tier, which might be a problem if you’re on a tight deadline
*   As of writing this article, running [E2E tests](https://docs.expo.dev/build-reference/e2e-tests/) is in an early state, though support continues to develop

## Microsoft App Center

[Microsoft App Center (MAC)](https://appcenter.ms/apps) is a CI/CD platform dedicated to app development. Unlike Expo Application Services, it supports both React Native and other cross-platform technologies like Unity and Xamarin. 

Here’s what it looks like: ![Microsoft App Center dashboard](http://blog.logrocket.com/wp-content/uploads/2023/07/microsoft-app-center-dashboard.png) Building an app on App Center is a bit involved, but it is still straightforward. First, upload your project on GitHub, Azure, or another code hosting platform: ![Select a service in Microsoft App Center](http://blog.logrocket.com/wp-content/uploads/2023/07/select-service-mac.png) Next, specify the project’s location in App Center’s settings: ![Specify the project location in MAC ](http://blog.logrocket.com/wp-content/uploads/2023/07/specify-project-location-mac.png) Finally, the service will then ask you to configure your build settings. You also might have to generate and [upload a keystore file in this step](https://developer.android.com/studio/publish/app-signing#generate-key). 

That’s it! When that’s done, the pipeline will start building the app for you.

### Pros and cons of MAC <a name="pros-cons-mac">

Microsoft App Center has some significant strengths that stand out among the competition. 

It can run a test to verify whether the app can launch successfully. It is particularly useful in situations where you need to ensure the functionality of a new build. 

With this feature, you can verify this without manually running the app on a mobile device: ![Build verification is device-optional](http://blog.logrocket.com/wp-content/uploads/2023/07/build-verification-device-optional.png) Here are a few other pros worth mentioning:

*   The free tier is generous. In many cases, it is enough for personal and small-scale projects, but the service also provides a 30-day free trial for their paid tier
*   Provides clear and exhaustive documentation
*   Supports end-to-end tests
*   Widely used in enterprise environments, so extensive support is available from the community

However, there were some things that I found unappealing:

*   No option to run builds on local infrastructure. As discussed before, this might be a problem in situations where source code privacy is important
*   Paid option may be too expensive for small startups
*   E2E tests are locked behind a paywall
*   As of writing this article, [Microsoft doesn’t support Expo apps](https://github.com/microsoft/appcenter/issues/189)

## GitHub Actions

[GitHub Actions](https://github.com/features/actions) is a prominent option among numerous open-source programmers. One reason for its popularity is that this tool integrates with GitHub, so developers can use it to automate their workflows directly from their GitHub repository: ![GitHub Actions can be deployed from your repository](http://blog.logrocket.com/wp-content/uploads/2023/07/github-actions-repository.png) Although building an app on GitHub Actions is tricky, it provides greater control over the building process as compared to other platforms, thus making it a worthwhile trade-off. 

To deploy with GitHub Actions, create a folder in your repo called `.github/workflows`. There, create a new file called `ci.yml`: ![Create a new file called ci.yml in your repo](http://blog.logrocket.com/wp-content/uploads/2023/07/new-file-ci-yml.png) This tells GitHub that our project will use GitHub Actions for deployment. After this step, follow the [instructions in this LogRocket article](https://blog.logrocket.com/react-native-ci-cd-using-github-actions/) to build a CI/CD pipeline using GitHub Actions in React Native.

### Pros and cons of GitHub Actions <a name="pros-cons-github-actions">

Here are some of the reasons why this pipeline service might be suitable for you:

*   The service allows for more control, which means that you can add tests and even change your build agent
*   Its free tier is more than enough for personal projects. Moreover, GitHub even issues [Pro accounts for students](https://education.github.com/pack), which allows them to upgrade to a paid option for free
*   Other than building apps, GitHub Actions can also run [automated code quality checks](https://github.com/marketplace/actions/sonarqube-scan). This is suitable in situations where you want to detect code smells and bugs in your project before deployment
*   The [s](https://docs.github.com/en/actions/hosting-your-own-runners/managing-self-hosted-runners/about-self-hosted-runners)[elf-hosted runners feature](https://docs.github.com/en/actions/hosting-your-own-runners/managing-self-hosted-runners/about-self-hosted-runners) allows companies to host their version of Actions on local infrastructure. As discussed before, this is great for private code repositories
*   The free tier allows for [end-to-end tests](https://remarkablemark.org/blog/2023/02/18/how-to-run-react-native-detox-tests-on-github-actions/)

However, as compared to other platforms, here are some things that I didn’t like:

*   The process of building a CI/CD pipeline is too involved. In some cases, it might be too complex for beginners who are looking to deploy their app
*   GitHub Actions does not have dedicated documentation for React Native apps. Because of this, you might have to rely on the community for help

## CodeMagic

[CodeMagic](https://codemagic.io/start/) is another CI/CD pipeline specifically geared towards mobile app development frameworks, including [Flutter](https://blog.logrocket.com/tag/flutter), Cordova, Ionic, and others: ![The CodeMagic dashboard](http://blog.logrocket.com/wp-content/uploads/2023/07/codemagic-dashboard.png) Just like Expo and Microsoft’s App Center, deploying and building your React Native app is fairly easy. To get started, create a file called `codemagic.yml` in your React Native app, and write the following code:

```yaml
workflows:
    sample-workflow:
        name: Codemagic Sample Workflow
        max_build_duration: 120
        instance_type: mac_mini_m1
```

This tells the pipeline that our build will use [Apple’s M1 Mac machine](https://blog.logrocket.com/how-to-set-up-m1-macbook-web-development/) for deployment 

After this step, it’s best to head to [CodeMagic’s documentation](https://docs.codemagic.io/yaml-quick-start/building-a-react-native-app/) to learn how to build and deploy your project.

### Pros and cons of CodeMagic <a name="pros-cons-codemagic">

Here are some of the things I loved about it:

*   Their servers use Apple’s M-series machines, which leads to [rapid build times](https://www.jeffgeerling.com/blog/2021/apple-m1-compiles-linux-30-faster-my-intel-i9)
*   CodeMagic uses a pay-as-you-go model, which means that you only pay for the resources you use. In some cases, this might be a cheaper option as compared to other services in this list
*   Amazing documentation with step-by-step guides
*   Supports [end-to-end tests](https://docs.codemagic.io/yaml-testing/testing/) on the free tier

However, there were some things that I didn’t like about it:

*   Does not have a self-hosted option, which can be a problem for privacy-sensitive code

## Honorable mentions

Professional mobile developers also widely use other CI services, such as Bitrise and Jenkins CI. Since these services have compilation steps similar to Microsoft App Center, we won't discuss their building processes here.

### Bitrise

Just like CodeMagic, this service is geared towards mobile app development. Furthermore, it supports [add-ons](https://devcenter.bitrise.io/en/references/bitrise-add-ons.html) to help in development with, for example, [debug reports](https://devcenter.bitrise.io/en/testing/test-reports.html) or [release management](https://devcenter.bitrise.io/en/release-management.html). ![The Bitrise dashboard](http://blog.logrocket.com/wp-content/uploads/2023/07/bitrise-dashboard.png)

#### Pros and cons of Bitrise <a name="pros-cons-bitrise">

Here are some aspects of Bitrise that might make it a appealing option:

*   Rapid build times: Just like CodeMagic, this also supports Apple’s M series machines to compile and build code
*   Pay-as-you-go model: The biggest upside to this service is that you can save money by only paying for the resources you use
*   Supports [end-to-end tests](https://devcenter.bitrise.io/en/testing.html) on the free tier

However, there were some flaws that might be a deal-breaker to some:

*   Does not provide a self-hosted option

### Jenkins

Jenkins is another pipeline service that is targeted towards enterprises and large businesses. This is because the software is completely self-hosted. As discussed before, this is great for situations where the project’s source code has to be kept private. ![The Jenkins dashboard](http://blog.logrocket.com/wp-content/uploads/2023/07/jenkins-dashboard.png)

#### Pros and cons of Jenkins <a name="pros-cons-jenkins">

One major factor that made me like Jenkins was that it is completely self-hosted. Because of this, Jenkins is a popular tool among larger businesses. This is because self hosting allows companies to avoid spending money on expensive tiers and instead use local hardware. 

However, this comes at a cost: maintaining and making sure your Jenkins host remains secure might be a hassle for some teams.

## Comparison table

Here is a small table that summarizes all pros and cons of all platforms discussed in this article:

<table>

<thead>

<tr>

<th>Tool</th>

<th>Key Features</th>

<th>Pros</th>

<th>Cons</th>

<th>Pricing</th>

</tr>

</thead>

<tbody>

<tr>

<td>Expo Application Services</td>

<td>Built for React Native and Expo projects</td>

<td>

Easiest to deploy, Handles certificates and keystore files, Extensive documentation

</td>

<td>

Limited free tier, Peak hours may require waiting, Early state of E2E tests

</td>

<td>Free tier & Paid tiers</td>

</tr>

<tr>

<td>Microsoft App Center</td>

<td>Supports multiple platforms, including React Native</td>

<td>

Generous free tier, Runs app launch tests, E2E tests support, Extensive documentation

</td>

<td>

No local infrastructure, Can be costly for startups, E2E tests behind paywall, No support for Expo apps

</td>

<td>Free tier & Paid tiers</td>

</tr>

<tr>

<td>GitHub Actions</td>

<td>Integrates directly with GitHub repository</td>

<td>

More control, Pro accounts for students, Automated code quality checks, Self-hosted runners, E2E tests on the free tier

</td>

<td>

Complex setup, Lacks dedicated documentation for React Native

</td>

<td>Free tier & Paid tiers</td>

</tr>

<tr>

<td>CodeMagic</td>

<td>Specifically geared towards mobile app frameworks</td>

<td>

Uses Apple's M-series machines, Pay-as-you-go model, Extensive documentation, E2E tests on the free tier

</td>

<td>No self-hosted option</td>

<td>Pay-as-you-go</td>

</tr>

<tr>

<td>Bitrise</td>

<td>Built for mobile apps, Uses Apple's M-series machines</td>

<td>

Rapid build times, Pay-as-you-go model, Great documentation, E2E tests on the free tier

</td>

<td>No self-hosted option</td>

<td>Pay-as-you-go</td>

</tr>

<tr>

<td>Jenkins CI</td>

<td>Completely self-hosted, no online hosting option available</td>

<td>

Great for maximum privacy and security, Completely free

</td>

<td>Maintaining and hosting of the CI server on local infrastructure can be a pain</td>

<td>Free</td>

</tr>

</tbody>

</table>

## Conclusion

In this article, we briefly discussed some popular CI/CD platforms for React Native and why they are crucial in the programming world. We also included some honorable mentions, [Jenkins CI](https://www.jenkins.io/) and [Bitrise](https://bitrise.io/), in our comparison table. It is important to remember that every project is different, and therefore it is important to evaluate each tool’s advantages and disadvantages. 

In my projects, I typically use Expo Services because it is incredibly easy to set up and use, and its free tier is more than enough for my needs. Thank you so much for reading!

---

## [LogRocket](https://lp.logrocket.com/blg/react-native-signup): Instantly recreate issues in your React Native apps.

[![LogRocket Signup](https://blog.logrocket.com/wp-content/uploads/2021/10/react-native-plug_v2-2.png)](https://lp.logrocket.com/blg/react-native-signup)

[LogRocket](https://lp.logrocket.com/blg/react-native-signup) is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — [try LogRocket for free](https://lp.logrocket.com/blg/react-native-signup).