Overcoming Play Store & App Store hassle to deliver updates

Problem Statement:

We were asked to develop a mobile app that can help user play games. In the first launch there will be one game. After the app is launched, more games can be added to the app. This generally needs new game logic and assets. This will need an update to the app to run the new game logic. But we were asked to deliver the new game logic without the user being required to update the app through the Play Store or App Store.

Solution:

We were basically flutter developers but we found no good solution in flutter. As we started looking for the solution, we found we can solve this with React Native and CodePush.

What is React Native?

React Native is a mobile application development framework that allows us to write code in JavaScript and provides a bridge to interact with Native controls. JavaScript being a dynamic language, it’s code can be executed by the JavaScript engine.

What is CodePush?

CodePush is a platform that wraps the React Native app and allows developers to deploy mobile app updates directly to their user’s devices.

Why React Native & CodePush?

The challenge that we were facing was that we were only allowed to update JavaScript, HTML, CSS code through dynamic updates bypassing the Play Store & App Store. Any other native executable code is forbidden to be updated dynamically without going through App Store. Since React Native uses JavaScript and CodePush is permitted by App Store for dynamic updates that was the ideal combination.

Prerequisites:

• Initialize React Native app. For reference visit: https://reactnative.dev/docs/environment-setup .
• Run the app.

React Native & CodePush Integration:

Visit: https://docs.microsoft.com/en-us/appcenter/distribution/codepush/rn-get-started for reference on the process.

1. Install the App Center CLI:

• Execute this command in the terminal: npm install -g appcenter-cli
• Execute the following command: appcenter login
• You will be redirected to the browser where you will be asked to login. After successful login, click on Add new app.
• Add your application name, select release type, select OS and platform i.e. React Native. Click on add new app to complete adding app.
• After adding new app, you will be redirected to the overview page and then follow the steps for getting started.
• After completing the above steps goto Distribute -> CodePush and click on Create Standard Deployments.

2. Add the CodePush SDK to you app:

CodePush-ify your app:

As we are using React Native, select it and follow the steps:

• Install the React Native Client SDK: npm install — save react-native-code-push
• For iOS, Visit: https://docs.microsoft.com/en-us/appcenter/distribution/codepush/rn-get-started#ios-setup for reference.
• For Android, Visit: https://docs.microsoft.com/en-us/appcenter/distribution/codepush/rn-get-started#android-setup for reference.
• After completion of the setup process, copy and paste this code in your App.js.

import React, { Component } from ‘react’
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from ‘react-native’
// This is used to import CodePush in our app
import CodePush from ‘react-native-code-push’;
// This specifies when the app needs to check changes from server.
// 3 options are — ON_APP_START , ON_APP_RESUME , MANUAL
const CODE_PUSH_OPTIONS = {
checkFrequency: CodePush.CheckFrequency.ON_APP_START,
};
class App extends Component {
// As soon as the component is mounted, .sync method will allow checking for an update,
// downloading it and installing it, all with a single call.
// Whenever a new component is available, the install mode parameter specifies when the new compoenent should be loaded.
// IMMEDIATE will load the new component as soon as it is downloaded.
// Other options are — ON_NEXT_RESTART , ON_NEXT_RESUME , ON_NEXT_SUSPEND
componentDidMount() {
CodePush.sync({
installMode: CodePush.InstallMode.IMMEDIATE
}, this.syncWithCodePush, null);
}
// CodePush.sync method requires a sync status change callback
// The code in the following lambda will execute whenever any sync status changes.
syncWithCodePush = (status) => {
console.log(status);
}
state = {
count: 0
}
increment = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.increment}
>
<Text>Increment</Text>
</TouchableOpacity>
<View>
<Text>
You clicked {this.state.count} times
</Text>
</View>
</View >
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
button: {
alignItems: ‘center’,
backgroundColor: ‘#DDDDDD’,
padding: 10,
marginBottom: 10
}
})
// Decorate the class App with CodePush and pass CODE_PUSH_OPTIONS as a configuration.
export default CodePush(CODE_PUSH_OPTIONS)(App);

• Now save the apk and run it on your phone.
• Now make changes to the existing code. For reference we have added a decrement function to the counter.

import React, { Component } from ‘react’
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from ‘react-native’
// This is used to import CodePush in our app
import CodePush from ‘react-native-code-push’;
// This specifies when the app needs to check changes from server.
// 3 options are — ON_APP_START , ON_APP_RESUME , MANUAL
const CODE_PUSH_OPTIONS = {
checkFrequency: CodePush.CheckFrequency.ON_APP_START,
};
class App extends Component {
// As soon as the component is mounted, .sync method will allow checking for an update,
// downloading it and installing it, all with a single call.
// Whenever a new component is available, the install mode parameter specifies when the new compoenent should be loaded.
// IMMEDIATE will load the new component as soon as it is downloaded.
// Other options are — ON_NEXT_RESTART , ON_NEXT_RESUME , ON_NEXT_SUSPEND
componentDidMount() {
CodePush.sync({
installMode: CodePush.InstallMode.IMMEDIATE
}, this.syncWithCodePush, null);
}
// CodePush.sync method requires a sync status change callback
// The code in the following lambda will execute whenever any sync status changes.
syncWithCodePush = (status) => {
console.log(status);
}
state = {
count: 0
}
increment = () => {
this.setState({
count: this.state.count + 1
})
}
decrement = () => {
this.setState({
count: this.state.count — 1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.increment}
>
<Text>Increment</Text>
</TouchableOpacity>
<View>
<Text>
You clicked {this.state.count} times
</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={this.decrement}
>
<Text>Decrement</Text>
</TouchableOpacity>
</View >
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
button: {
alignItems: ‘center’,
backgroundColor: ‘#DDDDDD’,
padding: 10,
marginBottom: 10
}
})
// Decorate the class App with CodePush and pass CODE_PUSH_OPTIONS as a configuration.
export default CodePush(CODE_PUSH_OPTIONS)(App);

• Now let’s push an update of the app to our CodePush server:
• First, we need to login to the appcenter in your terminal: appcenter login
• A new browser window will open and after logging in will display the Authentication code. Copy the code and paste it in the terminal: ? Access code from browser: paste_code_here
• Now, goto appcenter.ms in your browser goto Distribute -> CodePush and copy the command under Release an Update section. The command will look something like this:

For staging -

• appcenter codepush release-react -a your_user_id/your_project_name -d Staging

For production –

• appcenter codepush release-react -a your_user_id/your_project_name -d Production

Paste the copied command in your terminal to deploy your changes. Now, whenever the user restarts the application the changes we made will be loaded automatically.