The original

Recently, I have been doing some product pre-research work based on RN. When the pre-research and development progresses to a certain extent, it is necessary to “use it more often”. However, if the debug version of RN continues, no matter Android or ios platform, there will be annoying yellow box warning. So I’ve just completed the closed-loop process of developing, testing, and feedback a prototype product, which is to release the test package, test and use it, feedback, and redistribute the package. In RN’s world, there’s also a CodePush hot update, So the basic process would be to release a baseline version of the official package to the Application Distribution platform (TestFlightTop) -> Feedback -> release the Codepush hot updates based on that baseline version to the hot Update service -> Feedback -> release the updated baseline version. Product form is all that matters, but developing a test loop is important for individual developers, and it’s best to include design in the loop.

Add CodePush functionality and services

Add the React-native code-push component to the client

npm install --save react-native-code-push
react-native link react-native-code-push
? What is your CodePush deployment key for Android (hit <ENTER> to ignore) 
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore) 
# ask if you want to add the deployment key value
Copy the code

Non-microsoft CodePush services are deployed on the server side

Install and update Node-js and NPM
sudo apt-get install nodejs-dev
sudo apt-get install npm
sudo npm install -g n
sudo n stable
node -v
npm -v

# code - push - server installation
npm install code-push-server --save
sudo ln -s /data/codepush/node_modules/code-push-server/bin/db /usr/local/bin/code-push-server-db
sudo ln -s /data/codepush/node_modules/code-push-server/bin/www /usr/local/bin/code-push-server

Mysql > create user name/password for mysql > create user name/password for mysql
code-push-server-db init --dbhost localhost --dbuser root --dbpassword xxxx

Mysql > select * from user where username and password are set
node_modules/code-push-server/config/config.js

# start service
export PORT=8080
exportThe HOST = 0.0.0.0export NODE_ENV=production
code-push-server 1>/dev/null 2>&1 &

Copy the code

Log in to the CodePush service from the command line

The default login account is admin/123456. Enter the token value after login
code-push login http://app.airoubo.com:8080
Please login to Mobile Center in the browser window we've just opened. Enter your token from the browser: XXXXX # after that, code-push logout will be used for this loginCopy the code

Register applications to be published to the CodePush service

# Ios and Android need to be added separately
 » code-push app add fantuan-ios ios react-native
Successfully added the "fantuan-ios"app, along with the following default deployments: ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ Name │ Deployment Key │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ Production │ tH1HvTgUq6FVrhqsv5MxCbZYLexxxxxsvXqog │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ Staging │ yl1nhf3chhdcKDsMlczz5xxxxNxz4ksvOXqog │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ » code - push the add app fantuan - android android react - nativeCopy the code

Once added, you can see that each application has two version lines by default, staging (which we consider to be beta) and Production (Production), but FOR convenience I will use the Production version line directly for distribution.

Deploy hotphone and test (Android)

  • Create a baseline APK with Production key version 1.0.0 and install it.
// Note codepushkey and service address
new CodePush(CODEPUSH_KEY, getApplicationContext(), BuildConfig.DEBUG, "http://app.airoubo.com:8080/"),
Copy the code
  • Modify the JS code based on the baseline version of 1.0.0 to generate a hotupdate based on that version and deploy:
Release a hot update based on version 1.0.0 to the Android Production line
code-push release-react fantuan-android android --d Production --des "first codepush"T 1.0.0 -Copy the code
  • Since we put the logic of CodePush Sync in the main page component loading process, it will query the hot update every time it is loaded and apply the update at the next startup. After the update is successful, the upgrade information can be seen through the codePush command line:
componentDidMount() {
  // Add the simplest hot update trigger method
codePush.sync();
}

Copy the code
Code -push deployment ls fantuan-android-kCopy the code

Deploy hot Update and test (IOS)

For IOS testing, I used TestFlight + CodePush to distribute the official 1.0.0 package on TestFlight, and then released a CodePush hot update based on the 1.0.0 version. The distribution method is the same as Android.

Apple TestFlight has also improved its ability to invite test users publicly and anonymously:

However, it would be more convenient to continue to work with platforms like TestFlight Top to manage test behavior and integrate test distribution on both Android and IOS platforms.

TestFlight.top