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 thebuild-and-testjobactions/checkout@v4: Checkout codeactions/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!