How to Deploy a React Native App with Expo and CI/CD

Deploying a mobile application can be a daunting task, especially when juggling multiple environments, ensuring code quality, and maintaining a fast release cycle. With React Native and Expo, you can simplify this process significantly. This article will guide you through deploying a React Native app using Expo while integrating Continuous Integration and Continuous Deployment (CI/CD) practices. By the end, you'll have a solid understanding of how to automate your deployment pipeline efficiently.

What is React Native and Expo?

React Native

React Native is a popular framework developed by Facebook for building native mobile applications using JavaScript and React. It allows developers to create applications that run on both iOS and Android from a single codebase, significantly reducing development time.

Expo

Expo is a set of tools built around React Native that simplifies the app development process. It provides a managed app environment, which means you can focus on writing code without worrying about native configurations. With Expo, you can quickly prototype, build, and deploy your applications.

Why Use CI/CD?

CI/CD stands for Continuous Integration and Continuous Deployment, methodologies that automate the process of software testing and deployment. Here’s why you should consider implementing CI/CD for your React Native apps:

• Faster Feedback: Automated tests provide immediate feedback on code changes.
• Reduced Human Error: Automation minimizes the chances of mistakes during deployment.
• Frequent Releases: CI/CD allows for quicker iterations and more regular releases.
• Improved Collaboration: Teams can work in parallel, integrating their changes more effectively.

Prerequisites

Before we dive into deploying your app, ensure you have the following:

• Basic knowledge of React and React Native
• Node.js and npm installed on your machine
• An Expo account
• A GitHub account (or any other version control system)

Step 1: Setting Up Your React Native App

First, create a new Expo project if you haven't already. Open your terminal and run:

npx create-expo-app MyApp
cd MyApp

This command creates a new Expo project called "MyApp". You can now navigate into your project directory.

Step 2: Building Your App

With your app set up, you can start adding functionality. For example, let’s create a simple component:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, Expo!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

Run the app locally using:

npx expo start

Navigate to the URL provided in your terminal to see your app in action.

Step 3: Setting Up Version Control

Initialize a Git repository in your project:

git init
git add .
git commit -m "Initial commit"

Push your code to GitHub:

git remote add origin https://github.com/yourusername/MyApp.git
git push -u origin master

Step 4: Integrating CI/CD with GitHub Actions

GitHub Actions is a powerful CI/CD tool that allows you to automate workflows directly from your GitHub repository. Let’s create a workflow file to automate the build and deployment of your Expo app.

1. In your project, create a directory named .github/workflows.
2. Inside this directory, create a file named expo.yml.

Here’s a basic configuration for your workflow:

name: Build and Deploy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build the app
        run: npm run build

      - name: Publish to Expo
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
        run: expo publish --non-interactive

Explanation of the Workflow

• on.push: This triggers the workflow every time you push to the master branch.
• jobs.build: Defines a job that runs on the latest Ubuntu version.
• steps: Each step represents an action, such as checking out your code, setting up Node.js, installing dependencies, building the app, and publishing it to Expo.

Setting Up Secrets

To securely manage your Expo credentials, you need to add an Expo token to your GitHub repository secrets:

1. Go to your Expo account settings and generate an access token.
2. In your GitHub repository, navigate to Settings > Secrets > Actions.
3. Click on New repository secret and add EXPO_TOKEN with your Expo token as the value.

Step 5: Testing Your CI/CD Pipeline

Now that everything is set up, push your changes to the master branch:

git add .
git commit -m "Set up CI/CD with GitHub Actions"
git push origin master

Navigate to the Actions tab in your GitHub repository to see the CI/CD pipeline in action. If everything is configured correctly, your app will be built and published automatically to Expo.

Troubleshooting Common Issues

• Expo CLI Errors: Ensure you have the latest version of Expo CLI installed. Run npm install -g expo-cli.
• Build Failures: Check the logs in the GitHub Actions interface for specific errors. Ensure all dependencies are correctly defined in your package.json.
• Token Issues: If your app fails to publish, double-check that your EXPO_TOKEN is correctly configured in GitHub Secrets.

Conclusion

Deploying a React Native app with Expo and integrating CI/CD practices can streamline your development workflow, reduce errors, and speed up your release cycles. By following this guide, you should now have a solid foundation to build upon as you develop and deploy your mobile applications. Happy coding!