CI/CD Pipeline with React App using GitHub Actions

In this tutorial, I’m going to illustrate how to handle Continuous Integration and deployment using GitHub actions.

Goals: Using GitHub Actions to automate:
- Building and pushing docker image to DockerHub,
- Deploy updates to Vercel for every push and pull request.

GitHub Actions

Prerequisite
- A React App
- A Vercel Account
- DockerHub Account
- Basic knowledge of Docker, Vercel, and GitHub

You can get the final codes on GitHub, Let’s get right in;

Step 1. Check React App is working

You could decide to create a new React project or use an existing React project. For the tutorial, I will be using an existing Ecommerce App.

let’s start our React app to check that it’s working, run npm start,
it should be running on local host:3000

Ecommerce App

Step 2. Setup for Docker

To Build a docker image for the App, Add Dockerfile and .dockerignore file to the root of the project folder.

                FROM node:14-alpine AS development
ENV NODE_ENV development
# Add a work directory
WORKDIR /app
# Cache and Install dependencies
COPY package.json .
COPY package-lock.json .
RUN npm install
# Copy app files
COPY . .
# Expose port
EXPOSE 3000
# Start the app
CMD [ "npm", "start" ]

Add to the .gitignore file
**/node_modules
**/npm-debug.log

Push your work to GitHub.

Step 3. Workflow for GitHub Action

On the repository for the app, click on Actions

GitHub Actions

On the Actions page, we have various CI templates in the GitHub Marketplace, to get started in building the workflow, we will use the Nodejs template.

GitHub MarketPlace

Click on the “set up this workflow” to see the default YAML file, and replace the codes with this below:

                # This is a basic workflow to help you get started with Actions
name: CI-CD

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [main]
  pull_request:
    branches: [main]
  # # Allows you to run this workflow manually from the Actions tab
  # workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains multiple jobs
  build_test:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: setup node
        uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node-version }}

      # install applicaion dependencies
      - name: Install dependencies
        run: |
          npm install
      # build and test the apps
      - name: build
        run: |
          npm run build
          npm test
  push_to_Docker_Hub:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # build docker image and push to docker hub
    # only if the app build and test successfully
    needs: [build_test]

    steps:
      - name: checkout repo
        uses: actions/checkout@v2

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v1

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1

      - name: Login to DockerHub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.REACTUSERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push
        uses: docker/build-push-action@v2
        with:
          context: ./
          file: ./Dockerfile
          push: true
          tags: ${{ secrets.REACTUSERNAME }}/shopping-app-react:latest

      - name: Run the image in a container
        uses: addnab/docker-run-action@v3
        with:
          image: ${{ secrets.REACTUSERNAME }}/shopping-app-react:latest
          run: |
            echo "runing the docker image"
  push_to_vercel:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: amondnet/vercel-action@v20
        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}} 
          vercel-project-id: ${{ secrets.PROJECT_ID}}
          vercel-args: "--prod"

For Docker image:

You have to initialize a new repo in DockerHub where the image would be pushed to. I created a repo called “shopping-app-react”
Go to ” settings/secrets/actions” in GitHub to create a secret for each of the parameters:
REACTUSERNAME : A user name for the docker image; “use any name”
DOCKERHUB_TOKEN: Token is obtained from DockerHub, go to “account setting/security”, you would have to create one if you don’t have it.

GitHub Action Secrets

For Vercel:

Deploy your project to Vercel from your local machine using the Vercel Cli on. Learn here
The deployment creates a `.vercel` folder in your project with a `project.json` containing the `projectID` and `orgID`.
Create a secret token in GitHub for each of the parameters: VERCEL_TOKEN: create a token on Vercel with the name,
VERCEL_ORG_ID and PROJECT_ID: `orgID` and `projectID`
Your repo on GitHub must be on the main branch.