Everything You Need To Know About Tech

CI and React Application Deployment

0 54

Setting up a React development environment may seem confusing and complicated for beginners. You’ve probably heard that developers talk about the need for various packages, such as babel, webpack, and so on (but this is debatable).

With the growing popularity of React, there are several projects with templates that help developers set up a suitable environment for React. create-react-app is one of the most popular starter templates.

It is designed to allow developers to create React applications without build configuration.

Developers no longer have to worry about how to configure webpack, how to configure Babel to use es6, or which linter to use. Everything will just work out of the box. Yes, it’s that simple!

For developers who need to manage the basic configuration – there is an npm run eject feature that allows you to interact with the configuration and do what you could not do before. The only thing to note is that after starting the eject, it cannot be undone.

Development Stack for React

I wrote this guide to help developers create Continuous Integration (CI) and Continuous Deployment stacks for React applications. We will use CircleCI , CodeClimate and Heroku . If you do not have an account in any of the above services, go to register – it is FREE!

In the end, we will have a React application in Github Repo that automatically expands any changes to the master branch in Heroku after passing all the tests. Here is an example of a deployed React site.

Let’s start!

The first step is to follow the create-react-app tutorial to create a new React application. Do it:

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

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

Configure CircleCI

Then we need to add a little configuration to install CircleCI for our project. Create the .circleci and config.yml folder in this directory and add the following:

      - image: circleci/node:6
      - 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 > ./cc-test-reporter
            chmod +x ./cc-test-reporter
      - save_cache: # special step to save the dependency cache
          key: dependency-cache-{{ checksum "package.json" }}
            - ./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 $?

This setting is for CircleCI 2.0 – Circle 1.0 will roll back from August 31, 2018.

The build step installs node: 6. This requires node v6 or higher.

In steps, we first check the project, restore from the cache, if there is something, and then install the dependencies. We also install the cc-test-reporter tool provided by CodeClimate to send a coverage report.

Then we run test between the before-build and after-build commands according to the CodeClimate documentation . This notifies CodeClimate of the pending report, and when everything is complete, a report or error status is sent.

Git setup

Create a repository on Github and follow these steps:

Related Posts
1 of 26
$ git init
$ git remote add origin
$ git add .
$ git commit -m "first commit"
$ git push -u origin master

This will launch the project we created on GitHub.

Project assembly and testing

Go to CircleCI , log in, and build the newly created project. At the end of the build, you should see Run Test and Coverage fail.

Configure CodeClimate

The above failure is due to the fact that we still do not have the right to send a report to CodeClimate. So, let’s move on to CodeClimate , log in and build the project created by GitHub. At the end of the analysis, we should get:

To fix the CircleCI problem and use Test Coverage feedback, we need a Test Reporter ID. You can get it in the Settings> Test Coverage tab. Copy Test Reporter ID.

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

Configure Heroku Deployment

To deploy React to Heroku, we will use buildpack. Follow these steps:

$ heroku create REPLACE_APP_NAME_HERE — buildpack
$ git push heroku master
$ heroku open

We launched the fresh master branch in Heroku via git push Heroku master. The Welcome to React page opens.

Then we will need to go to the newly created application in Heroku Dashboard to configure automatic deployment. Do the following:

  • Go to the Deploy and Connect tab to the correct GitHub repository.
  • Include “Automatic deployment” and “check to Wait for CI to pass before deploy”.


With a few steps, we got a fully automated system for continuous integration and deployment. Now, with every commit launched on GitHub, the system will send a trigger to CircleCI and CodeClimate. Once the tests pass, and if the code is in the master branch, it will also be automatically deployed to Heroku.

Browse the model repository here and the expanded site here!


This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More