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.

1_tzLugWE7HVCZNwGmc7CMfg.png

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

1_SZmxQBOIOQpnwwSxAmk3FA.png

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

Read more on building and running docker image on docker desktop

  • Push your work to GitHub.

Step 3. Workflow for GitHub Action

  • On the repository for the app, click on Actions

1_csTx0jma955nVS5gzFIgkQ.png

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.

1_dSJ_U9SHg3QMs0Pa-xWZxQ.png

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.

1_OgeLXvRlRxqzujhxartKWw.png

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.

If all is rightly done, you should have your workflow on GitHub running and completed

After that, go ahead to check your DockerHub and Vercel for the latest updates.

1_nPMDzTllualb-Xgrc-G-wQ.png

Vercel Updated


Only registered users can post comments. Please, login or signup.

Start blogging about your favorite technologies and get more readers

Join other developers and claim your FAUN account now!

Avatar

Goodnews Sandy

Frontend Developer

@sandygudie
I am committed to getting things done.
Stats
41

Influence

3k

Total Hits

1

Posts

Discussed tools