Update On The Fly React Native Apps via Codepush
Apps without bugs are a myth.
Yes, that’s right. A myth is that the app is 100% bug-free. Bugs are common in complex applications, but the most important thing is knowing how to fix these bugs and giving a hassle-free experience for users.
Immediate release of bug fixing
Bugs that we have fixed must be released to production immediately. Bugs can occur in any services, it can be from the API or the Client Website, and when it is released in production, the user can immediately hit the API again or refresh the website.
Then, what if bugs happen to Client Apps? Do our users have to force users to re-update the application on the Google Play / Apps Store to get the latest version of our bug fixes?
Problem example, we have a small but fatal error, such as the buy button in a marketplace disabled because it was set to disable as “true” by a developer, then we missed it during the review.
We must immediately update it.
Then, what should we do? Rebuild apps? Release to the play store/app store will take some time, and not all users will update the apps.
It will affect customer’s trust and they could leave the application.
How do users get the latest version quickly from bug fixes without reupdating from Google Play/App Store?
Introduce Codepush
Please Welcome, Codepush ~~
CodePush is an App Center cloud service from Microsoft that enables Apache Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish specific updates (for example, JS, HTML, CSS, and image changes), and apps can query for updates from (using the provided client SDKs).
How Codepush work?
Do you understand the picture above?
If it’s not like this, a little explanation, so our application with version 1.0.0 is ready in production, but it turns out that there are bugs, we do bug fixing in version 1.0.1 then we publish the deployment to Codepush with the target version 1.0.0. CodePush cloud will distribute version 1.0.1 to the application version 1.0.0, which has been installed by the CodePush SDK client and will automatically update the code in the destination application.
It’s faster to get to the user
From the picture above, we can already explain, when updating via Codepush, the user will immediately get the update at the time. There is no need to wait for a review of the process from the public app store.
All conveniences have limitations; now, the CodePush limits themselves are:
Any product changes that touch native code (e.g., modifying your AppDelegate.m/MainActivity.java file, adding a new plugin) cannot be distributed via CodePush therefore, it must be updated via the appropriate store(s).
Also it support from iOS (7 above) dan Android (4.1 above)
How to Setup Codepush on your React Native Apps
- Register account app center
To start with Code Push, you need to create an account on Visual Studio App Center.
2. App center Configuration
After creating an app center account, we add a new application to the app center; when you add a new app in the App Center, we recommend creating a new app for each platform, one app for Android, one app for iOS. In a Codepush app center dashboard in a sidebar, go to Distribute> Code Push, there you will have a list of all Code Push releases you have created, or if there is no deployment, please create a standard deployment, then you will have Production and Staging deployments.
After the deployment is made, click the settings button on the top right to manage deployment, which displays the deployment key that we will install in our apps.
3. Install the Codepush Client SDK
Because technology is rapidly developing, I can describe the tutorial for installing the CodePush SDK client in your application here, (but when this article is read maybe 2–3 years from now it is feared that the implementation is different). For installing the Client SDK, you can go directly to the official documentation from Microsoft which will certainly always be updated and updated whenever you read this article, here is the link
Release Codepush Update
Before we installed Codepush CLI in our local area to simplify the update release process
npm install -g code-push-cli
For installation, you can just read the documentation at https://www.npmjs.com/package/code-push-cli
Previously, we already had 2 deployment stages on the app center codepush, namely staging and production) by default codepush will go to the deployment staging target, so just run the following command:
code-push release-react <appName> <OS> — description “Fixing” — targetBinaryVersion “1.0.0” -m
This command runs CodePush to staging in React Native with a target version 1.0.1 and with mandatory options.
After CodePush succeeds in staging when it promotes it to production with the command:
code-push promote <appName> Staging Production — description “Fixing” — targetBinaryVersion “1.0.0” -m
After successfully promoting it to production, we can check the history using the command:
Then the table will appear as above.
Your life is saved!
