CodePush profile

As a cross-platform application development framework, React Native provides the foundation for dynamic updates, but the dynamic update technology is not as complete as expected. Fortunately, Microsoft has developed CodePush to fill the gap in dynamic updates for React Native apps.

CodePush is a hot update service for React Native and Cordova. With CodePush, developers can deploy mobile app updates and quickly implement hot updates to their code. CodePush official address to https://microsoft.github.io/code-push/.

CodePush acts as a central repository where developers can push updates in real time, and client applications can then query updates when the application launches. With CodePush, application defects can be resolved and new features added without the need to re-audit and install the application. CodePush supports the following features: • Direct deployment of code updates to users; • Manage Alpha, Beta and production applications; • Support cross-platform hot updates for React Native and Cordova; • Support JavaScript files and image resources update;

CodePush installation with account registration

To use CodePush, you need to install the CodePush command line tool and register the CodePush account and application. The installation command is as follows:

  npm install -g code-push-cli
Copy the code

After the installation, you can run the code-push -v command to verify the installation. Then, enter code-push register on the terminal. The registration page is displayed for developers to select an authorized account, as shown in Figure 11-11.

code-push app add <appName> <platform> react-native
Copy the code

AppName indicates the name of an application, and Platform indicates the platform of an application. You can register an application by entering a command on the terminal, as shown in Figure 11-13.

Integrated CodePush SDK

After creating the CodePush account and registering the app, you need to integrate the CodePush SDK into the React Native app. First, create a React Native project using the react-native init command as follows:

react-native init codepush
Copy the code

Install the react-native code-push plugin with the following command:

npm install --save react-native-code-push
Copy the code

Then run the link command to add the react-native code-push plug-in to the native project, as shown below:

react-native link react-native-code-push
Copy the code

At this point, the system will prompt you to Enter the Deployment key of the iOS and Android application, and then Enter the application Staging. If you do not Enter the application Staging, you can directly press [Enter] to skip it, as shown below:

? What is your CodePush deployment key for Android (hit <ENTER> to ignore)
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore)
Copy the code

If you have forgotten the Deployment key, run the following command, as shown in Figure 11-14.

Manually integrate the CodePush SDK

If you skip the deployment key input when using the React-Native link to link the native library, you can also manually configure it on the native side. For iOS, use Xcode to open the iOS PROJECT in the iOS /codepush. xcodeProj directory, and then select the PROJECT under PROJECT in the Xcode navigation view. Then select Info → Configurations → Add → Duplicate Release Configuration and enter the Staging key, as shown in Figure 11-15.

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

Then associate the react-native code-push library dependencies in the app/build.gradle file as follows:

apply from: ".. /.. /node_modules/react-native-code-push/android/codepush.gradle" dependencies { compile project(':react-native-code-push') }Copy the code

Next, register CodePush in the getPackages() method of the MainApplication class as follows:

@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}
    
@Override
public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
}

@Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               new CodePush(BuildConfig.codepushkey,getApplicationContext(), BuildConfig.DEBUG)
            );
        }
Copy the code

Since the deployment-key of CodePush is divided into production and test environments, it can be set in the build.gradle file as follows:

android {
    
     releaseStaging {
        buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
        }
 
     release {
        buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
        }
    }
}
Copy the code

At this point, the Native configuration required for CodePush hot updates is complete, and the React Native logic needs to be modified.

Example of iOS application hot update

Open the ios/codepush.xcodeproj file with Xcode, and then open the Appdelegate. m file.

#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [CodePush bundleURL];
#endif
}
Copy the code

As can be seen from the above code, in the non-debug state, the default resource address loaded by the system is the bundleURL of CodePush. In order to load the Bundle resources of CodePush, you need to manually change the compilation option to Release. Specifically, open the menu of Xcode, and then select [Product] → [Scheme] → [Edit Scheme], as shown in Figure 11-19.

import React, {Component} from 'react'; import {AppRegistry, Platform, StyleSheet, Text, View} from 'react-native'; import {name as appName} from './app.json'; import codePush from 'react-native-code-push' type Props = {}; export default class App extends Component<Props> { constructor(props) { super(props); this.state = { message: '' }; } componentDidMount() {codepush.checkForUpdate ().then((update) => {if (update) {this.setState({message: 'New update! '})} else {this.setState({message: 'already updated, no need to update! } render() {return (<View style={styles.container}> <Text style={styles.welcome}> version 1.0</Text> <Text style={styles.instructions}>{this.state.message}</Text> </View> ); }} / / omit the style file AppRegistry. RegisterComponent (appName, () = > codePush (App));Copy the code

As shown above, the componentDidMount lifecycle function checks if the CodePush application needs to be updated, and if so, downloads the CodePush application’s updates. The application is recompiled and run, as shown in Figure 11-21.

Render () {return (<View style={styles.container}> <Text style={styles.welcome}> version 1.1</Text> <Text style={styles.instructions}>{this.state.message}</Text> </View> ); }Copy the code

Next, use CodePush’s code-push release command line tool to release the iOS update, as shown below:

code-push release-react codepush ios
Copy the code

Wait for the system to package and release the bundle file for hot updates. After the bundle is successfully released, close and restart the application. You can see the update message when the application is started, as shown in Figure 11-22.