Continuous Integration & Continous Deployment (CICD) for React App using Circle CI, Heroku, Github

4 min readFeb 1, 2021

This post is about the continuous integration of react application in brief. Here we will go through the development stack which we will be using for this process. I’ll create a front-end continuous integration with CircleCI and set up the automated deployment of react app using Heroku.

With every commit that is made on the application, it will send a trigger to CircleCI. Once the test has passed, it will also be automatically deployed to Heroku.

Let’s start by looking at various components used in this process

New React application

Make sure you have Node.js and npm installed & then create react app using create-react-app and create a repository on Github, I will be running the app using use-a-simple-Express-server way for the deployment.

npx create-react-app react-cicd 
cd react-cicd
git init
git remote add origin <YOUR REMOTE REPO URL>

Create an Express Server

In the root of your project, create a new folder called “server” (for example), and inside of it, add a file called “server.js”.

Steps for starting an express server are:

Install the latest version of Express.

npm install express --save

2. Import Express, and create a new instance of Express and Tell Express to serve up the public folder and everything inside of it add the following code to the file server.js.

const express = require('express');
const app = express();
const path = require('path');
port = process.env.PORT ||  3000;
app.use(express.static(path.join(__dirname, '../reactcicd/build')));
app.get('*', (req,res) => {
res.sendFile(path.join(__dirname, '../reactcicd/build/index.html'));
});
app.listen(port, () => {
console.log(`Server listening on the port::${port}`);});

CircleCI Integration with React App

To integrate circleci with react app you need a config.yml file inside a .circleci folder at the project’s root. Your project's root should be like below.

Content of config.yaml should look something like this:

version: 2.1
orbs:
  node: circleci/node@1.1.6
jobs:
  build-and-test:
    executor:
      name: node/default
    steps:
      - checkout
      - node/with-cache:
        steps:
          - run: npm install
          - run: npm test
          - run: npm test
workflows:
  build-and-test:
    jobs:
      - build-and-test

Now, commit and push your code and signup to CircleCI and click Add Project on the projects section. Choose your repository and build.

Deploy to Heroku

Steps to connect your react application on Heroku and deploy are:

In case you don’t have a Heroku account already, create one here.
Create a new Project using Nodejs deployment, go to the deploy section inside your project and link your GitHub repository of react project as shown below

3. Tick the Wait for CI to pass before deploy and click enable automatic deploy

Commit code and build and test the project

at the time when we commit our code and enable automatic deploys which will trigger the build once the code is successfully pushed to master branch and test is passed in circleCI pipeline.