ReactNative uses CodePush to implement hot updates

Keywords: React Android Gradle npm

One of the advantages of ReactNative is that it can be hot updated. There are many application scenarios requiring hot update, such as:

  • The audit time of major application markets is too long
  • Some heavy business logic pages that often need to be updated
  • A relatively large App, which may be responsible for each piece by a department, cannot be pushed to a new version as soon as each department changes.
  • When app s go to cdn on their own platform, they need to consider the cost of traffic

Now let's talk about how to access CodePush in ReactNative project. If the English partner returns ok, he can directly follow the English document. Document address.

CodePush

  • Update user deployment code directly
  • Managing Alpha, Beta and Production Environment Applications
  • Support React Native and Cordova
  • Support updates of JavaScript files and image resources

Install CodePush CLI

Enter commands at the terminal: NPM install-g code-push-cli

Creating CodePush Account

Enter the command at the terminal: code-push register

After the command is entered, a web page will pop up. We can register our account on it or log in directly with GitHub. After login, the web page will return us a key. We can paste this key back to the command line.

Sign in

Login: code-push login

Other related commands: code-push logout

List token: code-push access-keys for login

Delete a key: code-push access-key RM < access key >

Register app with CodePush

Android and ios need to be registered twice:

code-push app add MyApp-Android
code-push app add MyApp-ios

The key will be returned after registration. We need to save this key.

Integrating CodePush SDk into a project

Run in the project's root directory: npm install --save react-native-code-push

Running in the Android directory: npm i -g rnpm // Generally speaking, our React will have it, after V0.27

Add a configuration file to Android: rnpm link react-native-code-push

In the process of running this command, it lets us enter the key, which is the one we just saved. Of course, it can also be done without entering it.

Configuring the Android Project

You need to check in android/app/build.gradle for the following, and if not add:

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


...
dependencies {
    ...
    compile project(':react-native-code-push')
}

You need to check in android/settings.gradle for the following, and if not add:

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

Get the deployed secret key

Run: code-push deployment LS Daily-k

Configuration

Add the following code in MainApplication.java:

...
// 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 in order 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();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            // 3. Instantiate an instance of the CodePush runtime and add it to the list of
            // existing packages, specifying the right deployment key. If you don't already
            // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}
...
// 1. Declare your ReactNativeHost to extend ReactInstanceHolder. ReactInstanceHolder is a subset of ReactNativeHost, so no additional implementation is needed.
import com.microsoft.codepush.react.ReactInstanceHolder;

public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder {
  // ... usual overrides
}

// 2. Provide your ReactNativeHost to CodePush.

public class MainApplication extends Application implements ReactApplication {

   private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);

   @Override
   public void onCreate() {
     CodePush.setReactInstanceHolder(mReactNativeHost);
     super.onCreate();
  }
}

That's all.

If you encounter any problems, please give me a question.

Posted by dirtyfrenchman on Sun, 16 Jun 2019 16:50:43 -0700