Implement CI for react app with github action

Continuous Integration (CI) is a crucial practice in modern software development, streamlining processes to ensure code quality and efficiency. In this article, you will learn how to implement continuous integration in your React application using GitHub Actions - a powerful CI tool integrated directly into your GitHub repository.

Read more about Continuous Integration (CI)

Why GitHub Actions?

GitHub Actions provides an all-in-one CI solution within your repository, allowing developers to automate workflows seamlessly

Prerequisites

Before we begin, make sure you have the following:

• GitHub account
• A React application hosted on GitHub
  • If you haven't already, please follow Install a ReactJS app
  • A sample React app with Typescript, Vite, Eslint, Prettier, Testing: react-starter

Step 1: Creating a Workflow File and Configure your workflow

1.1 Creating a Workflow File

Create a YAML file named .github/workflows/ci.yml in your repository root. This file will define your CI/CD workflow.

cd /path/to/your/project

mkdir -p .github/workflows
vim .github/workflows/ci.yml

Define workflow name

name: GitHub Actions React Demo

Configure Trigger

Start by defining the triggers for your workflow. You can trigger the workflow on specific actions like push events, pull requests, or tagged releases. You also can specific any branch.

on:
  push:
    branches: 
      - main
      - develop

  pull_request:
    branches: 
      - main
      - develop

Configure Jobs

Specify the jobs to be executed in your workflow. Each job represents a specific task, such as installing dependencies, building the app, running tests, and deploying the app.

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18]

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install Dependencies
        run: yarn install

      - name: Lint
        run: yarn lint
      
      - name: Format code
        run: yarn lint:prettier

      - name: Run Tests
        run: yarn test
      
      - name: Build
        run: yarn build

Explaining the Workflow File:

• jobs: Defines tasks to run in parallel.
  • build-and-test: Describes the build and test job.
    • runs-on: Specifies the operating system for the job.
    • strategy: Sets a matrix for different configurations.
    • steps: Contains tasks to be executed as part of the build-and-test job
    • actions/checkout@v4: Checkout code
    • actions/setup-node@v4: setup NodeJS with a specific version

Step 2: TRigger workflow

Push your code chanegs and create a Pull Request to trigger the workflow Once you've defined your GitHub Actions workflow, the CI process will be triggered automatically when you create a pull request to the main branch.

git checkout -b feature/setup-cicd
git add .
git commit -m 'Setup CICD'
git push origin feature/setup-cicd

Step3: Monitor the progress

Monitor the progress and outcomes in the "Actions" tab of your repository. GitHub Actions will automatically validate your changes by the defined workflow, providing feedback on the success or failure of the CI process directly in the pull request This approach allows you to catch potential issues early in the development cycle, fostering a more collaborative and efficient coding environment.

Step 4: Customization

Customize the workflow to fit your project's needs, adding steps for specific CI tasks or checks.

Conclusion

Setting up Continuous Integration for your React application with GitHub Actions is a straightforward process that significantly improves your development workflow. With automated testing and building processes, you can catch errors early and deliver reliable software to your users. Leverage GitHub Actions' flexibility to adapt your workflow to your project's unique needs and accelerate your development pipeline.

Happy coding!