Setting up a
React development environment can be confusing and daunting to newcomers. You often heard developers saying different packages like
es6 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
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 service above, head over to sign up one, is FREE!.
At the end, we would have a React app in 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. Visual feedback will also provide on
pull request like this:
First step is to follows the create-react-app guide to create a new 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:
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.
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 id.
Heroku Deployment Setup
$ 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.