Awesome CICD React

This project aim to show how easy it is to set up a fully automated suites of CI and CD with the new Create React App.

Automated CI & CD Setup

Using the new Create React App, the setup of a fully automated CI and CD stack is relatively easy with CircleCI, CodeClimate and Heroku.

The full post can be view at this blog post.

TLDR Version

Step 1: CircleCI 2.0 setup

Create a .circleci directory and a config.yml file in it. Fill up the content with this:

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:6
    steps:
      - checkout
      - restore_cache: # special step to restore the dependency cache
          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: Setup Dependencies
          command: npm install
      - run:
          name: Setup Code Climate test-reporter
          command: |
            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
            chmod +x ./cc-test-reporter
      - save_cache: # special step to save the dependency cache
          key: dependency-cache-{{ checksum "package.json" }}
          paths:
            - ./node_modules
      - run: # run tests
          name: Run Test and Coverage
          command: |
            ./cc-test-reporter before-build
            npm test -- --coverage
            ./cc-test-reporter after-build --exit-code $?

Then head over to CircleCI to build the project.

Step 2: Setup CodeClimate

Now, head over to CodeClimate, sign in and build the created github project. We should get this at the end of analyse:

In order to use Test Coverage feedback, we will also need to copy the Test Reporter ID from Settings > Test Coverage and add it into CircleCI environment variable.

In CircleCI, navigate to Project > Settings > Environment variable and add CC_TEST_REPORTER_ID with copied Test Reporter ID.

Step 3: Create a Heroku App

Next, we will use a buildpack to create our heroku app.

$ heroku create REPLACE_APP_NAME_HERE --buildpack https://github.com/mars/create-react-app-buildpack.git
$ git push heroku master
$ heroku open

Step 4: Setup Automated Deployment

Navigate to the newly create app in Heroku Dashboard.

• Go to Deploy tab and Connect to the correct github repo.
• Enable Automatic deployment and check Wait for CI to pass before deploy

Thats It.

With just 3 steps, we have a fully automated integration and deployment suites. Now with every commit that is pushed to GitHub, it will send a trigger to CircleCI. Once the test passed, if it was on the master branch, it will also be automatically deployed to Heroku.

View a deployed app here.

This project was bootstrapped with Create React App.