CI/CD pipeline setup in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the branch to trigger the pipeline in a GitHub Actions workflow.

React Native

on:
  push:
    branches:
      - [1]

Drag options to blanks, or click blank then click option'

Amain

Bdevelop

Cfeature

Drelease

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a feature branch that is not the main integration branch.

Using a branch name that does not exist in the repository.

The main branch is commonly used as the primary branch to trigger CI/CD pipelines.

2fill in blank

medium

Complete the code to install dependencies in a React Native project using npm in a GitHub Actions step.

React Native

- name: Install dependencies
  run: npm [1]

Drag options to blanks, or click blank then click option'

Abuild

Binstall

Cstart

Dtest

Attempts:

3 left

💡 Hint

Common Mistakes

Using npm start which runs the app instead of installing.

Using npm build which is not a valid npm command.

The npm install command installs all dependencies listed in package.json.

3fill in blank

hard

Fix the error in the GitHub Actions step to run tests with Jest.

React Native

- name: Run tests
  run: npm [1] test

Drag options to blanks, or click blank then click option'

Arun

Btest

Cstart

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting run causes npm to misinterpret the command.

Using npm test alone is valid but not with an extra test argument.

The correct command to run a script named test in npm is npm run test.

4fill in blank

hard

Fill both blanks to define a job that runs on Ubuntu and checks out the code.

React Native

jobs:
  build:
    runs-on: [1]
    steps:
      - uses: [2]

Drag options to blanks, or click blank then click option'

Aubuntu-latest

Bactions/checkout@v3

Cwindows-latest

Dactions/setup-node@v3

Attempts:

3 left

💡 Hint

Common Mistakes

Using Windows runner which is less common for React Native CI.

Using setup-node action instead of checkout for the first step.

The job runs on the latest Ubuntu runner and uses the actions/checkout@v3 action to get the repository code.

5fill in blank

hard

Fill all three blanks to create a step that caches npm dependencies to speed up the pipeline.

React Native

- name: Cache npm dependencies
  uses: [1]
  with:
    path: [2]
    key: $[3]

Drag options to blanks, or click blank then click option'

Aactions/cache@v3

B~/.npm

Crunner.os }}-node-${{ hashFiles('package-lock.json')

Dactions/setup-node@v3

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong action for caching.

Incorrect path for npm cache.

Wrong cache key syntax causing cache misses.

This step uses the actions/cache@v3 action to cache the ~/.npm folder. The cache key uses the OS and the hash of package-lock.json to create a unique cache.