Deploy React Apps Faster: Heroku & CircleCI CI/CD Pipeline

Simplifying Development with CI/CD Pipelines

When building large-scale React applications, collaboration among team members can be a blessing and a curse. On one hand, many hands can make light work. On the other hand, multiple developers working on different branches and environments can lead to what’s commonly known as “integration hell.” Fortunately, this chaos can be tamed with a robust Continuous Integration/Continuous Deployment (CI/CD) pipeline.

The Power of CI and CD

Before we dive into creating a CI/CD pipeline, let’s review the basics. Continuous Integration (CI) ensures that code changes are consistently integrated into a central repository. This process involves automated building, testing, and validation of code changes to prevent broken applications. Continuous Delivery (CD) takes it a step further by automatically deploying the application to a target environment after successful integration.

Creating a CI/CD Pipeline for React Apps

To create a CI/CD pipeline for a React application, we’ll use CircleCI for CI/CD and Heroku as our hosting service. Here’s a step-by-step guide to get you started:

Setting Up the React Application

Clone our example repo and run the following commands to start the application:


npm install
npm start


This will start the app on port 3000. You should see a quote generator that retrieves quotes from The Simpsons and serves them randomly.

Setting Up Heroku Hosting Environment

Create a new Heroku application to host our React app. Install the Heroku CLI globally and log in to Heroku via the command line. Then, create a Heroku application using a buildpack for create-react-app:


heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git


Configuring CI/CD in React with CircleCI

To configure CircleCI, log in with your GitHub profile and set up a new project. Create a .circleci folder in the root of your project folder and add a config.yml file with the following code:


version: 2.1
orbs:
heroku: circleci/[email protected]
jobs:
build:
docker:
- image: circleci/node:14
steps:
- checkout
- run: npm install
- run: npm test
deploy:
docker:
- image: circleci/node:14
steps:
- checkout
- run: npm run build
- heroku/deploy-via-git:
api-key: $HEROKU_API_KEY
app-name: $HEROKU_APP_NAME
workflows:
build-and-deploy:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only:
- main


This configuration file sets up a CI/CD pipeline that installs dependencies, runs tests, builds the application, and deploys it to Heroku.

Writing Tests using React and Enzyme

To ensure our application is working as expected, we need to write some tests using the React testing library and Enzyme. Install Enzyme and add the following tests to App.test.js:

“`
import React from ‘eact’;
import { shallow } from ‘enzyme’;
import App from ‘./App’;

describe(‘App’, () => {
it(‘renders without crashing’, () => {
shallow();
});
});
“`

Managing Pull Requests

To ensure that our main GitHub branch is protected, we need to configure CircleCI to require successful builds before merging pull requests. On the GitHub repository, go to the settings tab, click on Add Rule in the Branches tab, and select the ci/circleci: build option.

With this CI/CD pipeline in place, you can now collaborate with your team members without worrying about integration nightmares.