React Native application deployment/hot update-codepush Latest Integration Summary (new)

The advent of React native has created two revolutionary innovations in mobile development: the integration of mobile app development, which not only shortens app development time, but also improves app development efficiency. Provides the foundation for mobile app dynamic updates.

This article will share the React Natvie application deployment/Dynamic update content.

React native supports the development of apps with React native technology and a package to build an app. In the context of dynamic update, react native just provides the basis for dynamic updates and is not as well supported by where the application is deployed and how it is dynamically updated. Fortunately, Microsoft has developed codepush to fill the gaps in react Native applications in dynamic updates. Codepush is a set of services provided by Microsoft for hot-update React Native and Cordova applications. Here's how you can use Codepush to update your app in real time, and later share not using Codepush, how to implement react native application hot update yourself. Codepush Introduction

Codepush is a set of services provided by Microsoft for hot-update React Native and Cordova applications.
Codepush is a cloud service provided to React Native and Cordova developers to deploy mobile apps directly to user devices. Codepush as a central repository, developers can push updates (JS, HTML, CSS and images), and applications can query for updates from within the client SDK. Codepush can make your application more deterministic and give you direct access to your user base. When it comes to fixing small problems and adding new features, you don't need to go through a binary package, and you can push the code directly for real-time updates.

Codepush can do real-time push code updates: Deploy code update management directly to users Alpha,beta and production environment app support React Native and Cordova support for JavaScript file and image resource updates

Codepush Open Source react-native version, React-native-code-push hosted on GitHub. Installation and Registration Codepush

You first install the Codepush client before using Codepush. This article takes OSX 10.11.5 as a platform for demonstration. Installing the Codepush CLI

Managing Codepush accounts is required via the nodejs-based CLI.
You only need to enter NPM install-g CODE-PUSH-CLI at the terminal to install it.
After the installation is complete, enter code-push-v to view the version, as seen in version representative success.
! [Install Codepush CLI Success] (https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native application deployment, hot update-codepush Latest Integration Summary/ images/installation of Codepush CLI succeeded. png)
My current version is 1.12.1-beta.

Ps.
NPM is the package manager for Nodejs, and if you do not install Nodejs please install it first. Create a Codepush account

Entering Code-push register on the terminal will open the following registration page to allow you to select an authorized account.

After authorization, Codepush will tell you "access key", copy this key to the terminal to complete the registration.
! [Get Codepush access key] (https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native application deployment, hot update-codepush Latest Integration Summary/ images/get Codepush access Key.png)
Then the terminal input Code-push login to login, after the successful login, your session file will be written in/users/your username/.code-push.config.

PS. Related commands code-push login login Code-push loout logout code-push access-key ls list login token code-push access-key rm <accessKye> Remove a Access-key register app on Codepush server

In order for the Codepush server to know your app, we need to register it with the app: Enter Code-push app add <appName> in the terminal to complete the registration.

When the registration is complete, a set of deployment keys is returned, which is used in the subsequent steps.

Experience: If your app is divided into Android and iOS, you'll need to register two apps to get two deployment keys when registering your app with Codepush, such as:

Code-push app add myapp-android
code-push app add Myapp-ios

PS. Related commands Code-push app add a new app in the account Code-push app Remove or RM remove an app from the Account Code-push app rename rename an existing app Code-push App list or LS lists all apps under Account Code-push app Transfer transfer ownership of the app to another account integration Codepush SDK Android

Below we integrate Codepush in the Android project with the following steps.
First step: Install the React-native-code-push plugin in your project, and the terminal goes to your project root and runs
NPM Install--save React-native-code-push

Step Two: Install the plugin in Android project.
Codepush is available in two ways: RNPM and Manual, and the demo uses RNPM.
Run NPM i-g rnpm to install the RNPM.

The React Native v0.27 and later versions of RNPM have been integrated into React Native cl, and no further installation is required.

Step three: Run RNPM link react-native-code-push. This command will automatically help us to add a good setting to the Anroid file.

After running this command at the terminal, the terminal will prompt you to enter deployment key, which is all you have to do is enter your deployment Staging key, and if you do not enter it, simply click Enter to skip.

Fourth Step: Add the following code to the Android/app/build.gradle file:

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

Then add the following code in the/android/settings.gradle:

Include ': React-native-code-push '
project (': React-native-code-push '). ProjectDir = new File ( Rootproject.projectdir, '. /node_modules/react-native-code-push/android/app ')

Fifth step: Run Code-push deployment-k ls <appName> get the deployment secret key. The default deployment name is staging, so the deployment secret key (Deployment key) is staging.
Sixth step: Add the configuration. When the app launches we need to ask the app to ask the Codepush where the JS bundle is located so that the Codepush can control the version. Update Mainapplication.java file:

public class MainApplication extends application implements Reactapplication {private final reactnativehost Mreactnativ Ehost = new Reactnativehost (this) {@Override protected Boolean getusedevelopersupport () {return buildconfi
    G.debug;
    } @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//has 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", M
    Ainapplication.this, Buildconfig.debug));
  }
  };
  @Override public Reactnativehost Getreactnativehost () {return mreactnativehost; }
}

About the settings of Deployment-key

In the above code we need to set up a deployment-key when creating Codepush instances, because Deployment-key production environment and test environment two, so we recommend that you set up in Build.gradle. The Setup method in Build.gradle is as follows:

Open the Android/app/build.gradle file, locate Android {buildtypes {}} and add the following code:

Android {
    ...
    buildtypes {
        Debug {
            ...
            Codepush updates should not being tested in Debug mode
            ...
        }

        releasestaging {
            ...
            Buildconfigfield "String", "Codepush_key", "<INSERT_STAGING_KEY>" '
            ...
        }

        Release {
            ...
            Buildconfigfield "String", "Codepush_key", "<INSERT_PRODUCTION_KEY>" '
            ...
        }
    }
    ...
}

Experience: In addition, we can also store Deployment-key in Local.properties:

CODE_PUSH_KEY_PRODUCTION=ERASZHA1-WTDODDPJDH6DBF2JWO94JFH08KVB
code_push_key_staging= Mqy75rkfbx6sizu1kvt1ii7oqwst4jfh08kvb

As shown in figure: then you can refer to it in Android/app/build.gradle in the following way:

Properties Properties = new properties ()
properties.load (project.rootProject.file (' local.properties '). Newdatainputstream ())
Android {
    ...
    buildtypes {
        Debug {
            ...
            Codepush updates should not being tested in Debug mode
            ...
        }

        releasestaging {
            ...
            Buildconfigfield "String", "Codepush_key", ' "' +properties.getproperty (" code_push_key_production ") + '" '
            ...
        }

        Release {
            ...
            Buildconfigfield "String", "Codepush_key", ' "' +properties.getproperty (" code_push_key_staging ") + '" '
            ...
        }
    }
    ...
}

After Android/app/build.gradle has set up the Deployment-key, we can use it like this:

@Override
protected list<reactpackage> getpackages () {
     return arrays.<reactpackage>aslist (
         ...
         New Codepush (Buildconfig.codepush_key, Mainapplication.this, Buildconfig.debug),//Add/change this line.
         ...
     );
}

Seventh Step: Modify the Versionname.
There is a android.defaultConfig.versionName attribute in Android/app/build.gradle, we need to change the application version to 1.0.0 (default is 1.0, but Codepush requires three digits).

android{
    defaultconfig{
        versionname "1.0.0"
    }
}

The SDK for the code Push for Android is now integrated. IOS

Codepush officially provides the RNPM, Cocoapods, and manual three ways to integrate Codepush in iOS projects, and then I'll walk through rnpm to explain how to integrate Codepush in iOS projects.

First step: Install the React-native-code-push plugin in your project, and the terminal goes to your project root and runs

NPM Install--save React-native-code-push

Step two: Run RNPM link react-native-code-push. This command will automatically help us to add good settings to iOS.

After running this command at the terminal, the terminal will prompt you to enter deployment key, which is all you have to do is enter your deployment Staging key, and if you do not enter it, simply click Enter to skip.

About the settings of Deployment-key

When we want to Codepush register the app, Codepush will give us two deployment-key are used in the production environment and test environment respectively, we can set the Deployment-key by the following steps.

1. Use Xcode to open Project ➜xcode in Project Navigation view under Project, select your project ➜ select I