Become a React Native DevOps developer with App Center and CodePush
Blog

Become a React Native DevOps developer with App Center and CodePush

Quan Vo (React Native)  Methodology
become-a-react-native-devops-developer-with-app-center-and-codepush.png

Table of Contents

1. Why mobile DevOps?

2. Automate your mobile app development lifecycle

3. Live update your app with CodePush

Why mobile DevOps?

Unlike other platforms, mobile is a unique environment which requires comprehensive knowledge of the development lifecycle.

Before CI/CD, mobile developers must handle many tedious works in order to deliver the app to user devices. Therefore, adopting mobile DevOps process is a game changer in the world of mobile development. It ensures smooth operations by allowing all teams to execute assigned tasks within the shortest time possible.

This article focuses on how to setup a CI/CD process with App Center and CodePush, integrating into a React Native Android app, to automate every build, test and distribute processes.

Automate your mobile app development lifecycle

Register an App Center account at: appcenter.ms

Add your mobile application. In this article, I use React Native to deploy a mobile app on Android OS.

 

Select Build section on the left menu, then select your repository service.

After successfully link App Center to your project repo, it will show your repo’s branches here. You can select and Configure build for each branch.

 

You can configure many useful tasks like:

  • lint source code
  • run unit tests
  • run custom build scripts
  • test on real devices

 

 

After automating your app’s build process, you need to sign it with a keystore in order to distribute the build version to testers and users

 

 

App Center supports three different configurations of setting up code signing for Android apps. To begin, enable the Sign builds toggle in the branch configuration. Follow and read the full documentation here:

https://docs.microsoft.com/en-us/appcenter/build/android/code-signing#setting-up-code-signing

Finally, try to push a new commit to your repo, App Center will run test and build a new version according to your configuration, then it will notify your users to download the newly created version of your app.

 

Live update your app with CodePush

 

CodePush is a cloud service that enables React Native developers to deploy mobile app updates directly to their users’ devices.

This allows you to have a more deterministic and direct engagement model with your userbase, when addressing bugs and/or adding small features that don’t require you to re-build a binary and re-distribute it through the respective app stores.

Simply put, CodePush helps you deliver live updates of your React Native app to users in the following scheme:

  • Developers make some changes in Javascript code.
  • Execute CodePush CLI to push new update to App Center (CodePush stores every JS bundle files of your app on App Center).
  • Depends on your CodePush configuration, your app will either prompt users with an update dialog or silently download a new JS bundle file and replace the old one, giving your app a fresh update.
  • In case you accidentally push an update which includes a crash, it can rollback to ensure your end users always have a functioning version of your app.

CodePush significantly reduces many repetitive tasks like:

  • Developers don’t need to rebuild any ipa, apk or aab file.
  • Developers don’t need to upload or redistribute new versions to store.
  • Users don’t need to manually download a new version from store. Instead, they receive new update on the fly.

To setup CodePush, open App Center and follow these instructions:

 

 

I strongly advise you to read the full documentation here, or clone the example code.

In this article, I focus on some frustrating issues I got when integrated CodePush into my React Native Android app.

If your app crashes with this exception:

 

→ Resolve by creating a react-native.config.js file at the root of your project with the following content:

Follow-up GitHub issue: #1666

Cannot sync new update

When calling CodePush.sync, your app not getting updated, the status you received in callback is CodePush.SyncStatus.UNKNOWN_ERROR.

Try checking Android Studio Logcat, if you see this error:

→ Resolve by override getJSBundleFile method of ReactNativeHost:

After finishing the configuration, follow this CLI documentation on how to push new updates to Staging or Production.

 

As a Leading Vietnam Software Development Outsourcing Company, we dedicate to your success by following our philosophy:

YOUR SUCCESS IS OUR MISSION.

Vietnam software development company

Contact Us