How to deploy react-native app all in one click-Part2

Lee young-jun
3 min readDec 12, 2021

I could release Live or QA version according to a prefix of the repository tag.
However tagged repository can’t access Github cache and it’s mean that I can’t improve deploying speed.
So I am creating new deploying flow with a manual workflow.
And new workflow will enable to deploy Live or QA version without modifying config files.

I showed you how to split your workflow to another files before. read more Part1.

Jest

My workflow with version tags ran unit tests for each Platforms(Linux, Macos), but it is useless to run one more.

So I decided to extract Jest from workflows for Android and iOS.
Jest will be ran only one time in all-in-one and workflows for Platforms will run only build.

Needs

Your jobs of the workflow will be run in parallel by default.
If you want to run sub workflows only after testing, you should use the keyword ‘needs’ like this

android-qa:
needs: lint-jest
if: ${{ github.event.inputs.isDevelopment == 'true' }}
uses: olulo/kickgoing/.github/workflows/deploy-android-all-in-one.yml@master
ios-qa:
needs: lint-jest
if: ${{ github.event.inputs.isDevelopment == 'true' }}
uses: olulo/kickgoing/.github/workflows/deploy-ios-all-in-one.yml@master

lint-jest is your job for testing.

Cache

If you have multiple jobs, you would realized that you should install npm package for every jobs, every time. And you will waste time for waiting.

To solve this problem, Github support caching.
Do you worry about your repository storage limits? Don’y worry, Github provides maximum 10G for caching.
However you must know Github will remove your cache if you don’t access the cache for over a week.

Path

You can specify where you want to cache by passing an input ‘path’ to Github cache action.

- name: Cache node modules
uses: actions/cache@v2
with:
path: ./node_modules

path can be relative or absolute path from you repository.
In this case, I am caching npm package folder.

Key

To use caching for your installed package, you should specify key.

- name: Cache node modules
uses: actions/cache@v2
with:
path: ./node_modules
key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('./yarn.lock') }}

If your package is different according to OS, your key should contain runner.os. And you can create hash by hashFiles.
In my case I uses yarn.lock file to make key, because yarn.lock will be changed according to installed package versions.

cache-hit

If you want to skip installing when your packaged is cached, use cache-hit.
You can check if your package is cached or not with cache-hit.

- name: Cache node modules
uses: actions/cache@v2
id: cache-node-modules
...
- name: Install dependencies
if: steps.cache-node-modules.outputs.cache-hit == ''
run: |
yarn install && npx jetify

restore-keys

if you want to use your cache in spite of it not matched to hash file, you can specify candidate keys.
You can specify candidate keys to use for finding other caches by using the keyword ‘restore-keys’

- name: Cache node modules
uses: actions/cache@v2
restore-keys: |
${{ runner.os }}-cache-node-modules

outputs

To reuse cache key for other jobs, you can output it by setting ‘outputs’.

install-npm:
runs-on: ubuntu-latest
steps:
...
- name: Create npm cache key
id: npm-cache-hash
run: echo "::set-output name=hash::${{ runner.os }}-cache-node-modules-${{ hashFiles('./yarn.lock') }}"
- name: Cache node modules
uses: actions/cache@v2
id: cache-node-modules
with:
path: ./node_modules
key: ${{ steps.npm-cache-hash.outputs.hash }}
...
outputs:
cache-key: ${{ steps.npm-cache-hash.outputs.hash }}
lint-jest:
needs: install-npm
runs-on: ubuntu-latest
steps:
...
- name: Load cached node modules
uses: actions/cache@v2
id: cache-node-modules
with:
path: ./node_modules
key: ${{ needs.install-npm.outputs.cache-key }}

In this case, I am caching ‘node_modules’ folder and reusing it for Jest job.

To be continue in Part3

--

--