Just1and0
Published in

Just1and0

How To Setup CI/CD In Expo Application With Travis CI.

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 #oryarn start#ornpm 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.

A lot is actually going on here, but basically what we’re doing is installing the project dependencies and running our test, if the test is successful then our job will attempt to login to our expo account and publish the new build for our project.

Once you’re done, you’d want to push the changes to our GitHub repo.

$ git add .

then

$ git commit -m "initial commit"

finally

$ git push -u origin master

Setting up Travis CI

Now we have our project on GitHub all that’s left to do is associate this project with Travis CI, to do this go to Travis CI and login to your account.

Once you’re logged in click on your account avatar and hit Settings.

Once in setting, search for the name of the GitHub repo you want to set up CI/CD, mine is expo-travis-ci-cd-setup.

If the repo exists, it should come up as an option, select the settings button beside the repo name.

In settings, you’d want to add some environment variables that the CI will work with, remember in our .travis.yml we have two variables, EXPO_USERNAME, and EXPO_PASSWORD.

In settings, scroll down to the Environment Variables section and add these two variables which are your expo username and password.

Once you’ve added these variables you’d see it listed as part of your environment variable.

Once this is done, you’re all set! The next time you push code to GitHub, the CI will run tests and publish your expo project!

Conclusion

This is a basic setup of a CI/CD, you can make modifications for specific setup and be rest assured it’ll perform, this can also be replicated for other CI/CD vendors too; everything is executable through CLI.

Having this kind of workflow is priceless and will help in the long run, you’d be able to focus on just writing codes and be sure your client, project manager or other team members will get updates as code is being pushed to the GitHub repo.

If you found this helpful, please clap and share it, I’d like this article to reach as many people as possible.

If you’d like to see the source code, you can check it out here, don’t forget to star ⭐️

--

--

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