Expo React Native Complete CI / CD Workflow Using Github Actions

Shafran Naizer
Nov 22, 2020 · 5 min read
Image for post
Image for post

In this article I will show how we can setup a CI CD workflow using Github. Actions. When ever I search for expo cicd workflow articles there were only steps to build the iOS ipa file. And the apk file. here Im going to show how we can push a build to Google Play store & TestFlight using our Github Action CI CD.

TL:DR

Looks likes its two command to upload build to google playstore and TestFlight. But its not we have to some cofigurtations when we are uploading builds.first of all ill explain what exactly ou work flow looks like.we will have a tigger event on out workflow.fo this I have chooseed on push event.when event some pushes to release branch then our tigger will be activate. After that we have 4 jobs.Two build job for IOS and Android.Two Publishing jobs to IOS and Android.following diagram will show the detailed view our wokflow.Both Publishing builds will need the its parent build to complete.

  • Build-For-Android
  • Push-To-GooglePlay [Wait Until Android Build Complete]
  • Build-For-IOS
  • Push-To-Test-flight [Wait Until IOS Build Complete]

🚀 Let's write our worksflow start and triggers first.after will jump in to android then iOS.

Workflow Setup

In you GitHub repo you can see a tab called Action.navigate to actions tab and create a manual workflow it will give a sample workflow script for you.Delete all those things will write this from scratch.

STEP 1

First we have a name for our workflow. After that we have crated a trigger to workflow in this I have used the on push branch to rigger our workflow.looks like bread and butter thanks to GitHub Actions. Now will see the android workflow setup.

Prerequisite for Android Workflow

  • Google Developer Account
  • Expo Application With Expo Account
  • Google Service Account
  • At least one time you need to submit you build mannuly in Google Play.

Let’s create Android Job now!

STEP 2

In this step you can see I have start with jobs.so our first job is Build-for-android. This will run on MacOs-latest.in side the job we have sub-steps to follow.first sub step to use actions/checkout@v2 this is used to get access to our workflow. You can see more about this with following link.

Second sub step we have used setup-node@v1 . This is used to install node to our resources. We can define a node version by using with syntax. Here I have used node-version: 12.x. Third sub step is to setup java on. Our resocures. you can define java properties by using with syntax.

Forth sub step I have used expo/expo-github-acitons@v5. This will allow us to use Expo CLI commands.we can sign in our expo dashboard by this command.here you might wonder that are the secrets.its a secirty step that I had taken to mask my credentials.You can navigate to you repository setting by top nav bar.in. the settings there will be tab called secrets.you can add secrets variables here.i have added two secrets for now.

Then we have Install deps step. This step will run can install command to install all dependencies that needs our project.After that we have the. Main step Buliding our andoird APK.this will run and wait until build queue finishes on you. Expo dashboard.this steps will take some time depending on queue status.

Hurray we have completed out first job. Now we have to push to playstore our APK file.

Let’s create Publish Playstore Job now!

STEP 3

In this job you can see only two differences which is the second line and the last step.in the second line I have add a wait check for this job.this job will wait until our build job complete.so we can get the latest build from expo servers.seems like other steps are pretty much same.one last step upload to google play console wll run the command.in this command you have to give — latest tag and — key tag where the Google service account Json file path.if you don’t have the google service account please generate the file. You can find the steps from follwing link.

Yeassssh! we are done with our android workflow.Lets jump in to IOS Workflow Now!

Prerequisite for IOS Workflow

  • Expo Application With Expo Account
  • Apple Developer Account
  • Apple App Specific Password

Let’s create iOS Job now!

STEP 4

Seems like first threee jobs are same as android one.lets look at the sub step four.i have installed Xcode in to our resources.we have use with syntax add configurations to Xcode installation.i have used Xcode version 11.2.1 and pass my Apple ID and password using secrets.you already know how to use this secrets.the next step is also a same step that we used in android build.final step is to use expo build:ios .in here we cant say like just expo build iOS this will require our apple io and password so I have used secrets to provide Apple ID and password.

Eureka we have complete up to 75% now. Only thing is left we have to wait until iOS build finishes and upload it to TestFlight.Lets start.

Let’s create Publish TestFlight Job now!

STEP 5

Finally we are here to publish our build to TestFlight.this is a job that depends on our iOS build job. So I have used need syntax to wait until our iOS build job is completed.This job is also using same checkout, node, java, Xcode, expo-action steps.the only special thing here is I have used this amazing action called Expo upload:ios with 2FA support

to bypass the 2FA. Its a really masterpiece of action setup that allows me to pass the 2FA.All thanks goes to the main author of this package.

That package needs env ACTIONS_ALLOW_UNSECURE_COMMANDS : true flag to run the commands.also it needs our Apple ID , password, app specific password if you don’t know what this app specific password please feel free to check the following link.

Also this will need you mobile number to send the auth code.once this command is running you will get a ngrok link that you can enter the auth code. Once you enter that our workflow is fully completed.

Let’s wrap it up!

Complete Github Action Workflow

The above snippet shows our full work flow code that you can get a clear idea where the things are should.

Expo CI CD setup is really exjoyable experience I hope evenrtihig will run smooth with your workflows. Cheers.🚀 😎!

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store