Automatisez vos dĂ©ploiements Expo avec Bitbucket Pipelines 🚀

L’un des avantages d’utiliser Expo c’est de pouvoir tester votre application sur Android ou IOS trĂšs facilement sans avoir Ă  acheter un apple developer account Ă  99$/an 😞, ou Ă  gĂ©nĂ©rer un APK qu’il va falloir transfĂ©rer par Dropbox ou Drive đŸ˜©.

Grace au Expo client ❀ vous pouvez rendre disponible votre application Ă  travers un lien. Vous avez juste Ă  partager ce lien avec vos Beta-testeurs pour les permettre de tester rapidement votre application. đŸ“±

Quand vous modifiez votre code et vous publiez Ă  nouveau tous vos utilisateurs vont recevoir la nouvelle version de votre app sans pour autant rĂ©installer l’app ou installer la MAJ depuis les stores, C’est le Over the air 💹

Vous voulez connaitre la magie derriùre ? Je l’explique ici 🧐

Dans cet article nous allons voir comment automatiser le processus de publication d’une nouvelle release afin qu’elle soit directement disponible dans le Expo client Ă  chaque nouveau push. ☁

Comment publier ? đŸ’»

Pour publier une application dans le Expo client et ainsi la rendre disponible Ă  travers un lien on exĂ©cute qu’une seule commande:

$ expo publish

Ici nous ne spécifions pas de release channel. donc notre app sera déployée dans larelease channeldefault.

expo publish Ă©quivaut Ă  expo publish --release-channel default

Les releases channel sont la pour créer différents environnements de travail pour vous. Vous pouvez avoir autant de release channel que vous voulez.

Dans cet article nous allons utilisĂ© 2 releases channel, une pour un environnement de test : staging , et l’autre pour notre environnement de production : production.

En général les releases channel sont liés à nos branches. On va naturellement donc avoir notre branche master(production) et une branche develop(staging).

Du coup si on veut déployer en staging on fait :

expo publish --release-channel staging

Et si on veut déployer en production on fait :

expo publish --release-channel production

Ici le problĂšme c’est que ce n’est pas automatisĂ©. Nous dĂ©veloppeurs nous aimons automatiser les choses parce qu’on est paresseux 😂.

L’idĂ©e c’est d’automatiser le processus de telle sorte que quand on push sur develop notre app est directement dĂ©ployĂ©e sur Staging , quand on push sur master notre app est dĂ©ployĂ©e en production.

Comment Automatiser ? ⏱

Les pipelines Bitbucket nous permettent d’automatiser notre process de dĂ©ploiement trĂšs facilement. Il existe d’autre providers comme Github actions , gitlab , Circle CI etc. Dans cet article nous allons utiliser Bitbucket đŸ€Ș.

Etape 1 : Configuration de Expo 🔧🔹

  • CrĂ©er un compte Expo: Il nous faut un compte expo pour pouvoir publier nos apps. Pour crĂ©er un nouveau compte on se rend sur expo.io
  • CrĂ©er un projet expo avec la commande expo initou utilisez un projet existant.

Etape 2 : Configuration de Bitbucket 🔧🔹

  • CrĂ©er un repo bitbucket.
  • S’assurer de faire un npm i qui va gĂ©nĂ©rer un fichier package.lock.json avant le push.
  • Faire un push du code source sur le repo distant.
  • Activer les pipelines dans l’onglet pipelines de votre projet et choisissez le JS comme langage de programmation

  • AprĂšs avoir choisi le JS comme langage, un fichier bitbucket-pipelines.ymlsera gĂ©nĂ©rĂ© , c’est le fichier de configuration et c’est la que tout va se passer. Ne modifiez rien pour le moment et faites juste le commit.

  • Sauvegardez vos identifiants expo dans vos variables d’environnement. On en aura besoin dans le bitbucket-pipelines.yml pour nous connecter Ă  expo. Allez dans > Repository settings > Repository variables puis ajoutez votre username et votre mot de passe 🔑.

Variables d’env

Etape 3 : DĂ©ploiement 🚀

Pour automatiser notre dĂ©ploiement nous allons principalement nous baser sur le fichier de configuration bitbucket-pipelines.yml. Dans ce fichier nous allons dĂ©crire Ă©tape par Ă©tape ce qu’il faut faire quand il ya un nouveau push en fonction des branches.

Le fichier est dĂ©jĂ  dans votre projet vous pouvez l’ouvrir et y coller ceci : cliquez ici pour copier.

Dans cette configuration nous spécifions deux branches master pour déployer en production et develop pour déployer en staging.

Vous pouvez créer une branche develop à partir de master et faire un commit pour tester , vous verrez que votre app sera déployée sur expo avec le lien :

https://exp.host/@USERNAME/PROJECT?release-channel=staging 🌏

de mĂȘme que la branche master

https://exp.host/@USERNAME/PROJECT?release-channel=production 🌏

DĂ©ploiement en Staging

DĂ©ploiement en production

Et dans l’onglet dĂ©ploiements vous pouvez voir vos dĂ©ploiements

DĂ©ploiements

✅

Cette configuration est assez basique mais vous pouvez bien l’adapter vous à votre workflow.

Abonnez vous sur ma chaine youtube ïžđŸ”” je prĂ©pare une sĂ©rie de videos sur Expo.

Merci ✌

© 2020 - Mouhamed Aly Sidibe