Author

Sakul Mia

CI/CD Pipeline for React + Node.js Application with GitHub Actions

This document provides an overview of how to set up Continuous Integration and Continuous Deployment (CI/CD) using GitHub Actions for a React (frontend) and Node.js (backend) application.

Prerequisites

1. GitHub repository: A GitHub repository for your React and Node.js application.
2. Node.js & npm: The application should use Node.js for the backend and React for the frontend.
3. GitHub Actions: Familiarity with GitHub Actions workflows.
4. AWS/GCP/Heroku/Other Deployment Targets: A service to deploy your application (optional, depending on the target platform).
5. Docker (Optional): If you're using Docker to containerize your application, ensure that Dockerfile is available.

Overview

The CI/CD process is divided into the following stages:

1. Continuous Integration (CI): Every commit triggers a build and test process to ensure that the code is stable.
2. Continuous Deployment (CD): After successful builds and tests, the application is automatically deployed to the appropriate environment.

GitHub Actions Workflow

The CI/CD pipeline is defined in .github/workflows/ci-cd.yml within your repository. Below is an example configuration for a React (frontend) and Node.js (backend) application.

1. Creating the GitHub Actions Workflow File

Create a file at .github/workflows/ci-cd.yml in your repository.

on:
  push:
    branches:
      - main
name: 🚀 Deploy website on push

jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Get latest code
        uses: actions/checkout@v3

      - name: Use Node.js 16
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: 🔨 Build Project
        run: |
          npm install
          npm run build

      - name: 📂 Sync files
        uses: SamKirkland/[email protected]
        with:
          server: ${{ secrets.GIT_CPANEL_REACT_SERVER }}
          username: ${{ secrets.GIT_CPANEL_REACT_USER }}
          password: ${{ secrets.GIT_CPANEL_REACT_PWD }}
          local-dir: ./build/