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