Skip to main content

CodePush SDK

This section provides comprehensive guidance on how to integrate the Appcircle CodePush SDK into your React Native project, enabling seamless over-the-air (OTA) updates that improve user experience by delivering updates without requiring users to download a new version from the app store.

@appcircle/react-native-code-push
React Native plugin for the CodePush service. Latest version: 0.0.1, last published: a month ago. Start using @appcircle/react-native-code-push in your project by running `npm i @appcircle/react-native-code-push`. There are no other projects in the npm registry using @appcircle/react-native-code-push.
www.npmjs.com
Preview of @appcircle/react-native-code-push

React Native Project Integration​

To start using the Appcircle CodePush feature, the first step is to integrate the Appcircle CodePush SDK into your project. You can do this by installing the SDK directly via npm or by adding the dependency to your package.json file.

To install the SDK using the command line, run the following command in the root directory of your project.

npm i @appcircle/react-native-code-push

Using package.json file to add the SDK: Add the SDK to dependencies section in your package.json file.

"dependencies": {
    "@appcircle/react-native-code-push": "0.0.2-alpha.3",
    
    //Other Dependencies here
}

Note: If you add the SDK directly to your package.json file instead of using the command line, you must run npm install in the project directory afterwards to install the dependency.

CodePush Configurations in Project​

To ensure that your app receives the correct updates, you must configure the appropriate deployment key in your project. Each deployment channel created in Appcircle has a unique key, which must be specified in your CodePush configuration. This allows your app to connect to the correct environment, such as Staging or Production.

To ensure that apps can properly receive updates, the Server URL and Deployment Key must be correctly added to the native code of your project. For more information, please visit the Deployment Keys documentation.

Instructions on how to add these configurations for both iOS and Android platforms are provided below.

Server URL

If you are using a self‑hosted version of Appcircle, use the ServerURL value defined for your self‑hosted instance.
For Appcircle Cloud, the ServerURL is https://api.appcircle.io/codepush.

<key>CodePushServerURL</key>
    <string>https://api.appcircle.io/codepush</string>

<key>CodePushDeploymentKey</key>
    <string>YOUR_DEPLOYMENT_KEY</string>

SDK Installation and Configuration for React Native 0.60 version and above (iOS)​

Follow the installation steps below to use the CodePush SDK in your iOS applications.

  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>

  1. Find the following line of code, which sets the source URL for bridge for production releases:
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  1. Replace it with this line:
return [CodePush bundleURL];

This change configures your app to always load the most recent version of your app's JS bundle. On the first launch, this will correspond to the file that was compiled with the app. However, after an update has been pushed via CodePush, this will return the location of the most recently installed update.

Your sourceURLForBridge method should look like this:

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

SDK Installation and Configuration for React Native 0.74 version and above (Android)​

  1. In your android/settings.gradle file, make the following additions at the end of the file:
include ':app', ':appcircle_react-native-code-push'
project(':appcircle_react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/@appcircle/react-native-code-push/android/app')
  1. In your android/app/build.gradle file, add the codepush.gradle file as an additional build task definition to the end of the file:
apply from: "../../node_modules/@appcircle/react-native-code-push/android/codepush.gradle"
  1. Update the MainApplication file to use CodePush via the following changes:

Update the MainApplication.kt.

// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush


class MainApplication : Application(), ReactApplication {

override val reactNativeHost: ReactNativeHost =
    object : DefaultReactNativeHost(this) {
        ...

        // 2. Override the getJSBundleFile method in order to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        override fun getJSBundleFile(): String {
            return CodePush.getJSBundleFile() 
        }
    };
}
danger

Appcircle CodePush does not currently support the new Architecture on Android. In order to use this plugin on React Native versions starting from 0.74 you will need to opt out from the new Architecture. React Native CodePush support for the new Architecture is in progress.

Update the android/gradle.properties file opt out the new Architecture.

newArchEnabled=false

SDK Installation and Configuration for React Native 0.73 version and below (Android)​

If you are using React Native version 0.73 or earlier, you need to use the Microsoft CodePush SDK to enable Appcircle CodePush functionality. To integrate it into your application, please follow the official documentation:

github.com
No description available
github.com
Preview of github.com

Make sure to add the Appcircle Server URL and Deployment Key correctly in your strings.xml file.

SDK Integration and Basic Usage​

After installing the SDK, you need to import and configure it within your React Native project. Below is a basic example of how to use the Appcircle CodePush SDK:

Wrap your root component with the CodePush higher-order component:

  • For class component
import CodePush from '@appcircle/react-native-code-push';

class MyApp extends Component {
}

MyApp = codePush(MyApp);
  • For functional component
import CodePush from '@appcircle/react-native-code-push';

let MyApp: () => React$Node = () => {
}

MyApp = codePush(MyApp);

If you would like your app to discover updates more quickly, you can also choose to sync up with the CodePush server every time the app resumes from the background.

  • For class component
let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

class MyApp extends Component {
}

MyApp = codePush(codePushOptions)(MyApp);
  • For functional component
let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

let MyApp: () => React$Node = () => {
}

MyApp = codePush(codePushOptions)(MyApp);

Alternatively, if you want fine-grained control over when the check occurs (such as a button press or timer interval), you can call CodePush.sync() at any time with your desired SyncOptions. You can also disable CodePush’s automatic checking by setting the checkFrequency to manual.

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };

class MyApp extends Component {
    onButtonPress() {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.onButtonPress}>
                    <Text>Check for updates</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

MyApp = codePush(codePushOptions)(MyApp);

This configuration ensures that your app checks for updates when it starts, and installs them on the next app restart. You can customize the behavior further using CodePush options based on your needs.