Usage of CodePush for Mobile Releases

Software Developer@ Blue Ripples Technologies

Traditional mobile app deployment requires app store approval, which takes time and slows down bug fixes or new feature releases. This is where CodePush comes into play. CodePush enables faster updates by bypassing the app store approval process, allowing you to instantly push bug fixes or new features to users without requiring them to download a new version.

What is CodePush?

CodePush is an App Center cloud service that enables React Native developers to deploy mobile app updates directly to their users’ devices. It enables you to instantly deploy JavaScript, HTML, and CSS updates, without going through the usual app store submission process. This capability is incredibly powerful for making quick changes like:

Bug fixes
UI adjustments
Minor feature enhancements

However, major updates, such as changes to native code or configurations that involve the app’s binary, will still require app store approval.

Why Use CodePush?

Faster Release Cycles: CodePush empowers developers to release updates quickly, bypassing the need for app store approval for every minor change. This is a significant advantage when working in a CI/CD (Continuous Integration/Continuous Deployment) pipeline.
Improved User Experience: CodePush enhances user experience by providing smooth and seamless updates. Users won’t need to update the app manually; changes will be applied the next time they open it.
Instant Bug Fixes: Imagine your app encountering a critical bug right after release. Instead of waiting for users to download a new version, you can push the fix directly to the app they already have.
Analytics & Rollback: CodePush also comes with built-in analytics, allowing you to track the performance of your updates. If something goes wrong, you can easily roll back to a previous stable version with minimal disruption to your users.

Getting Started with CodePush

Here’s a quick overview of how you can integrate CodePush into your React Native app:

Install the CodePush Plugin: First, install the CodePush plugin into your project:

npm install

npm install --save react-native-code-push

API Gateway

Platform Specific Configurations:

IOS

Run pod install to update CocoaPods dependencies.
add the following to <project_folder>/ios/app_name/appDelegate.m

We used Apache APISIX as our API gateway. Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, etc. APISIX provides a rich set of plugins for integrations by default. APISIX also provides the flexibility to write and integrate custom plugins. Lua is the default language to write plugins , but users can also write external Plugins in programming languages like Java, Python, and Go.

#import <CodePush/CodePush.h>

Replace source URL code for bridge for production releases with

return [CodePush bundleURL];

Add the Deployment key to <project_folder>/ios/app_name/Info.plist. (Configure deployment key mentioned in step no: 5).

<key>CodePushDeploymentKey</key> <string>PUT_YOUR_DEVELOPMENT_KEY_HERE</string>

Android

In <project_folder>/android/settings.gradle file, make the following additions:

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

In <project_folder>/android/app/build.gradle :

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

In <project_folder>/android/app/src/main/java/com/<project_folder>/MainApplication.java :

@Override protected String getJSBundleFile() { return CodePush.getJSBundleFile(); }

Add the Deployment key to <project_folder>/android/app/src/main/res/values/strings.xml. (Configure deployment key mentioned in step no: 5).:

<resources> <string name="app_name">AppName</string> <string moduleConfig="true" name="CodePushDeploymentKey"> DeploymentKey</string> </resources>

Install the App Center CLI:

npm install -g appcenter-cli

Login to App Center CLI: Log in to AppCenter through the CLI using, appcenter login and run the below command in your terminal. Then a new webpage will pop up on your browser with a token. Copy and paste it to the terminal.

appcenter login

Configure the App: CodePush requires a unique deployment key for each app environment (e.g., Staging, Production). This key can be found in the CodePush dashboard in Appcenter’s Distribute tab. Then select the settings icon in the top right corner.

Pushing Updates: Once configured, you can push updates using the CodePush CLI. Updates can be released to different environments (e.g., staging for testing and production for users).

code-push release-react <appName> <platform> --d <environment>
// eg:-
appcenter codepush release-react -a appcenter-abc.com/ABC_IOS -d Development

Syncing the App: Within your app, use the sync() function to check for updates and apply them seamlessly: Wrap your root component with the codePush component , <project_folder>/src/App.tsx

CodePush.sync({
    updateDialog: true,
    installMode: CodePush.InstallMode.IMMEDIATE
});
MyApp = codePush(MyApp) //At the bottom

When Not to Use CodePush

CodePush is ideal for releasing updates to JavaScript or asset changes. However, it cannot be used for:

Native code changes
Dependency upgrades that involve new native modules
Significant app functionality changes requiring OS permissions

Issues faced

Android

Issue: In project ‘app’ a resolved Google Play services library dependency depends on another at an exact version (e.g. “[1.3.1,2.3]”, but isn’t being resolved to that version. Behavior exhibited by the library will be unknown. Dependency failing: com.nimbusds:nimbus-jose-jwt:5.1 -> net.minidev:json-smart@[1.3.1,2.3], but json-smart version was 2.3.

Solution : In android/app/build.gradle, at the very bottom of file, after apply plugin: ‘com.google.gms.google-services’ add the following

googleServices { disableVersionCheck = true}

Visual Studio App Center Retirement

Microsoft has announced that Visual Studio App Center will be officially retired on March 31, 2025. After this date, users will no longer be able to sign in or make API calls through App Center.

What is next?

Migration Options: What are the recommended alternatives for App Center and CodePush post-retirement? Are there any tools or services you suggest for a smooth transition?

Ans:- There are alternative solutions for all App Center services like Azure Pipelines, Standalone version of codepush, etc.: https://learn.microsoft.com/en-us/appcenter/retirement

Support for Existing Projects: How will the ongoing support be managed for existing deployments until the retirement date? Will there be any changes in the level of support or service reliability as the retirement date approaches?

Ans: App Center functionality will not change before It is fully retired, and all features will continue to work without interruption.

API Access: After the retirement date, will there be any grace period or alternative means to access data or services via API?

Ans:- No, On the official retirement date (March 31, 2025), they will block sign-ins and API calls. And no longer be able to sign into the App Center web-portal nor be able to make API calls.

Data Backup and Retention: What steps should we take to ensure that our project data is safely backed up before the shutdown? Will there be any support available to assist with this process?

Ans:- For build data: download data from your build by going to: appcenter.ms > [your account or organization] > [app name] > build > [branch name] > [build number] > download

https://learn.microsoft.com/en-us/appcenter/build/troubleshooting/backup-data

CodePush Impact: Specifically, how will the retirement affect our use of CodePush for real-time updates to our applications? What are the alternative solutions available?

Ans:- It will not be affected. They have prepared a special version of CodePush to integrate into the app and run independently from App Center. The standalone version is compatible with app centre service – the same SDK is used, just configuration will need to be updated.

Communication and Updates: How will Microsoft continue to communicate updates regarding this retirement? Is there a specific channel or newsletter we should subscribe to for the latest information?

Ans:- Via blob or email. They will share the details to access the codebase and technical doc to setup our own infra and use it.

Conclusion

CodePush is a powerful tool that saves time and enhances user experience by providing smooth, seamless updates. It offers a faster, more dynamic way to push updates for React Native, Xamarin, and Cordova apps, though it is limited to JavaScript, assets, HTML, and CSS updates. Once configured, deployments and releases can be done with a single command. While it doesn’t support binary or native code changes, CodePush is highly effective for delivering bug fixes, UI updates, and other front-end changes, making it a valuable tool for mobile app development.

Usage of CodePush for Mobile Releases