Create a GIT check in the ReactJS APP

2022-07-30

In this article, we will create a GIT check for the react.js app to ensure our build is working correctly. During the development and deployment the app, it's a common situation when someone commits the code and doesn't check if his code is building. Because when we are running our app using command

yarn start

yarn dev

or a similar one. The code will work, and you could skip the errors. But when you try to build the code using

yarn build

the code could fail. To avoid that situation we could use GIT checks. GIT check will be run automatically once someone commits and pushes (to the branch we specified) or create a Pull Request (PR) to this branch.

Create a folder in your root folder called ".github" and create the folder inside called "workflows".
Create a new file called "build-check.yml". The structure will look like this:

Paste this code to the "build-check.yml" file we just created:

version: 2.1

orbs:
  heroku: circleci/heroku@0.0.10

jobs:
  build:
    docker:
      - image: circleci/node:15.0.0
    working_directory: ~/repo
    steps:
      - checkout
      # install dependencies
      - run:
          name: Install Dependencies
          command: npm install

workflows:
  heroku_deploy:
    jobs:
      - build
      - heroku/deploy-via-git: # Use the pre-configured job, deploy-via-git
          app-name: $HEROKU_APP_NAME
          requires:
            - build
          filters:
            branches:
              only: main

If you commit to the specified branch you will be able to see the status of the GIT check in the GitHub actions tab

or if it was a PR you can see in the PR tab your GitHub repo

By doing this small thing of creation GIT check you will keep time during the development and everyone who will be checking the PR will be sure that you didn't destroy the build and it won't fail during the production deployment.

You can create other types of GIT checks for eslint, prettier, etc. We believe it will be useful for you.