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.

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 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.

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.

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

Next Wrap your component with CodePush in App.js , there are many options 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

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 :)