Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tutorial #3: How to perform OTA (Over-The-Air) updates using CodePush

Tutorial #3: How to perform OTA (Over-The-Air) updates using CodePush

This post is the 3rd one in a series of posts on Electrode Native.

It assumes that one has already completed the steps in Tutorial #2 here - https://gist.github.com/hemanth-manoharan/8c0f5bda0469335ce9410ea61dbc4e54

Ref: https://native.electrode.io/cli-commands/code-push#prerequisites

npm install -g appcenter-cli
appcenter login
appcenter apps create -p "React-Native" -o "Android" -d ErnOuterAppAndroid
  • From the AppCenter portal, create the default deployments for that app (Staging and Production).

  • Then, retrieve the CodePush deployment keys for the app using the following command. Keep a note of the key against Staging deployment.

appcenter codepush deployment list -a hemanth-aero-pmdp/ErnOuterAppAndroid -k

  • Now, run the following to locally setup the CodePush API Access token with Electrode Native Note: Here, we need to set the Code Push API Access Token and not Deployment Key

ern platform config set codePushAccessKey YOUR_CODE_PUSH_API_ACCESS_TOKEN

  • Now, let's move to app1-miniapp folder (the app for which we want to push OTA update) and perform the following steps

  • Run the command

ern add react-native-code-push

  • Then, in the app1-miniapp code, decorate the App Component class in App.js with codePush as shown below. To decorate the same with codePush, the component needs to be defined as a Class Component. Not a Function Component.
import codePush from 'react-native-code-push';

...

// const App: () => React$Node = () => {
class App extends React.Component {
  render() {
    ...
  }
}

...

App = codePush({
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
  installMode: codePush.InstallMode.ON_NEXT_RESUME,
  minimumBackgroundDuration: 60 * 2,
})(App)

export default App;

Section - Publish an updated version of app1 simply and embed the aar within ErnOuterApp to get access to CodePushPlugin class in tbe native Android code

  • Now, update the version in package.json of app1-miniapp to 0.0.2 and re-publish the same to npm

  • Now, update the cauldron with the new version of app1. Note: We are choosing not to update the native app version in this case but we are bumping up the container version.

ern cauldron update miniapps app1-miniapp@0.0.3 -d ErnOuterApp:android:0.0.1 -v 1.0.2

  • Now, create the container locally again using the cauldron metadata.

ern create-container -d ErnOuterApp:android:0.0.1 -p android

  • Now, run the gradle build to create the updated .aar file.

  • Then, copy over the updated lib-debug.aar to the libs folder of the ErnOuterApp android project

  • Change the initialization code in the ErnOuterApp as follows

ElectrodeReactContainer.initialize(
    getApplication() /* Application instance */,
    new ElectrodeReactContainer.Config(),
    new CodePushPlugin.Config("DEPLOYMENT_KEY")
    /* Additional plugins configuration here */);
  • Then, test out the app with both the buttons and check if things are fine.

  • At this point - we are all set for pushing OTA updates for non-native changes to app1. Let's do that in the next section.

Section - Finally, pushing an OTA update for app1

  • First, make some change in app1-miniapp, update the version in package.json to 0.0.3 and re-publish the same to npm

  • Run the commands

ern cauldron update miniapps app1-miniapp@0.0.3 -d ErnOuterApp:android:0.0.1 -v 1.0.3

  • Important: Ensure that the versionName in the app's build.gradle for ErnOuterApp has the right version "0.0.1"

  • Now, let's use CodePush to dynamically push the OTA update

ERN_LOG_LEVEL=debug ern code-push release --miniapps app1-miniapp@0.0.3 -d ErnOuterApp:android:0.0.1 --deploymentName Staging

  • If the code-push command fails due to an internal server error as below, then proceed further.
[ Releasing bundle through CodePush (Started) ]
[ Releasing bundle through CodePush (Failed) ]
✖ performCodePushOtaUpdate Error: {"message":"Internal Server Error","statusCode":500}
✖ An error occurred: {"message":"Internal Server Error","statusCode":500}
Error: {"message":"Internal Server Error","statusCode":500}
    at CodePushSdk.releaseReact (/Users/hemanth/.ern/versions/0.45.5/node_modules/ern-core/src/CodePushSdk.ts:73:15)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
  • Note down the temporary folder path like the one below in the output of the above command

/private/var/folders/*

We are interested in the bundleOut folder under the same.

  • Then, run the following command directly

appcenter codepush release -a hemanth-aero-pmdp/ErnOuterAppAndroid -c TEMP_FOLDER_PATH/bundleOut -t 0.0.1 -d Staging

  • To apply the update immediately, make it a mandatory update via AppCenter portal.

  • Now, finally run the app and check if the update happens.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment