Get started with ‘CodePush’ (React-Native)

Microsoft ”CodePush“

CodePush is a cloud service that enables React Native & Cordova developers to deploy mobile app updates instantly to their users’ devices.

How it works ?

It works by acting as a central repository that developers can publish updates to (JS, HTML, CSS and images), and that apps can query for updates from (using provided client SDKs for Cordova and React Native).

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). Once the app is released, updating either the JavaScript code (e.g. making bug fixes, adding new features) or image assets, requires you to recompile and redistribute the entire binary, which of course, includes any review time associated with the store(s) you are publishing to.

Integrating CodePush for React Native Project

I’ll share my experience, with integrating “CodePush” for React Native Project. I found code-push and react-native-code-push documentation too long. So, it took quite long time for proper integration.

We will be working on :

1. Create a CodePush account push using the CodePush CLI
2. Register your app with CodePush, and optionally share it with other developers on your team
3. CodePush-ify your app and point it at the deployment you wish to use (Cordova and React Native)
4. Release an update for your app
5. Check out the debug logs to ensure everything is working as expected
6. Live long and prosper! (details)

Install and Setup the CLI

# Install the CLI
npm install -g code-push-cli

# Register for an account via github or email
code-push register

# Register your app. We call it AwesomeApp.
code-push app add AwesomeApp

Setup React Native Project

cd to your React Native project and install the “plugin”.

npm install --save react-native-code-push@latest

Plugin integration in project

The integration experience is different for iOS and Android, so perform the following setup steps depending on which platform(s) you are targeting.

• iOS Setup
• Android Setup

If you want configure your application for multiple deployment

https://github.com/Microsoft/react-native-code-push#multi-deployment-testing

Next, setup the sync for your component. There are more options on the syncing of the code eg. frequency, install etc.

Wrap your root component with the codePush higher-order component: example: index.android.js and index.ios.js

class AwesomeApp extends Component {
  ...
}

let codePushOptions = { 
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, 
  installMode: codePush.InstallMode.ON_NEXT_RESUME 
}
AwesomeApp = codePush(codePushOptions)(AwesomeApp);

module.exports = AwesomeApp

Done with the integration part. Now you can build the release version on both platforms.

For iOS :

Release build configuration (check your scheme), and run in Simulator or device.

For Android :

react-native run-android --variant=releaseStaging

Game Time : Push Live Code

Releasing updates

code-push release <appName> <updateContents> <targetBinaryVersion> [--deploymentName <deploymentName>] [--description <description>] [--disabled <disabled>] [--mandatory] [--noDuplicateReleaseError] [--rollout <rolloutPercentage>]

Make some changes to AwesomeApp now. Perhaps change a <Text>? Or a color?

Then push it:

For iOS :

code-push release-react AwesomeApp ios 

For Android:

code-push release-react AwesomeApp android

code-push release-react AwesomeApp android example

It should show upload successful as image above.

Bring the app to foreground, and it should still be the same (though it has now fetched the update).

Bring the app to background, then foreground again, and viola! It will install the new code and reflect the changes!

Other commands:

# Release a mandatory update with a changelog
code-push release-react MyApp-iOS ios -m --description "Modified the header color"

# Release an update for an app that uses a non-standard entry file name, and also capture
# the sourcemap file generated by react-native bundle
code-push release-react MyApp-iOS ios --entryFile MyApp.js --sourcemapOutput ../maps/MyApp.map

# Release a dev Android build to just 1/4 of your end users
code-push release-react MyApp-Android android --rollout 25% --dev true

# Release an update that targets users running any 1.1.* binary, as opposed to
# limiting the update to exact version name in the build.gradle file
code-push release-react MyApp-Android android --targetBinaryVersion "~1.1.0"

Debugging the application

You can view the logs in the terminal if the app is using the codepush bundleURL

For iOS:

Debug with running simulator

code-push debug ios

code-push debug iOS output example

For android:

Debug with with connected android device with app running.

code-push debug android

code-push debug android output

Checking Deployment History

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

code-push deployment history AwesomeApp Staging

Sample output for deployment history

Sample output for deployment history with error

Pitfall: Not Getting Updates

There are quite some pitfalls, and the long documentation doesn’t help.

I hope this guide has been more concise (:

If you are not getting the update,

• make sure the version of the iOS app (in Info.plist), matches that when you code push with targetBinaryVersion
• make sure the app is using CodePush.bundleURL()
• make sure the keys are correct, and you deploy production/staging correctly

Anyway thanks to the official guide and http://samwize.com/2017/01/19/guide-to-integrating-codepush-for-ios-react-native-project/ for their effort.