CodePush library
Imagine you can deliver updates for your application in minutes, whether it is to fix errors, quickly add a functionality that users have been insistently asking for or simply change the design of your application. Now you can easily do this thanks to the React Native CodePush library.
In today’s world, saving time always translates into saving money and, with this implementation, you will skip the waiting time it takes the app stores to approve the new version of your application. Not to mention the frustration of end-users when they find out there is yet another update they must download to get that fix or that new feature that they have been looking forward to.
What is React Native CodePush?
CodePush is a Microsoft library for React Native and Cordova, which allows you to launch code and image updates through a proprietary server. This will be directly installed without the need for end-users to update the application through the relevant app store.
Image from: microsoft.github.io
How does it work?
The operation is based on wrapping our application in a HOC (higher-order component) of CodePush that is responsible for checking if there are new updates to our code in CodePush and reloading the application with new changes.
React Native CodePush uses its own server to save a copy of each CodePush deploy and a control version if a rollback is necessary; this can be done almost instantaneously. All of this is managed through a friendly control panel provided by Microsoft, which does not only let you control the CodePush deploys but also the conventional ones. It also lets you perform simultaneous testing of the versions on a wide variety of devices and platforms.
The library has a wide variety of configuration parameters that, among other things, allow you to choose at what time to check and download new versions of React Native CodePush for the application and also give you the possibility of using events to determine when each of these processes was completed. For example, you can notify the end-user that a new version will be installed the next time the application is restarted.
Advantages
- Deploy the code update in minutes.
- Download and update in the background.
- Configurable server inquiry mode, onOpen and onResume.
- A copy of the previous update is stored (easy rollback).
- App Center release monitor panel.
- Ideal for patch/fix updates.
- Compatible with:
- React Native v0.59 and earlier
- Android (4.1+)
- iOS (7+)
Disadvantages
- Forces you to have a separate version for iOS and Android.
- Any changes that involve the native code (for example, modifying the AppDelegate.m/MainActivity.java file, adding a new library, etc.) cannot be distributed through CodePush and, therefore, must be updated through the relevant store.
- It does not support the following component properties:
Integrating CodePush
To integrate React Native CodePush into your project, you must first have an account in the Microsoft App Center. You can create it through the following link: appcenter.ms. After creating the account, you must create projects—one for Android and one for iOS—, and follow the sensuous steps you’ll find in the implementation section of your projects.
We recommend using CodePush to perform hotfixes, fix errors or graphic UI changes, because, when incorporating a new feature, in most cases, it depends on the installation of other libraries and this can be delivered by an update through CodePush. Moreover, if adding a new feature, it is convenient to go through the testing and check-up system that the app stores (the Google Play Store and the Apple Store) provide because it is important to comply with their regulations and it is beneficial to take advantage of the feedback users provide when trying out the application with that new functionality.
Code Integration
You will need to create two versions of the code (or branches) one for Android and one for iOS and you will have to repeat the library installation and code integration on each one.
Run this command in your project command line:
yarn add --save react-native-code-push
or this one:
npm install --save react-native-code-push
Once the library is installed, you will need to link it to the project:
react-native link react-native-code-push
At this point, the console will ask you to insert the CodePush keys for platforms.
To get these keys, go to AppCenter and create one application by platform. Then go to your app, Distribute -> CodePush, and press on the top-right tool icon to get the key.
Put the key on the console and React Native will automatically save and link CodePush keys to the project.
For iOS, if the project uses CocoaPods, go to the iOS folder and run:
pod install
Integrating the SDK:
To integrate the SDK to the project, follow the steps stated in the “Overview” section at:
appcenter.ms/orgs/`my_organization`/apps/`yourapp`
Integrating React Native CodePush to project code:
Edit the `App.js` project file, to allow the following code:
This action will link the library and set a default configuration to install updates that, in this case, will check and install updates during app starts.
Releases
To release a new version of CodePush, open the terminal and run:
appcenter codepush release-react -a AsapUy/`MyAppName` -d `Beta`
Replace `MyAppName` with the name of the app, and `Beta` with the name of the environment attached to the key, and the current environment that you want to deploy to.
Final thoughts
As you can see, React Native CodePush is a very valuable tool when making updates to your app. It will not only save you time but also make your users happier. We believe it is definitely worth a try.
