1. Basic usage process

1. Login

appcenter login
Copy the code

After entering the command, the browser will start, copy the token on the page to the command line, and press Enter.

2. Create the App

/ / groupName is optional, The default account is appCenter apps create -d <appDisplayName> -o <operatingSystem> -p <platform> // For example, appCenter apps create -d HotProject -o Android -p React-NativeCopy the code

Note: You need to use ios to create ios, pay attention to case!

3. Create a deployment

appcenter codepush deployment add -a <ownerName>/<appName> Staging
appcenter codepush deployment add -a <ownerName>/<appName> Production
Copy the code

Executing the above command creates test deployment Staging and Production and generates the corresponding keys:

You can run the following command to view the deployment:

appcenter codepush deployment list -a <ownerName>/<appName>
Copy the code

You can run the following command to view keys corresponding to different deployments:

appcenter codepush deployment list -a <ownerName>/<appName> -k
Copy the code

Such as:

4. Release updates

appcenter codepush release-react -a <ownerName>/<appName> -d <deploymentName> -t <targetBinaryVersion> 
[-t|--target-binary-version <targetBinaryVersion>] 
[-o|--output-dir] 
[-s|--sourcemap-output]
[--plist-file-prefix] 
[-p|--plist-file] 
[-g|--gradle-file] 
[-e|--entry-file] 
[--development] 
[-b|--bundle-name <bundleName>]
[-r|--rollout <rolloutPercentage>] 
[--no-duplicate-release-error] 
[-k|--private-key-path <privateKeyPath>] 
[-m|--mandatory] 
[-x|--disabled]
[--description <description>] 
[-d|--deployment-name <deploymentName>] 
[-a|--app <ownerName>/<appName>] 
[--disable-telemetry] 
[-v|--version]
Copy the code

For example, releasing a Staging version update:

Appcenter codePush releasereact-a <ownerName>/HotProject -t 1.0.0 -d Staging -m --descriptionCopy the code

Results:

View deployment updates:

appcenter codepush deployment history -a <ownerName>/HotProject Staging
Copy the code

Results:

Push updates published in the Staging environment to Production:

appcenter codepush promote -a <ownerName>/HotProject -s Staging -d Production -t "*"
Copy the code

Results after execution:

Check the Production environment deployment and find that this update has been released:

2. Android and ios Configuration Configure multiple environments

Introduce the react-native code-push library before doing the following:

yarn add react-native-code-push
Copy the code

If RN is less than 60, you need to manually configure the link to the Android side. If RN is more than 60, you do not need to manually configure the link.

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

If you are not sure whether code push has been automatically configured, check the settings.gradle file of your Android project to see if the following configuration exists:

include ':app', ':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

1.Android project configuration

You can directly configure the configuration according to the official document to ensure that the configuration is available and up-to-date. The official document address is as follows.

Github.com/microsoft/r…

Of course, you can also refer to my configuration as follows:

1. Configure the key required by CodePush in Android project, including Staging (test environment) and Production (Production environment). Open app/build.gradle and add the following configuration under Buildtypes:

Release {resValue "string", "CodePushDeploymentKey", '"Production environment key"'} releaseStaging {resValue "string", "CodePushDeploymentKey", '" key of the Staging environment "' matchingFallbacks = ['release']}Copy the code

Also, inside android{}, add the following code:

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

2. Add the following code to mReactNativeHost in MainApplication:

@Nullable
@org.jetbrains.annotations.Nullable
@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}
Copy the code

Remember to guide the package:

import com.microsoft.codepush.react.CodePush;
Copy the code

At this point, the configuration is complete, and you can test with releaseStaging package. After the test passes, release with Production.

2. The ios configuration

Github.com/microsoft/r…

1. Configure Appdelegate. m (note RN version)

Return [[NSBundle mainBundle] URLForResource:@"main" withexBundle :@" jsBundle "]; Return [CodePush bundleURL] instead;Copy the code

2. Configure the Staging and Production environments based on the official documents.

Matters needing attention: During the test package, you can set Staging and Production by switching between Staging and Release in edit schema to differentiate the environment. For the test, it is recommended to set Staging to the test, and then package the test and run the test on adHoc. Switch to Release for hot updates.

3. Js configuration

1. Check for updates

componentWillUnmount() { CodePush.disallowRestart(); } componentDidMount() {codepush.allowRestart (); // Restart this.checkhotupDate () after loading; SyncImmediate () {codepush. sync({// Install mode //ON_NEXT_RESUME the next time it returns to the foreground //ON_NEXT_RESTART the next time it restarts //IMMEDIATE updates InstallMode: CodePush. InstallMode. IMMEDIATE, updateDialog: {/ / display update description appendReleaseDescription: true, / / update the description of the prefix. Defaults to "Description" descriptionPrefix: "update content:", / / forced update button text, the default for the continue mandatoryContinueButtonLabel: "update now", / / updated information. Default is "An update is available that must be installed." mandatoryUpdateMessage: "Must be updated to use,", / / optional updates, the button text, defaults to "ignore" optionalIgnoreButtonLabel: "later", / / optional update, confirm the button text. Defaults to "Install" optionalInstallButtonLabel: "the background update", / / optional updates, check for updates to the text of the message optionalUpdateMessage: "have a new version, update?" //Alert window title: "The new version,"}}, enclosing codePushStatusDidChange. Bind (this), / / state to monitor this. CodePushDownloadDidProgress. Bind (this) / / download progress); } / / to monitor status updates codePushStatusDidChange (syncStatus) {switch (syncStatus) {case CodePush. SyncStatus. CHECKING_FOR_UPDATE: console.log("-----Checking for update."); showToast('Checking for update'); break; case CodePush.SyncStatus.DOWNLOADING_PACKAGE: console.log("-----Downloading package."); break; case CodePush.SyncStatus.AWAITING_USER_ACTION: console.log("-----Awaiting user action."); break; case CodePush.SyncStatus.INSTALLING_UPDATE: console.log("-----Installing update."); break; case CodePush.SyncStatus.UP_TO_DATE: console.log("-----App up to date."); showToast('App up to date'); break; case CodePush.SyncStatus.UPDATE_IGNORED: console.log("-----Update cancelled by user."); break; case CodePush.SyncStatus.UPDATE_INSTALLED: console.log("-----Update installed and will be applied on restart."); break; case CodePush.SyncStatus.UNKNOWN_ERROR: console.log("-----An unknown error occurred."); showToast('An unknown error occurred'); break; } } codePushDownloadDidProgress(progress) { console.log("------hot download progress : " + progress); }Copy the code

Please refer to the official documentation for more usage and configuration.

Three, notes

1. TargetBinaryVersion: the version number of the target binary, whose optional value rules are shown in the figure

The Staging and Production versions are the test and release versions respectively. When you create a deployment, you should create both specification points. Then, you can perform a hot update test at the Staging version.

appcenter codepush promote -a <ownerName>/<appName> <sourceDeploymentName> <destDeploymentName> [-t|--target-binary-version <targetBinaryVersion>] [-r|--rollout <rolloutPercentage>] [--no-duplicate-release-error] [-d | - description < description >] [- a | - app < ownerName > / < appName >] [- disable - telemetry] / /, for example, Push from Staging version to Production version AppCenter codePush promote -a MyGroup/MyAndroid Staging Production # promote the release to production and make it # available to all versions using that deployment appcenter codepush promote -a MyGroup/MyAndroid  Staging Production -t "*"Copy the code