CodePush is a service from Microsoft that helps improve the deployment experience of your React Native apps. React Native code has a native part (written in Objective-C or Java) and a JavaScript part (the code we write). Normally, when deploying an app to the App Store, the JavaScript code is bundled together with the compiled native code.
If there is a minor JavaScript code change, the app is recompiled and submitted to Play Store or App Store for rollout. For Play Store, app rollout takes an hour or so. For App Store, app rollout takes about a day. CodePush helps to bypass app deployment for JavaScript code changes. We will find out how.
Instead of embedding JavaScript bundle into the app, CodePush workflow stores the bundle in Microsoft servers or Appcenter. The user downloads the app in the device. When the app starts, the app downloads the JavaScript bundle from Appcenter. When we want to update the app, we push the update to Appcenter. And the app automatically downloads the update when it restarts the next time. In this way, developers bypass the App Store rollout for minor updates.
Next, we will walk through a tutorial on how to integrate CodePush into an existing Android app.
Getting the deployment key
- Sign up for a new Appcenter account.
- Create a new app (PreviousNextAndroidApp).
- Click on the app, within Distribute section, click on CodePush
4. Create standard deployments. This will create a staging deployment and a production deployment for your app. For this tutorial, we will ignore the staging deployment and work directly with production deployment.
5. Install appcenter-cli.
yarn global add appcenter-cli
6. Login to appcenter using the command line.
appcenter login
This step provides the access token in a browser window. Copy the access token and paste it into the terminal.
7. Get the appId of the newly created app.
appcenter apps list
This will list vijayst/PreviousNextAndroidApp
(the app that you created in Appcenter)
8. Get the deployment key.
appcenter codepush deployment list -a vijayst/PreviousNextAndroidApp
The deployment key is important and we will use it in the next section.
Integrate CodePush SDK
9. Add the react-native-code-push
package.
yarn add react-native-code-push
10. Link the package.
react-native link
This step will modify the native code. It will also ask you to provide the deployment key. Provide the Production deployment key.
11. Wrap the root component with codePush HOC.
import codePush from 'react-native-code-push'; AppRegistry.registerComponent('PreviousNextApp', () => codePush(App));
12. CodePush the app bundle.
appcenter codepush release-react -a vijayst/PreviousNextAndroidApp -d Production
This will create a new release in Appcenter. It gets download automatically when we release the CodePush version of our Android app to the Play Store.
Publish new version
13. Increment versionCode and version number in two places: build.gradle and AndroidManifest.
14. Build the app.
cd android && ./gradlew assembleRelease
Publish the APK to the Play Store and rollout a new version of your app.
15. Make a minor update to the app. Publish the update only to Appcenter. Test if your app picks the new update in the next restart.
The PreviousNext app which has the CodePush SDK is available in Play Store.
How do we add codePush to an react native integerated Android app, where react native part is just a module inside native android app