In the software development context most important workflows are run, test, built and deployment. Without CI/CD all these processess are done manuelly, from running tests to running the build, to getting the build and deploying on the server. These manual processes quickly become inefficient and it takes enough time to set them up.
In the DevOps paradigm Continuous Integration automates the actions and previous processess until the deployment on servers.
CircleCI is one of the CI tools and delivery platform, that helps rapidly to release code with confidence by automating much of the software development process, making it easy to test and deploy end products.

In this article we’re going to setup CI/CD pipeline for a React app over Github using CircleCI.

Getting Started

Let’s get started by creating our React app through CRA.

$ npx create-react-app react-app-ci
$ cd react-app-ci
$ npm install

Once finished create github repository and push the code into the master branch.

If you don’t already have CicrcleCI account create one on https://circleci.com/signup/
Once logged in, go to Projects section and find your repository then click Set Up Project

A dialog popup will be opened to select the config.yml file of the project, there is two options : Create it immediately using their config template or select the branch which contains the config.yml file.
We will chose the second option, before that we have to create folder named .circleci, inside the folder create config.yml file.

We specify the CircleCI version, orbs and jobs. Orbs are shareable packages of CircleCI configuration you can use to simplify your builds. Jobs are collection of rules to execute and their run order defined in steps.

version: 2.1
orbs:
     node: circleci/node@3.0.0
jobs: 
     build: 
       docker:       
             -image: circleci/node:12.13.1    
       working_directory: ~/repo
       steps:      
            - checkout
            - run: npm install
            - run: npm run build

since our project is a react app managed by npm/yarn we need the node package installed in the working environement of CircleCI. So we import it as a docker image as it seen in the config.
Commit and push the code to your Github repository.

Returning to set Up action, CircleCI scans the default branch which contains an existing config.yml, Click Let’s Go to proceed

Going to Pipelines section and start building the pipeline workflow, press Run workflow from start

Once the workflow starts the pipeline status will change to Running as seen above, clicking on build we can monitor what actually happened.

If all that is working fine when finished the pipeline status becomes success

We can add more actions in the jobs as steps (Checks, ESLint analyse, Unit test, Deployment…)

Note that CircleCI pipelines are triggered by Github webhook in each commit on master branch. The workflow jobs will run automatically when you push some changes to your repository.

Setup Continuous Delivery with CircleCI and Github Pages

After building CI pipeline for a React app on Github, now we go to setup CD pipeline for the same app in order to automate the deployment process.
In the next step of the build generation we’ll add the deploy workflow to Github Pages.

Firstly install gh-pages dependency using npm | yarn command

$ npm i gh-pages –save

In the second we have to add deploy script also homepage field in package.json file as the below

“deploy”: “gh-pages -d build”

“homepage”: “https://your_github_username.github.io/react-app-ci”

Returning to config.yml and completing the previous jobs with the following steps

version: 2.1
orbs:
     node: circleci/node@3.0.0
jobs: 
     build: 
       docker:       
             -image: circleci/node:12.13.1    
       working_directory: ~/repo
       steps:      
            - checkout
            - run: npm install
            - run: npm run build
            - run:
                  name: git conf
                  command: |
                     git config --global user.email "your_github_email"
                     git config --global user.name "your_github_username"
            - add_ssh_keys:
                     fingerprints:
                    - "02:21:37:25:65:ca:42:b5:ba:77:fb:xx:xx:xx:xx:xx"
           - run: npm run deploy

As shown above we added the git conf step to configure the Git username/email in the CircleCI working direcrtory. Then in order to authorize the workflow to deploy the build resources from CircleCI into Github Pages we must add SSH key with its fingerprint. Checkout here how to create SSH key for Github deployment on CircleCI.
Last step we proceed to the deployment through the npm command which points to the gh-pages script already configured in the package.json.
Commit and push the changes to the Github, once done go to the CircleCI dashboard and monitor the workflows execution.

Now the build has been published on github pages and the app is accessible through the homepage url dropped in package.json

Cheers!!

CircleCI

Posts

Setup Continuous Integration Pipeline with CircleCI, Github and ReactJS