Implementing Code Push in React Native Application

Code push is a Microsoft appcenter service that helps you to change your application’s code, release it, and have your users get the new version almost immediately. It doesn’t require the end-user to upgrade to a new version from the app store.

It’s important to remember that there are certain limitations for the code push upgrade ,only the JavaScript bundle can be altered with the service and all the native functionalities need to be released with the traditional store updates.

Without further delay let’s implement the code push in our app in simple steps:

1) Install the appcenter CLI and code push CLI for react-native

npm install -g appcenter-cli
npm install --save react-native-code-push

2) Simply wrap the root component of the app with a HOC from code push

3) Next , go to the appcenter and create a new application for android and iOS platforms.

Once the app has been created ,the app will list the number of steps to integrate the SDK for corresponding platforms . Follow the below steps for the SDK integrations

IOS SDK Integration

1. Run cd ios && pod install && cd .. to install all the necessary CocoaPods dependencies.
2. Open up the AppDelegate.m file, and add an import statement for the CodePush headers

#import <CodePush/CodePush.h>

3. Find the following line of code, that sets the source URL for bridging the production releases:

return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

4. Replace it with this line:

return [CodePush bundleURL];

5. sourceURLForBridge method should look like this:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

6. Add the Deployment key to Info.plist: To let the CodePush runtime know which deployment it should query for updates against, open your app's Info.plist file and add a new entry named CodePushDeploymentKey, these keys can be found under the distribute section in app center.

Android SDK Integration

1. In your 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')

2. In your android/app/build.gradle file, add the codepush.gradle file as an additional build task definition underneath react.gradle:

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

3. Update the MainApplication.java file to use CodePush via the following changes:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

4. Add the Deployment key to strings.xml:

To let the CodePush runtime know which deployment it should query for updates, open your app’s strings.xml file and add a new string named CodePushDeploymentKey

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

4) Releasing Updates

Once your app is configured and distributed to your users, and you have made some JS or asset changes, it’s time to release them. The recommended way to release them is using the release-react command in the CodePush CLI, which bundles your JavaScript files, asset files, and release the update to the CodePush server.

appcenter codepush release-react -a <ownerName>/<appName>
appcenter codepush release-react -a <ownerName>/MyApp-iOS
appcenter codepush release-react -a <ownerName>/MyApp-Android

Wrapping up

CodePush gives you plenty of room when it comes to fixing bugs and making code changes. It provides great flexibility for handling code updates and gives you control over when to install them. That being said, it also adds another dimension of complexity when it comes to the native side.