Join us

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

- 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
# Cache and Install dependencies
COPY package.json .
COPY package-lock.json .
RUN npm install
# Copy app files
COPY . .
# Expose port
# Start the app
CMD [ "npm", "start" ]

  • Add to the .gitignore file

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


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.
  # Triggers the workflow on push or pull request events but only for the main branch
    branches: [main]
    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
  # This workflow contains multiple jobs
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
        node-version: [14.x]

    # Steps represent a sequence of tasks that will be executed as part of the job
      # 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
          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
    # 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]

      - 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
          username: ${{ secrets.REACTUSERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push
        uses: docker/build-push-action@v2
          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
          image: ${{ secrets.REACTUSERNAME }}/shopping-app-react:latest
          run: |
            echo "runing the docker image"
    runs-on: ubuntu-latest
      - uses: actions/checkout@v2
      - uses: amondnet/vercel-action@v20
        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
          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.

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.


Vercel Updated

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

Start blogging about your favorite technologies, reach more readers and earn rewards!

Join other developers and claim your FAUN account now!


Goodnews Sandy

Frontend Developer

I am committed to getting things done.
User Popularity



Total Hits