Le déploiement d’une application mobile sur les stores Apple et Google est un processus assez simple mais qui demande souvent du temps plus particulièrement pour les applications iPhone/iPads. Lorsque vous avez une application que vous mettez à jour souvent cela peut vite devenir pénible et chronophage. C’est la qu’intervient CodePush . CodePush va nous permettre de venir mettre à jour nos applications directement sur le périphérique de nos utilisateurs sans avoir à passer par le store.

Comment ça fonctionne ? CodePush va nous servir de dépôt centrale pour le bundle javascript. Ensuite le sdk de CodePush que nous ajouterons dans notre application s’occuperas de récupérer ce build lorsqu’il sera mis à jour.

Cependant vous pourrez quand même être amener à publier une mise à jour en repassant par les stores si les modifications que vous avez faites nécessitent le rebuild votre application. exemple : L’ajout d’une librairie venant rajouter des ressources directement au sein du code natif des applications.

CodePush est majoritairement utilisé pour faire des petites modifications ou bien des corrections de bug.

Installation

La première chose à faire pour utiliser code-push est d’installer le CLI et créer un nouveau compte.

npm install -g code-push-cli
code-push register

Création d’une application

Une fois que vous vous êtes enregistré sur le service vous allez pouvoir enregistrer votre application.

Si votre application React Native est disponible à la fois sur Android et sur iOS. Il est préférable d’enregistrer deux applications sur le service.

Voici comment ajouter vos applications sur CodePush

Android :

code-push app add yourAppName-android android react-native

iOS:

code-push app add yourAppName-iOS ios react-native

A chaque fois qu’une application est créée le service vous renvoi les clés de déploiement que vous devrez saisir lors de l’installation dans votre application React Native.

Pour commencer nous allons ajouter la dépendance Code Push à notre projet :

yarn add react-native-code-push   react-native link

Il vous sera demander de saisir vos clés de déploiement

Saisissez la valeur de la clé de Production retournée précédemment. Ensuite il ne vous reste plus qu’à importer code-push et code-pushifier votre application.

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
import codePush from 'react-native-code-push'

export default class CodePushArticle extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit index.ios.js</Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

CodePushArticle = codePush(CodePushArticle)
AppRegistry.registerComponent('CodePushArticle', () => CodePushArticle)

Par défaut, CodePush vérifiera les mises à jour à chaque démarrage de l’application. Si une mise à jour est disponible, elle sera téléchargée silencieusement et sera installée la prochaine fois que l’application sera redémarrée (soit explicitement par l’utilisateur, soit par le système d’exploitation), ce qui garantit l’expérience la moins invasive pour vos utilisateurs finaux.

Il est aussi possible d’ajouter la vérification des mises à jour manuelle via un bouton au sein de l’application. Consulter la documentation pour voir les différentes possibilités.

Publication des mises à jour

Pour publier des mises à jour vous devez vous placer à la racine du projet React Native et exécuter les commandes suivantes :

code-push release-react youAppName-iOS ios
code-push promote yourAppName-ios Staging Production

La première commande va générer un nouveau bundle.js et le déployer sur le serveur codePush. Ensuite la deuxième commande va vous permettre de basculer le bundle de la partie Staging à Production.

Code Push permet aussi d’autres options pour la publication des mises à jour comme le fait de pouvoir déployer une mise à jour sur seulement un certain pourcentage de vos utilisateurs.Ou bien encore de pouvoir faire un rollback de version en cas de problème avec la nouvelle mise à jour.

code-push release-react yourAppName-iOS ios --rollout 25%
code-push rollback yourAppName-iOS Production

Nous en avons terminé avec la base de Code Push. Pour conclure Code Push est un outils vraiment très pratique lorsqu’il s’agit de faire des corrections rapidement. De plus il est très complet dans cet article nous avons couvert juste les fonctionnalités basiques, vous pouvez aller lire la documentation sur github pour voir l’ensembles des possibilités.