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.

antoniojgage/awesome-cicd-react