A Guide To Integrating CodePush To Your React Native App: Part 1

In this module, the first in its series, you will learn how to integrate CodePush to your React Native Application

A Guide To Integrating CodePush To Your React Native App: Part 1

Live reloads and hot reloads make React Native quite awesome! But, what if a live update could be done during production? Suppose you make a change in your app but don’t want to release updates on the App stores (the approval takes ages!)? The solution is CodePush. CodePush, earlier an independent service, has now moved to AppCenter. App Center is an integrated mobile development lifecycle solution for iOS, Android, Windows and macOS apps. It is essentially a cloud service that enables React Native and Cordova developers to deploy mobile app updates directly to their users' devices.

Let’s now come around to learning for to implement them into our applications. In part 1, we will be integrating AppCenter and CodePush to an Android app. For iOS, please refer to upcoming sequel.

You can not publish the first version of your app via App Center. The first version must be published through Google Play Console as the Store listings cannot be done through App Center.

1. Create an app on App Center

Step 1. Make sure that the app is already published on Play Store.

Step 2. Create an account on Microsoft App Center.

hello.png

Step 3. Click on Add new app.

Step 4. First set about writing your app name and continue onto selecting the OS as Android and the platform on React Native. This step is shown below:

addnew.png

Step 5. The next screen tells you the steps to integrate appcenter-analytics and appcenter-crashes. Follow Steps 1 and 2 from the image below to achieve this:

appsdk.png

Step 6. Next, select Distribute in the left navigation section and select CodePush as shown:

options.png

Step 7. Click on Create Standard Deployments. Now, you will see something like this:

nodep.png

Step 8. On the next screen, click on the Settings icon which is present in the top-right corner. Alternatively, you may change the staging environment to Production from here:

ready.png

Step 9. As you click on the Settings icon, the keys for Production and Staging will be exposed. Copy the desired key from the list shown below as this is necessary for step 13:

prodnstagkeys.png

2. Install and integrate React Native CodePush

Step 10. Install react-native-code-push in your project.

Step 11. Now, you need to manually do the Android set up for CodePush in your project. For this, open your project in the Android Studio and follow the instructions from this link .

Step 12. In the above link, you will come across something like this:

github.png

Step 13. Remember the key you copied in Step 9? Yes, you have to use that key here to complete the integration for CodePush!

3. Make changes in your React native app

Step 14. Now, if you need to make some changes in the React Native code, open the App.js file and import CodePush as shown:

import CodePush from ‘react-native-code-push’;

Step 15. Next, define the CodePush options. You can customize these options as per your need. Use the code given below to achieve the necessary results:

const CODE_PUSH_OPTIONS={
  checkFrequency:CodePush.CheckFrequency.ON_APP_START
}

Step 16. In the useEffect hook in App.js, write the following code:

useEffect(()=>{
    CodePush.sync({installMode:CodePush.InstallMode.IMMEDIATE},syncWithCodePush);
  },[])

  const syncWithCodePush=status=>{
    console.log('Codepush sync status',status);
}

A sample App.js file after CodePush integration looks like this:

import React,{useEffect} from 'react';
import AppNavigator from './config/routes';
import rootReducer from './src/store/reducers';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import CodePush from 'react-native-code-push';
const CODE_PUSH_OPTIONS={
  checkFrequency:CodePush.CheckFrequency.ON_APP_START
}
const store=createStore(rootReducer);
const App=props=>{
  useEffect(()=>{
    CodePush.sync({installMode:CodePush.InstallMode.IMMEDIATE},syncWithCodePush);
  },[])
  const syncWithCodePush=status=>{
    console.log('Codepush sync status',status);
  }
  return(
    <Provider store={store}>
      <AppNavigator/>
      </Provider>
  )
}
export default CodePush(CODE_PUSH_OPTIONS)(App);

Step 17. The next step is to make an .aab or .apkfile. Make sure to increment the versionCode in the app-level build.gradle file before generating the signed bundle/apk.

4. Connect App Center to Play Store

Step 18. In the App Center console, click on Stores under the Distribute section. Then click on Connect to Store to arrive at the following result:

connecttostore.png

Step 19. In the next step, you will need to upload a .json file as shown:

secur.png

Step 20. To get the .json file you need to follow a series of steps. Open Google Play console and go to Settings -> Developer Account -> API access. Click on Choose a Project to link as shown:

apiacc.png

Step 21. As you click on "Choose a project to link", you will see a pop-up. Select I agree.

Step 22. On the next screen, select Create new project:

link.png

Step 23. After creating a new project, you need to create a new service account as shown:

oauth.png

Step 24. Click on the Google Cloud Platform link in the pop-up window. Next, you will see a pop-up like this:

pop.png

Step 25. Now, you will land on the GCP page. Here, click on Create Service account. Refer to the image below:

Screenshot 2021-05-20 at 3.50.18 PM.png

Step 26. Now, go on to the next page and fill in the required form and enter an app name to define a role. Finally, click on Done.

Screenshot 2021-05-20 at 3.53.46 PM.png

Step 27. On the next screen, a table showing a list of service accounts appears. Currently, it shows a single entry. Click the menu button under the Actions column as shown in the below image:

Screenshot 2021-05-20 at 3.54.44 PM.png

Step 28. Select the Manage keys option:

Screenshot 2021-05-20 at 3.54.57 PM.png

Step 29. On the next screen, click on Add key. To make this clearer for you, an image has been displayed below:

Screenshot 2021-05-20 at 3.55.09 PM.png

Step 30. As you click on the Add Key button, a pop-up appears. Select JSON and click on Create to download the required key. Now, if you open Settings -> Developer Account -> API access in your Google Play console, the key should appear there:

Screenshot 2021-05-20 at 3.55.19 PM.png

Step 31. Come back to the App Center console and upload the key you just downloaded. In the next step, enter the package name of your Android app and click on Assign as shown:

addpkg.png

5. Upload your app to App Center

Step 32. Next, go to Distribute -> Releases. Click on Create New Release. Here, upload your .aab or .apk file as shown:

rel.png

Step 33. Click on Publish to achieve the following result:

pub.png

Step 34. Celebrate! you have successfully integrated Appcenter and Codepush to your Android app. The screen should now appear like this:

done.png

To Conclude..

Google can now review your app (as an update). This process might take a few hours. Once approved, you can make changes in your app and run the command given in Step 4. As you run this command, your changes will be shipped to the end-users, within a few minutes! I hope this article has helped you understand how to integrate CodePush to your React Native application.

allset.png