Migrating from Codepush

This section covers how to migrate from Codepush to Stallion.

Introduction

Switching from Codepush to Stallion is incredibly straightforward, you won't face a steep learning curve, as the installation and integration steps remain nearly identical.

Step 1: Removig Codepush and Installing Stallion SDK

Remove Codepush SDK from your app and all the related settings, API keys, android/settings.gradle and android/app/build.gradle settings.

Install Stallion SDK. For more info check Installion Steps:

With npm:

npm install react-native-stallion

With Yarn:

yarn add react-native-stallion

Step 2: Do native changes in iOS and Android.

1

Android Changes

Inside MainApplication.java, override and implement getJSBundleFile method :

MainApplication.java
// ...other imports
import com.stallion.Stallion;

public class MainApplication extends Application implements ReactApplication {
  // ...rest of the class
  @Override
  protected String getJSBundleFile() {
      return Stallion.getJSBundleFile(getApplicationContext());
  }
}

If running on latest version of react-native (>v0.76)
Inside MainApplication.kt file edit the reactNativeHost method:

MainApplication.kt
// ...other imports
import com.stallion.Stallion

// ...other functions
override val reactNativeHost: ReactNativeHost =
  object : DefaultReactNativeHost(this) {
    override fun getPackages(): List<ReactPackage> =
      //other methods...

      override fun getJSBundleFile(): String? {
          return Stallion.getJSBundleFile(applicationContext)
      }
  }
2

iOS Changes

Inside ios/AppDelegate.mm file edit sourceURLForBridge method

  // ...other imports
  #import <react-native-stallion/StallionModule.h>

  @implementation AppDelegate
  // ...other implemetations
  - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
  {
      #if DEBUG
        return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
      #else
        return [StallionModule getBundleURL];
      #endif
  }

If running on latest version of react-native (>v0.76). Inside ios/AppDelegate.swift file edit the bundleURL method

 import react_native_stallion

 // ...other functions
 override func bundleURL() -> URL? {
     #if DEBUG
         RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
     #else
         StallionModule.getBundleURL()
     #endif
 }

*Run npx pod-install to install the pods and complete Stallion native installion for iOS

Step 3: Add projectId and token in native

  • Get projectID from Stallion Dashboard : On project info page, copy project id. Alt text for the image

  • Generate App Token : On project settings page click on Generate App Token to create a new app token Alt text for the image

Add StallionProjectId & StallionAppToken as shown below -

  • iOS: Add the copied App Token and projectId to info.plist Alt text for the image

  • android: Add the copied App Token and projectId to strings.xml Alt text for the image

Step 4: Do React Native changes

1

Wrap App.js inside withStallion()


   import { withStallion } from "react-native-stallion";

   const MyApp = () => {
       // Your App.js Code
   }

   export default withStallion(MyApp);

Step 5: Upload your react-native bundle

Sign in to the Stallion Console and set up your organization and project. Within your project, create a bucket—ideally, the bucket represents the feature you’re developing, and it will house all the associated bundles.

1

Install stallion-cli as dev dependency

With npm:

npm install --save-dev stallion-cli

With Yarn:

yarn add -D stallion-cli
2

Upload your bundle

npx stallion publish-bundle --upload-path=<orgname>/<project-name>/<bucket-name> --platform=<android/ios> --release-note="Migrated from CodePush"

Step 6: Promote your bundle

Return to the console and select the bucket where your bundle was uploaded. Then, choose the bundle you wish to promote, click on "Promote" and complete the necessary fields such as Target App Version and Release Note. Finally, click "Promote Bundle."

Initially, the bundle will be promoted but released to 0% of users. To test it, click on "Manage Release," change the rollout percentage to 100%, and then click "Update Release."

Tip:

For more details on distributing a release, be sure to check out the Distribution Doc.

Step 7: Verifying the release

Generate a release flavor of your app to ensure that the Metro bundler doesn't override the Stallion bundle. Launch the app so that on its first run, it downloads any available released bundle. Then, restart the app to apply the changes.

With this, your migration to Stallion is complete, enabling you to instantly scale your releases to your valued users.

Tip:

For greater control over your releases, be sure to explore the React Native OTA Best Practices blog.