# 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621588295870/bkwVEUmzV.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621588367485/qyvcry5le.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621588390999/vYNwy-UXW.png)

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

![options.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621588599288/82YiUuMVD.png)

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

![nodep.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621588746322/dm3ADnrcM.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621588886199/5UyzInI1Xq.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621588924122/J3JrsGc2g.png)

## 2. Install and integrate React Native CodePush

**Step 10.** Install  [react-native-code-push](https://www.npmjs.com/package/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](https://github.com/microsoft/react-native-code-push/blob/HEAD/docs/setup-android.md) .

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

![github.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589118560/zdrslBqYI.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 `.apk `file. 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589475124/ir_hxn7FR.png)

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

![secur.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589552363/c8NMKkhUq.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589602702/jx6HrNhKC.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589671506/VTlALRWtb.png)

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

![oauth.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589835767/uXDS2SQ_6.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589892612/sbM2GfyqN.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621589933115/5A5ZQhfbw.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590128927/3ocbrT53O.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590166249/GT2h5zbLh.png)

**Step 28.** Select the **Manage keys** option:

![Screenshot 2021-05-20 at 3.54.57 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590197221/lz1sLs37D.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590242721/FtiYUhfRl.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590317445/jEIRBrjqe.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590417461/r0KFmvUEq.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590471295/Ae0aNG9Me.png)

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

![pub.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590517272/xwH4QlAnj.png)

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

![done.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590558964/ku0h7gSgc.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1621590579309/Ec6auOYlD.png)