Expo React Native Complete CI / CD Workflow Using Github Actions
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.
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!
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!
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!
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!
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!
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.🚀 😎!
