Code push refers to the process of updating or deploying new code to a software application or system. It involves transferring the latest version of code from a development environment to a production environment, making the changes live and accessible to users.

To know more about CodePush refer this link.

Step 1: Register Your App on AppCenter

• Sign in to AppCenter.
• Add a new app for Android and iOS.

• Fill in the required fields and click on the Add new app button.

Example:

Android

iOS

• Go to Distribute -> CodePush, then click on Create standard deployments.
• Make a note of release Update commands it will be used every time you do a code push.
• You can edit, delete, or create a new environment of your choice, go to Distribute -> CodePush click on the setting icon then click on three dots.

Android

$ appcenter codepush release-react -a xxxxx/Awesome-Project -d Production

/* Production is the enviroment name 
you can also change name of your choice by following the above step*/

iOS

$ appcenter codepush release-react -a xxxxx/Awesome-Project-IOS -d Production

/* Production is the enviroment name 
you can also change name of your choice by following the above step*/

Step 2: Install CodePush SDK in React Native

• Create a new React Native Project using the below command

$ npx react-native init AwesomeProject

• Install CodePush globally using npm install -g appcenter-cli.

$ npm install -g appcenter-cli

• Integrate the CodePush library into your React Native project.

$ npm install react-native-code-push

 OR

$ yarn add react-native-code-push

• Log in to AppCenter through the CLI using, appcenter loginand run the below command in your terminal.

$ appcenter login

• A new webpage will pop up on your browser with a token. Copy and paste it to the terminal.
• Enter your token from the browser: [PASTE-IT-HERE]

Step 3: Platform-specific Configuration

Android Setup

1. Modify android/settings.gradle

…
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2. Add code to android/app/build.gradle

apply from: “../../node_modules/react-native-code-push/android/codepush.gradle”

3. Update MainApplication.Java

…
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
…
// 2. Override the getJSBundleFile method in order to let
// the CodePush runtime determine where to get the JS
// bundle location from on each app start
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}

4. Now go to AppCenter, select your particular project, and go to
Distribute->CodePush Click on the setting icon and copy the Production key.

5. Paste this production key into your android/app/build.gradle under buildTypes.

resValue “string”, “CodePushDeploymentKey”, ‘“”’ // In debug

resValue “string”, “CodePushDeploymentKey”, ‘PUT_YOUR_DEVELOPMENT_KEY_HERE’ // In release

// Replace PUT_YOUR_DEVELOPMENT_KEY_HERE will your CodePush key

iOS Setup

1. First Run pod install to update CocoaPods dependencies.
2. Edit AppDelegate.mto allow CodePush bundle selection.

#import <CodePush/CodePush.h>

3. Find the following line of code within AppDelegate.m, which sets the source URL for the bridge for production releases and then replaces it as shown below.

return [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];

Replace it with

return [CodePush bundleURL];

4. Add the deployment key to Info.plist . Go to AppCenter, select your project, and go to Distribute -> CodePush -> setting icon copy the production key, and paste it into your Info.plist file.

…
<key>CodePushDeploymentKey</key> 
<string>PUT_YOUR_DEVELOPMENT_KEY_HERE</string>
…

// Replace PUT_YOUR_DEVELOPMENT_KEY_HERE with CodePush key

Step 4: Wrap Your App.js with CodePush

1. Wrap the main component of your app with CodePush.

import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import CodePush from 'react-native-code-push';

const App = () => {
 return (
 <View style={styles.container}>
 <Text style={styles.heading}>
 CodePush: Empowering React Native Developers with Seamless Over-the-Air
 Updates
 </Text>
 <Image
 style={styles.image}
 resizeMode={'contain'}
 source={{uri: 'https://loremflickr.com/g/520/540/paris'}}
 />
 <View style={styles.button}>
 <Text style={styles.buttonText}>BEFORE CODE PUSH</Text>
 </View>
 </View>
 );
};

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 marginHorizontal: 16,
 },
 heading: {
 fontSize: 24,
 marginBottom: 20,
 fontWeight: '700',
 textAlign: 'center',
 },
 image: {
 width: 200,
 height: 200,
 borderRadius: 10,
 },
 button: {
 padding: 15,
 marginTop: 20,
 borderRadius: 8,
 backgroundColor: '#0E4B91',
 },
 buttonText: {
 color: '#FFFFFF',
 fontWeight: '700',
 },
});

export default CodePush(App);

2. Run Your Project using

$ react-native run-android // for android

$ react-native run-iOS // for iOS

Your Android and iOS setup is complete

Now You are ready to do your first CodePush…

Note: Prior to CodePush updates, generate and install release builds on both Android and iOS devices.

Step 5: Performing CodePush

1. Make required JS changes and save.

import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import CodePush from 'react-native-code-push';

const App = () => {
 return (
 <View style={styles.container}>
 <Text style={styles.heading}>
 CodePush: Empowering React Native Developers with Seamless Over-the-Air
 Updates
 </Text>
 <Image
 style={styles.image}
 resizeMode={'contain'}
 source={{uri: 'https://loremflickr.com/520/540'}}
 />
 <View style={styles.button}>
 <Text style={styles.buttonText}>AFTER CODE PUSH</Text>
 </View>
 </View>
 );
};

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 marginHorizontal: 16,
 },
 heading: {
 fontSize: 24,
 marginBottom: 20,
 fontWeight: '700',
 textAlign: 'center',
 },
 image: {
 width: 200,
 height: 200,
 borderRadius: 10,
 },
 button: {
 padding: 15,
 marginTop: 20,
 borderRadius: 8,
 backgroundColor: '#B7012F',
 },
 buttonText: {
 color: '#FFFFFF',
 fontWeight: '700',
 },
});

export default CodePush(App);

2. Run the CodePush command for Android or iOS.

• Android

appcenter codepush release-react -a xxxxx/AwesomeProject -d Production

• iOS

appcenter codepush release-react -a xxxxx/AwesomeProject-IOS -d Production

3. Running the above commands will show you all the required information in your terminal. Make sure the version specified in the terminal is the same version specified in build.gradle and Info.plistfile of your project.

4. Check version information in AppCenter.

AppCenter->ProjectName->Distribute->CodePush

5. Click on the above version and then click on the settings icon from the top right corner of the screen.

6. Enable the Required update button to ensure users have the latest version.

7. Follow the same above steps for iOS in AppCenter.

8. Changes will reflect in the installed app after refresh.

Step 6: Troubleshooting and Rollbacks:

• Turning off the Enable button will disable the updates and roll back to the previous changes

Important Notes:

1. Match Versions:

• Always perform CodePush updates on the same app version as the initial release.
• Consistency between versions ensures smooth updates.

2. Upgrading App Version:

• When updating the app, change the version in both Android and iOS configuration files.
• Generate a release build with the new version before running CodePush commands.
• The previous version remains unchanged.

Monitoring and Analytics:

• AppCenter provides analytics on updated adoption rates.
• Monitor how successful an update is and gather user feedback.

Best Practices:

• Test updates thoroughly before deploying to production.
• Maintain clear versioning to avoid confusion during updates.

Limitations:

• CodePush can only update the JavaScript bundle of your app. It cannot update native code. This means that any changes requiring native module modifications won’t be possible through CodePush alone.

Conclusion:

CodePush emerges as a game-changer, redefining how updates are delivered to mobile applications. This cloud-based solution, honed by Microsoft and tailored for frameworks like React Native, reshapes the user experience and accelerates innovation.

Gone are the days of waiting for app store approvals. CodePush grants you the power to swiftly respond to bugs, user feedback, and emerging trends. This agility doesn’t compromise quality; it enhances it.

With CodePush, your users are never left behind. Seamless updates ensure they always experience the latest, most polished version. This means fewer disruptions, heightened satisfaction, and increased retention.

In the realm of React Native, CodePush is your catalyst for innovation. It’s your tool to navigate the dynamic landscape with finesse, responding swiftly to user needs, and refining your apps with precision. As you delve into CodePush, you’re not just embracing updates, you’re embracing progress, efficiency, and the art of delivering truly exceptional apps.

Happy coding!!