CI/CD with React

What is CI/CD?

A beginner's guide to CI/CD for React?

Continuous Integration (CI) is a development practice that helps ensure that software components work together. Continuous delivery (CD) is the ability to deploy your integrated code into production without the need for human intervention.

Let’s start building with the very basic TODO application and will see how we can write unit tests and then we will integrate it with Circle CI which is one of the most popular CI tools.

Prerequisites

We are going to use the React testing library in order to write the unit tests. For this purpose, if you don’t have any project you may clone this repository from here which has a pre-written unit test of the todo list application.

What we will cover?

In this article, we will cover how to set up CI/CD for a react application. The tools that we will use to setup are:

• Circle CI which will help us to build a pipeline.
• Codecov to generate the code coverage report.
• Netlify a free hosting server to host static web applications.

Scenario

We want when developers push the code to Github, a pipeline should execute all unit tests, generate code coverage reports, the status should be available on the PR after it is created.
And it should be deployed to Netlify when the PR is merged.

Clone Github Repository

Now, Let’s clone the Github repository. Initially, you will find the structure of the application should look something like this

Run test command to make sure tests run correctly

yarn test

Setting Up CI With CircleCI

In order to set up, you must have an account on CircleCI if you have already one that’s great. Log in, and go to the project dashboard and click on Setup Up Project

After selection, it will ask you to provide a config.yml file.

Let’s create a folder with the name .circleci and add a config.yml file in it.

version: specify circle ci version.

docker: specify a docker image used to create the container of the environment.

checkout: used to check out the code from the current branch into the working directory.

run: execute a bash command.

save_cache: used to store a cache of files/directory in the CircleCI storage. i.e it installs the npm dependencies only once and then cache the node_modules folder using a hash of the package.json file of your project as the cache key.

restore_cache: used to restore cache file using cache key.

command: where your tests run.

Now commit and push it on the main branch, then select Use Existing Config and select Start Building

Select Start Building

After selection, you will see all your tests start passing on circle CI.

Setup Codecov

In order to setup codecov, we have to do a few configurations in our existing codebase. We need to add a test coverage command which will generate the report of tests. Add the following commands in the package.json file.

"test:coverage": "cross-env CI=true npm test -- --env=jsdom --coverage",
"upload:test-report": "./node_modules/.bin/codecov",

and in config.yml let’s add the orbs

codecov: codecov/codecov@1.0.2

Why we need orbs? because it will upload our coverage report without dealing with complex configuration. Add a step in config.yml to upload the coverage report.

- codecov/upload:
   file: './coverage/clover.xml'

After the edit, the config.yml should look something like this

Now signup quickly to codecov and link the current repository

Go to Add new repository, search and select your repository.

Copy the token and go to the Project Settings of your project in CircleCI

Select Environment Variables and Add Environment Variable.

Now commit the code and make a pull request and wait a few minutes to execute all the checks. You will see a codecov report in your PR.

Setup Deployment on Netlify

In the final step, we will deploy the application on netlify and will make it a part of our pipeline. First of there should be netlify-cli needs to be installed. Since I am using yarn I can install by typing the following command otherwise you can use npm too.

yarn add netlify-cli

After installation create a deployment script to deploy the app

"netlify:deploy": "netlify deploy --dir=./build -p -m \"$(git log -1 --pretty=%B)\""

Now navigate to your config.yml file add the deployment step

- run: npm run netlify:deploy

Now we need to signup on netlify and connect your GitHub, then we need to copy NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID from netlify and add it as an environment variable in CircleCI. You may look at the following screenshots for the steps.

Now navigate to the user setting generate the access token and copy that access token.

In your CircleCI go to project settings and add it as NETLIFY_AUTH_TOKEN and paste the value as we did for codecov.

Now select the site overview in your Netlify dashboard and select Site Settings

Copy that API ID

Add it as environment variable with name NETLIFY_SITE_ID

Whenever the pipeline is executed it will get the Token and Site Id from the Environment variable so we don’t need to pass it from package.json which is of course not secure. Now push your code and it will deploy your changes on netlify once you merge your changes on the main branch.

All is done! The final version of the code can be accessed here.

Happy Coding! 🎉 🥳