CodePush with ReactNative for Android.
Tags: reactnative, javascript, codepush, programming
Published: 2023-10-27 17:06:40

## What is CodePush?


CodePush is an App Center cloud service that enables React Native developers to deploy mobile app updates directly to their users without going through store approvals. With codepush, you can update javascript code by fixing bugs and applying new styles and new feature.

Note that stores Apple and Google will let you apply the changes in case you are not changing the whole app and not changing any native Android IOS code only javascript code.



## In this post will cover

1. Creating an account in AppCenter and a RN project.
2. Integrating codepush with react native.
3. Building a sample app and deploy the changes to AppCenter CodePush.


First lets understand how codepush is working with the image below.


![CodePush](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnhiq0hzthtfgpg0kn7s.png)

If you have any changes a normal way is to upload them to stores and once stores approve the application then you can download the app but what if you got a crash bug and you need immediately to update the app CodePush can help you here. What code push is doing is will check if any Javascript code changes the Javascript bundle if there is AppCenter will automatically apply the changes.


## Creating an account in AppCenter.

Click [here ](https://appcenter.ms/sign-in?utm_source=CodePush&utm_medium=Azure) to register to AppCenter once done a you will see the below page click on **Add new** in the right top corner then Add new app.


![new app appcenter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0sdmmtwirs7b9c3gvif.png)

Select the Name of your App, Release Type, OS and Platform then click on Add new app.

you will get something like this lets go now and and create a RN app.



![Getting Started](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxg1xalxkbtb99a7t4p7.png)




## Setup React Native Project.

```
npx react-native@latest init AwesomeProject
cd AwesomeProject
```

## Add AppCenter CLI and SDK to the project.

```
npm install -g appcenter-cli
npm install appcenter appcenter-analytics appcenter-crashes --save-exact
```

Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content:

```
{
  "app_secret": "{Your app secret here}"
}
```
if you do not have the assets folder you can create one


Modify the app's res/values/strings.xml to include the following lines:

```
<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
```

Add CodePush

```
npm install --save react-native-code-push
```

After installing all dependencies run this command

```
npm run android
```

## Plugin integration 

Plugin installation and configuration is different based on your react native version, so perform the following setup steps depending on your react native version.

[React native versions](https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-android.md)


Next Wrap your component with CodePush in App.js , there are many [options ](https://github.com/microsoft/react-native-code-push#plugin-usage)to wrap with your component

```
import CodePush from "react-native-code-push";

let MyApp: () => React$Node = () => {
}

MyApp = CodePush(MyApp);

```

Now we are done with integration part you can change the default react native app code styles to what ever you want, once you are satisfied you can build the release version of your app.

To release an APK check [this](https://www.decoide.org/react-native/docs/signed-apk-android.html)

The release build will take time as we did many native code changes.

Once the release done go to android\app\build\outputs\apk\release
and install it in your Android phone.


Now lets update our JavaScript code change it to what ever you want, once you are satisfied lets release an update but now without releasing a new APK but a new update to AppCenter.


## Release an update with the command

appcenter codepush release-react -a **ownername**/**projectname ** -d **environment**

The **ownername** is the owner name in AppCenter, **projectname ** is the project name in AppCenter, environment either **staging **or **production** base on your deployment key.



## If you are not getting the update:

- Make sure you applied all required changes for CodePush dependencies.
- Make sure the keys are correct, and you deploy production/staging correctly.




I hope you enjoyed :)