【React-native】 Easy to build Microsoft code-push hot updates from zero

Overall steps:

1. Prerequisites: MAC computer (iOS, Android Win only), RN iOS/ Android environment set up, one server (Linux is best), mysql database, git and NPM environment.
2. Set up the server, download the code-push project, install NPM install, configure the database, and generate the database table.
3. Open ali Cloud 3000 port and run the test.
4. Install code-push-CLI locally, obtain the token, and push the application.
5. NPM install react-native code-push, react-native link React-native code-push, and input app token.
6. IOS is configured with Release and Debug version token, and Android is configured with URL.
7. Run push tests.

---

So, if it’s a complete solution, you have to build it step by step.

Mysql > install mysql; mysql > install mysql; mysql > install mysql ?).

---

Two, build the server

First, to download the hot update package to the server, here use git to download, go to the server, create a folder:

Mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder mkdir code-push // Create hot update folder The mkdir storage is used laterCopy the code

​

Then download the hot update code using the following command:

git clone https://github.com/lisong/code-push-server.git
Copy the code

As shown in the figure below:

​

Next, go to code-push-server and install dependencies with the following command:

cd code-push-server && npm install
Copy the code

The running results are as follows:

​

After the installation is complete, you need to modify the configuration file and link to the database to create tables. Here, modify the config/config.js file as follows:

  db: {
    username: process.env.RDS_USERNAME || "User name".password: process.env.RDS_PASSWORD || "Password".database: process.env.DATA_BASE || "codepush".host: process.env.RDS_HOST || Database Domain name.port: process.env.RDS_PORT || 3306.dialect: "mysql".logging: false.operatorsAliases: false,}local: {
    // Change the following storage paths to your own, and copy the paths created in part 2 by PWD
    storageDir: process.env.STORAGE_DIR || "/root/app/code-push/code-push-file/storage".// Binary files download host address which Code Push Server listen to. the files storage in storageDir.
    downloadUrl: process.env.LOCAL_DOWNLOAD_URL || http://server domain name :3000/download.// public static download spacename.
    public: '/download'
  }
Copy the code

After the configuration is complete, run the following command to create a database table:

// Run the script to create the database./bin/db init --dbhost localhost --dbuser user name --dbpassword Password eg.. /bin/db init --dbhost 127.0.0.1 --dbuser root --dbpassword rootCopy the code

At this point, if there is no error, the server is set up, more fool type.

---

Third, open ali Cloud 3000 port and run the test

After entering the ECS instance, click “More” -> “Network and Security Groups” -> “Security Group Configuration”.

​

Click “Configuration Rules” as shown below.

​

Click on any clone and change to 3000.

​

As shown below, change it to 3000.

​

Enter the url to test:

Click “Login” and enter the account admin and password 123456 to log in.

​

After a successful login, you can click Obtain Token to obtain the token secret key for subsequent authentication and to change the password of the current login account.

​

At this point, the hot update backend is set up ~~~

---

4. Build a local code-push-CLI environment to create push applications

• Install the code-push-CLI tool

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

• View the current login user

code-push whoami
Copy the code

If the email address is displayed, you have logged in. Otherwise, run the following command to log in:

// Change localhost to the domain name of the hot update server code-push login http://localhost:3000Copy the code

This step will redirect to the browser. After login, you can obtain the token and put it in the terminal window

• Create an

As shown in the following figure, an Android application named test-Android is created on RN

// Code -push app add app name version platform code-push app add test- Android Android React-nativeCopy the code

• View the list of created apps

code-push app list
Copy the code

Four applications are created here, with Prodcutin and Staging versions for production and test

​

• View the applied key value

Code -push Deployment ls Application name -kCopy the code

• ​

  

For more commands, see [my Github]. At this point, the local environment is set up and you are ready to create your app, so take a sip of water and move on.

---

Install code-push in the project

To enter the project, enter:

NPM install react-native code-push --save // Link react-native link react-native code-pushCopy the code

In the link, it will prompt you to enter the corresponding key, that is, the key obtained in the fourth step [View the corresponding key value applied].

Next, you need to change some Settings.

• Android:

Change the version number to three

DefaultConfig {versionName "1.0.0"}Copy the code

In the getPackages method in mainApplication.java

new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), Buildconfig.debug, "http://your domain name :3000/"),Copy the code

• iOS

Click Add Custom Settings

​

The additions are as follows:

​

In info.plist, add:

​

So, that’s the end of the project configuration, so let’s add hot update code to RN.

• Configuration update code:

Import the CodePush library in the entry (usually app.js) file

import CodePush from "react-native-code-push";
Copy the code

The default is English. After you modify the parameters in updateDialog, you can change it to whatever you want.

    componentDidMount() {
        // Hot update detection
        CodePush.sync(
            {
                updateDialog: {
                    optionalIgnoreButtonLabel: 'Next time'.optionalInstallButtonLabel: 'Experience now'.optionalUpdateMessage: 'New version, update or not'.title: 'Update prompt'.mandatoryUpdateMessage: 'Oh, there are some big changes in the version. I have to update it.'.mandatoryContinueButtonLabel: 'Update Now'
                },
                installMode: CodePush.InstallMode.IMMEDIATE
            },
            this.codePushStatusDidChange.bind(this),
            this.codePushDownloadDidProgress.bind(this)); }Copy the code

The following is the monitoring for different states, which can be used to add the progress bar after users click the update

codePushStatusDidChange(syncStatus) {
        switch (syncStatus) {
            case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
                this.setState({syncMessage: "Checking for update."});
                break;
            case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
                this.setState({syncMessage: "Downloading package."});
                break;
            case CodePush.SyncStatus.AWAITING_USER_ACTION:
                this.setState({syncMessage: "Awaiting user action."});
                break;
            case CodePush.SyncStatus.INSTALLING_UPDATE:
                this.setState({syncMessage: "Installing update."});
                break;
            case CodePush.SyncStatus.UP_TO_DATE:
                this.setState({syncMessage: "App up to date.".progress: false});
                break;
            case CodePush.SyncStatus.UPDATE_IGNORED:
                this.setState({syncMessage: "Update cancelled by user.".progress: false});
                break;
            case CodePush.SyncStatus.UPDATE_INSTALLED:
                this.setState({syncMessage: "Update installed and will be applied on restart.".progress: false});
                break;
            case CodePush.SyncStatus.UNKNOWN_ERROR:
                this.setState({syncMessage: "An unknown error occurred.".progress: false});
                break; }}Copy the code

    codePushDownloadDidProgress(progress) {
        this.setState({progress});
    }
Copy the code

---

Vi. Push and update tests 

• Android 

Android -t "1.0.0" --des "test hot update" -d StagingCopy the code

Android can be packaged and tested to determine whether it is an official environment based on the configured key

•  iOS

Code-push release-react "app name" ios -t "1.0.0" --des "test hot update" -d StagingCopy the code

For iOS, if the Staging environment is a virtual machine, it can be promoted to the Staging environment. Since the virtual machine has Node services, it can’t be seen, so it can be set as follows: Release to start, so the Staging environment can be changed to Production.

​

The following updates are detected:

​

If you need to clear app updates, use the following command

code-push deployment clear <appName> Production or Staging
Copy the code

---