Automating your React Native library's build process

In my last blog post, I explained about the tools we will be using for your react native library. We are now going to automate the build process.

All open-source Github repositories have free Github Actions available with which we can automate most of our workflows. I'll be using Github Actions throughout the automation process.

The library's build consists of the following items ﹣

• Linting
• Running Tests
• Publishing the test coverage
• Publishing the example app to expo
• Publishing the stories to chromatic
• Publish the storybook which contains documentation as a static site

You can find my build workflow in the .github/workflows/build.yml file of my react-native-better-image project. This is how the build process should look like ﹣

When to trigger the workflow

I wanted the build workflow to ensure the master branch is always stable. Hence it will run on all the pushes to master. But it will not run for tags, as I have planned another release workflow for this

name: build
on:
  push:
    branches:
      - master
    tags:
      - '!*' # Do not execute on tags
    paths:
      - example/*
      - src/*
      - test/*
      - __tests__/*
      - '*.json'
      - yarn.lock
      - .github/**/*.yml

Linting

Since we are using react-native-community/bob in our project, we can run both lint & typescript scripts in the package.json file which is enough to complete the lint process

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

Testing & Coverage

For displaying the test coverage, I decided to use code climate for open source projects. They also have a nice action available at paambaati/codeclimate-action.

Code climate checks your code for best practices and provides you with maintainability metrics. Along with that, you'll also get code coverage reports. Once you setup code climate you can add their badges to your repo that gives everyone a live code quality score ﹣

The following configuration is used for running tests ﹣

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

Once both linting & testing jobs are completed, you have to push your code coverage to code climate. Following their docs you need to create a secret in your repository with name CC_TEST_REPORTER_ID after which add the following configuration

  coverage:
    needs: [test, lint]
    name: coverage
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - uses: paambaati/codeclimate-action@v2.5.3
        env:
          CC_TEST_REPORTER_ID: ${{secrets.CC_TEST_REPORTER_ID}}
        with:
          coverageCommand: npx yarn test --coverage
          debug: true

Publish example app to expo

Publish should also happen after the lint & test jobs. This time we will be using the expo/expo-github-action. As per the action's docs, you'll have to add your expo username & password to your repo's secrets under the name EXPO_CLI_USERNAME & EXPO_CLI_PASSWORD.

If you have an organization, you can add it under the organization secrets and share it with all your repositories!

The first step to publish is to run yarn bootstrap command. However, the next step expo run should run inside the example directory. For this we will use the working-directory config

  publish:
    needs: [test, lint]
    name: Publish example app to Expo 🚀
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      - run: npx yarn bootstrap
      - working-directory: example
        run: expo publish

You'll get a published page for your library's example app. You can check out for the page of my react-native-better-image library's example app.

Publish stories to chromatic

Similar to expo, chromatic also have a GitHub action available in chromaui/action. You have to create a new project in chromatic and get your project token. Then add it to your repository's secrets under the name CHROMATIC_PROJECT_TOKEN

We need to run chromatic action inside the example directory since our storybook lives in this directory. The chromaui/action didn't have an option to run it inside a specific directory. So I had to manually add the following script in my example app's package.json file ﹣

"chromatic": "npx chromatic"

Then added the following workflow configuration which manually runs chromatic ﹣

  chromatic:
    needs: [test, lint]
    name: Publish storybook to chromatic 🧪
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn chromatic
        working-directory: example
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Publish storybook as a static site

I used Netlify to publish my storybook as a static site. I was initially planning to use GH Pages, but I needed the 1-click rollback & Deploy Previews offered by netlify. I installed the Netlify app which automatically takes care of the building the repo & deploy previews so I didn't have to write any actions config.

If you are interested to use GitHub pages for your library, you can use the Deploy to GitHub Pages action for this purpose.

You can also try Netlify CLI if you want to configure deploys with netlify through GitHub Actions.

This build workflow is actively used in two of my libraries rex-state & react-native-better-image

In the next blog post, I'll explain how to set up the review workflow!