CodePush

What is CodePush?
CodePush is an AppCenter cloud service that enables Apache Cordova and React Native developers to deploy mobile app updates directly to their user's devices.
Build: To connect with central repository so we can build our app:
  • Azure DevOps
  • GitHub/GitHub Enterprise
  • Bitbucket/GitLab
Test:
  • Test runs → to run test
  • Device sets → device configuration test runs
Distribute:
  • Release: We can distribute our app among teams and testers
  • Groups: Distribution groups allow us to organize our testers and manage versions of the app.
  • Store: Connect to Google Play Store / Intune
  • CodePush:Release an update to selected environment with the command:
                          
                          appcenter codepush release-react -a <username>/<appname> -d Production
                          
                        
  • Diagnostics: To track crashes, errors, and inspect any issues, our users or app may face.

CodePush Implementation

CodePush Implementation
                
                  import React, {useEffect, useState} from 'react';
                  import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
                  import codePush from 'react-native-code-push';
                  let codePushOptions = {checkFrequency: codePush.CheckFrequency.MANUAL};

                  function App() {
                    const [progress, setProgress] = useState(true);
                    useEffect(() => {
                      codePush.sync({
                        updateDialog: true,
                        installMode: codePush.InstallMode.IMMEDIATE,
                      });
                    }, []);
                    function codePushStatusDidChange(syncStatus) {
                      switch (syncStatus) {
                        case codePush.SyncStatus.CHECKING_FOR_UPDATE:
                          console.log('Checking for update.');
                          break;
                        case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                          console.log('Downloading package.');
                          break;
                        case codePush.SyncStatus.AWAITING_USER_ACTION:
                          console.log('Awaiting user action.');
                          break;
                        case codePush.SyncStatus.INSTALLING_UPDATE:
                          console.log('Installing update.');
                          setProgress(false);
                          break;
                        case codePush.SyncStatus.UP_TO_DATE:
                          console.log('App up to date.');
                          setProgress(false);
                          break;
                        case codePush.SyncStatus.UPDATE_IGNORED:
                          console.log('Update cancelled by user.');
                          setProgress(false);
                          break;
                        case codePush.SyncStatus.UPDATE_INSTALLED:
                          console.log('Update installed and will be applied on restart.');
                          setProgress(false);
                          break;
                        case codePush.SyncStatus.UNKNOWN_ERROR:
                          console.log('An unknown error occurred.');
                          setProgress(false);
                          break;
                      }
                    }
                    return (
                     <SafeAreaView style={{flex: 1}}>
                       <View style={styles.container}>
                         <Text style={styles.title}>Appcenter implementation</Text>
                         <Text style={styles.subtitle}>{`\u2022 CodePush Application`}</Text>
                       </View>
                     </SafeAreaView>
                    );
                  }

                  const styles = StyleSheet.create({
                    container: {
                      flex: 1,
                      backgroundColor: 'lightgreen',
                      justifyContent: 'center',
                      alignItems: 'center',
                    },
                    title: {
                      marginTop: 32,
                      fontSize: 35,
                      color: 'tomato',
                    },
                    subtitle: {
                      fontSize: 24,
                      fontWeight: '600',
                      color: 'blue',
                    },
                  });

                  export default codePush(codePushOptions)(App);