Continuous Integration and Deployment setup for React App

Fully automated CI and CD setup that give feedback on pull request for React App!

I have an updated article that uses CircleCI v2 and new cc-test-reporter by CodeClimate. Please read the updated article here.

Setting up a React development environment can be confusing and daunting to newcomers. You often heard developers saying different packages like babel, webpack and etc, are needed (not entirely true) as well.

With React getting more popular, there are a fews boilerplate project aim to help developer create a suitable React development environment. create-react-app is one of the most popular starter template.

The aims is to allow developers to create react app with zero build configuration.

Developers no longer have to worry about how should webpack be setup, what should be configured with babel to use es6, which linter and test package to use. Everything will just work out of the box. Yes, is so easy!

For developers who needed to touch the underlying configuration, it have a npm run eject that will allow developers to mess with the configuration and do what couldn’t be done previously. Only thing to note is, once eject is run, it cannot be reversed.

Development Stack for React

The following guide aim to help developers build a Continuous Integration and Continuous Deployment stack for React app. We will be using CircleCI, CodeClimate and Heroku. If you do not have a account at any of the services above, head over to sign up one, is FREE!.

At the end, we would have a React app in a Github Repo that will automatically deploy any changes on master branch to Heroku after all tests passes. Here is a sample of the deployed React website.

Lets Start!
First step is to follow the create-react-app guide to create a new react app. Do this:

$ npm install -g create-react-app
$ create-react-app my-react-app
$ cd my-react-app/
$ npm start

Then browser should automatically open a page at http://localhost:3000/. If you see a Welcome to React page running, everything is good.

CircleCI Setup
Next, we need to add a little configuration to setup CircleCI for our project. Create a circle.yml in the root directory and add the following:

machine:
  node:
    version: 6.0.0
test:
  override:
    - npm test -- --coverage
  post:
    - npm install -g codeclimate-test-reporter
    - codeclimate-test-reporter < coverage/lcov.info

We have to use node v6 because create-react-app only works with v6 and above. We override the test to run the option with npm test — — coverage to gather coverage report. At the end, we install codeclimate-test-reporter to send the coverage report located at coverage/lcov.info to CodeClimate.

Setup Git
Create a repo in Github and do the following:

$ git init
$ git remote add origin git@github.com:username/new-repo-here
$ git add .
$ git commit -m “first commit”
$ git push -u origin master

This would push the project that we had created into the github.

Build and Test the Project
Head over to CircleCI, sign in and build the newly created project. At the end of the build, you should see a all green like this:

circleci result

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

codeclimate 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 CODECLIMATE_REPO_TOKEN with copied id.

env setup in circleci

Heroku Deployment Setup
In order to deploy React on Heroku , we will use a buildpack. Do the following:

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

We pushed the latest master branch to heroku with git push heroku master. A webpage will be open at the end showing the Welcome to React page.

Next, we will have to navigate to the newly create app in Heroku Dashboard to setup automated deployment. Do the following on the dashboard:

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

enable automatic deployment

We are done!
With a few setup, we have a fully automated continuous integration and deployment suite ready. Now with every commit that is pushed to GitHub, it will send a trigger to CircleCI and CodeClimate. Once the test passed, if it was on the master branch, it will also be automatically deployed to Heroku.

View the sample repo here and the deployed website here!

This is first posted on my own blog accessible via this link.

Thanks for reading! If you like it, please hit 👏👏👏

I enjoy reading and writing about tech and product especially related to boosting the productivity of developers. You can say hello to me on my Twitter or my blog.