Code Push React Native

UseCase

Let’s take a small practical scenario there’s a typo or a spelling mistake or any UI issue(like alignment change etc) in your application, Which is now live on the app store and play store, now to resolve this you need to release a patch release and go through a release cycle tedious work isn’t it just for a small bug. And now every user needs to update the app for this bug.

What if I tell you, you don’t need to do any of this Just a command and it will update the application for every user automatically they won’t even need to go to the app store or play store to update the app wouldn’t be this amazing. Magical right?? WRINGARDIUM LEVIOSA XD

Yes code push is that magical thing that provides you this amazing feature in react-native

What is code push and how it works?

React Native CodePush uses its own server to save a copy of each CodePush deployment (Bundle File) and a control version if a rollback is necessary; this can be done almost instantaneously. All of this is managed through a friendly control panel provided by Microsoft, which let you control the CodePush deploys but also the conventional ones. It also lets you perform simultaneous testing of the versions on a wide variety of devices and platforms.

Advantages

• Deploy the code update in minutes.
• Download and update in the background.
• Configurable server inquiry mode, onOpen, and onResume.
• A copy of the previous update is stored (easy rollback).
• App Center release monitor panel.
• Ideal for patch/fix updates.

Disadvantages

• Forces you to have a separate version for iOS and Android.
• Any changes that involve the native code (for example, modifying the AppDelegate.m/MainActivity.java file, adding a new library, etc.) cannot be distributed through CodePush and, therefore, must be updated through the relevant store.
• Whenever you are updating a major release from the AppStore and play store. Always make sure to update your app on code push as well
  else it will silently move your app to the last version available on code push.
• Plus it’s a good practice to disable code push functionality at development time and make separate identifiers for production and development release. Else if you won’t manage code push carefully you may experience some bizarre bugs which mostly arise due to silent update of app by previous version of app on code push

If you want a detailed understanding and get into technicalities please go through Microsoft’s documentation here

Use CodePush to update your app live — Visual Studio App Center

Else in easy terms (‘aasaan bhasha me :D’)

It updates your bundle file whenever you release an update from app center,I hope you are familiar with the bundle file in react-native.

Bundle File: A React Native app is composed of JavaScript files and any accompanying images, which are bundled together by the packager and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file)

So for e.g in android when you run this command

react-native bundle — dev false — platform android — entry-file index.js — bundle-output ./android/app/src/main/assets/index.android.bundle — assets-dest ./android/app/src/main/res

it creates a bundle file which is a kinda minified file consist your overall app in easy terms

So code push just updates this file in every user’s phone whenever you make a new release using code push, to update the app. Please note any changes that involve the native code cannot be distributed through CodePush.

Enough about understanding now let’s implement code push

1. Install the App Center CLI

You manage most of CodePush’s functionality using the App Center CLI. To install the CLI, open a terminal window or command prompt and execute the following command:

npm install -g appcenter-cli

2. Integrate code-push

You can follow this documentation to integrate in ios and android

1. CodePush Management CLI

Releasing CodePush updates using the App Center CLI — Visual Studio App Center

2. Setup

Android:-https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-android.md

IOS:-https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md

3. In Project Setup in App.js

Finally, now we can integrate code push API in our app component in app.js file
how to integrate follow this

microsoft/react-native-code-push

Make some changes to your app now. You can change a <Text>? Or a color?

Then push it:

Kill the app and restart Voila!! you’ll see the changes

That’s it folks here we are done. Thanks for reading and please let me know if you’ve any queries put in comment section.

few important commands

1. Add App

code-push app add <appName> <os> <platform>

e.x:
code-push app add MyApp-Android android react-native
code-push app add MyApp-iOS ios react-native

2. To display code push keys
username: appcenter username
appname: appname that you gave while adding app in appcenter

appcenter codepush deployment list -a username/appname — displayKeys

3. Release Build

appcenter codepush release-react -a username/appname — plist-file plist file path/Info.plist -d deployment type e.g production

Extra parameters if you wanna use

appcenter codepush release-react -a <ownerName>/<appName> -d <deploymentName> -t <targetBinaryVersion>
[-t|--target-binary-version <targetBinaryVersion>]
[-o|--output-dir]
[-s|--sourcemap-output]
[--plist-file-prefix]
[-p|--plist-file]
[-g|--gradle-file]
[-e|--entry-file]
[--development]
[-b|--bundle-name <bundleName>]
[-r|--rollout <rolloutPercentage>]
[--disable-duplicate-release-error]
[-k|--private-key-path <privateKeyPath>]
[-m|--mandatory]
[-x|--disabled]
[--description <description>]
[-d|--deployment-name <deploymentName>]
[-a|--app <ownerName>/<appName>]
[--disable-telemetry]
[-v|--version]

4. Checking Deployment History

code-push deployment history <app name> <deploymentName>

5. Debugging Application
In ios debug in simulator and in android use device

code-push debug ios
code-push debug android