How To Setup CI/CD In Expo Application With Travis CI.
By: Oluwatobi Shokunbi
Tags: Continuous Delivery, Travis Ci, Continuous Integration, Expo

Expo is a really cool tool used in creating mobile and web applications, this tool comes pre-built with amazing API's that makes development way too easy.

When building with Expo the need to set up Continuous Integration (CI) and Continuous Delivery (CD) becomes visible especially when working on a large project with other team members, setting up CI/CD help you build and deploy applications with ease and confidence and most especially allow you focus on what matters most which is writing code!

Setting up CI/CD help in automating your workflow and this becomes very handy in the long run but setting it up could sometime be a hassle so in this article I’ll be showing you how to set up continuous integration and Delivery in your Expo application.

Prerequisites

Setting up Expo on your Machine

It’s assumed you have Node installed on your machine so navigate to a work folder for this project you might have created and run the code below on your console

npm install expo-cli --global

This will install the expo-cli globally on your machine.

then to create a new project run

expo init expo-travis-ci-cd-setup

Congratulations! you’ve successfully set up expo on your machine.

This will create a folder called expo-travis-ci-cd-setup which contains all our project files.

Navigate into the expo-travis-ci-cd-setup folder and run;

expo start #or yarn start #or npm start

this will launch the Metro Bundler in your web browser, where you can see information about the current project and perform actions like, run on Android simulator, iOS simulator, etc.

On the left side of the screen in the image above you’ll see some cool things you can do with expo — you can try them out if you wish.

Setting the project up on GitHub

Now we have our project all set up, we’d like to push this to GitHub, as not only you would be working on this project. To do this login to your GitHub account and create a new repository for this project.

Click on New repository and fill in the needed fields then save.

Now we have our repository we’d have to upload our source code to GitHub so navigate to your project folder in your console/terminal and run the following code

$ git init

this will initialize GitHub in your project folder

$ git remote add origin https://github.com/just1and0/expo-travis-ci-cd-setup

this will associate your repo with the project file

$ git add .

then

$ git commit -m "initial commit"

finally

$ git push -u origin master

You might be prompted to put in your GitHub login details, it’s just GitHub’s way of ensuring the owner of the repo is the one pushing code or the person pushing to the repo is authorized.

If all goes well you should end up with this similar message on your console

Now we have successfully pushed our codes to GitHub, so what’s next!?

Now we have our codes on GitHub we’d have to set up continuous Integration for running tests and also building an iOS and Android build.

Setting Continuous Integration (CI) & Continuous Delievery(CD).

Before we begin to set up CI, it’s important to note that Expo doesn't come with a package for writing tests by default, you’d have to install a package to handle that. I’ll suggest you add a package to handle tests before you continue with this setup.

To know how to set up Jest(for testing) in expo applications do click here.

Once you have Jest or any testing package installed, you’d need to add a new file to your project called .travis.yml and paste the following code in it.