How to Migrate from CodePush to React Native OTA Hot Update?

Tuan Levi — Mon, 13 Jan 2025 08:36:18 +0000

Why Migrate from CodePush?

CodePush has been a reliable solution for managing over-the-air updates in React Native apps, allowing developers to push updates directly to users without requiring a full app store release. However, with CodePush heading toward retirement, it’s essential to find a modern alternative to continue seamless updates for your users.

Enter React Native OTA Hot Update—a flexible, developer-friendly solution that gives you full control over your update process. Whether you want to host your updates on a Git repository or manage them via your own server, this library empowers you to streamline your workflow while retaining the functionality you loved in CodePush.

Key Benefits of React Native OTA Hot Update

Git or Server Hosting: Choose between hosting updates on Git or your server, depending on your infrastructure and needs.
Control Versioning: Manage your update versions yourself with minimal configuration.
Seamless User Experience: Updates are downloaded and applied without disrupting the user experience.
Backward Compatibility: Works with both new and old React Native architectures.

Step-by-Step Guide to Migrate from CodePush

1. Install React Native OTA Hot Update

Run the following commands to install the library and its dependencies:

yarn add react-native-ota-hot-update
yarn add react-native-blob-util

For iOS, make sure to run:

cd ios && pod install

2. Configure Your App

iOS

Edit your AppDelegate.m file:

#import "OtaHotUpdate.h"

...

#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [OtaHotUpdate getBundle]; // Add this line
#endif

Android

Edit your MainApplication.java file:

import com.otahotupdate.OtaHotUpdate;

...

@Override
public String getJSBundleFile() {
    return OtaHotUpdate.bundleJS;
}

Ensure AndroidManifest.xml includes the following permissions:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

3. Choose Your Update Hosting Method

Option 1: Git Repository

Set up a Git repository to host your JS bundle files.
Add the following scripts to your package.json for bundling:

"scripts": {
  "export-android": "mkdir -p android/output && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/output/index.android.bundle --assets-dest android/output",
  "export-ios": "mkdir -p ios/output && react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/output/main.jsbundle --assets-dest ios/output"
}

Push the bundle files to your Git repository:

git add .
git commit -m "Initial commit with bundle files"
git push origin main

Example Code for Pulling Updates:

hotUpdate.git.checkForGitUpdate({
  branch: Platform.OS === 'ios' ? 'iOS' : 'android',
  bundlePath: Platform.OS === 'ios' ? 'output/main.jsbundle' : 'output/index.android.bundle',
  url: 'https://github.com/<your-username>/OTA-bundle.git',
  onPullSuccess() {
    Alert.alert('Update downloaded!', 'Restarting app...');
    hotUpdate.resetApp();
  },
});

Option 2: Server Hosting

Upload your JS bundles and a versioning JSON file (e.g., update.json) to your server:

{
  "version": 1,
  "downloadAndroidUrl": "https://example.com/index.android.bundle.zip",
  "downloadIosUrl": "https://example.com/main.jsbundle.zip"
}

Use the following script to fetch and apply updates:

hotUpdate.downloadBundleUri(ReactNativeBlobUtil, url, version, {
  updateSuccess: () => {
    console.log('Update applied!');
  },
  updateFail: (message) => {
    Alert.alert('Update failed!', message);
  },
  restartAfterInstall: true,
});

4. Test Your Migration

Remember, hot updates only work in release mode. Build your app for release, and test the update flow using both Git and server methods to ensure everything works as expected.

Final Thoughts

Migrating from CodePush to React Native OTA Hot Update ensures your app remains agile and user-friendly. By hosting updates on Git or your own server, you can tailor the process to fit your project’s needs while maintaining control over the update flow.

Have questions or need help with implementation? Feel free to reach out or explore the documentation.

DEV Community: Tuan Levi