Continuous Integration and Deployment setup for React App
I have an updated article that uses
CircleCI v2 and new
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
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
masterbranch to Heroku after all tests passes. Here is a sample of the deployed React website.
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.
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:
- npm test -- --coverage
- 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.
Create a repo in Github and do the following:
$ git init
$ git remote add origin firstname.lastname@example.org: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:
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
CODECLIMATE_REPO_TOKEN with copied
$ 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
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.
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.