by Indrek Lasn
How to setup continuous integration (CI) with React, CircleCI, and GitHub
To ensure the highest grade of quality code, we need to run multiple checks on each commit/pull request. Running code checks is especially useful when working in a team and making sure everyone follows the best and latest practices.
What kind of checks are we talking about? For starters, running our unit tests to make sure everything passes, building and bundling our frontend to make sure the build won’t fail on production, and running our linters to enforce a standard.
At my current company, we run many checks before any code can be committed to the repository.
CI lets us run code checks automatically. Who wants to run all those commands before pushing code to the repository?
I’ve chosen CircleCI due to its generous free tier, Github thanks to its community, and React since it’s easy and fun to use.
Create React App
Create your react app, however, you like. For simplicity sake, I’m using CRA.
Creating Github repository
Once you’re finished with CRA, push the code to your Github repository.
Setting up CI with CircleCI
If you already have a CircleCI account, great! If not, make one here.
Once you logged in, click on “Add Projects”
Find your repository and click “Set Up Project”
Now we should see instructions.
Simple enough, let’s create a folder called
.circleci and place the
config.yml inside the folder.
We specify the CircleCI version, orbs, and workflows. Orbs are shareable configuration packages for your builds. A workflow is a set of rules for defining a collection of jobs and their run order.
Push the code to your repository
Head back to CircleCI and press “Start building”
If you click on the build, you can monitor what actually happened. For this case, the welcome orb is a demo and doesn’t do much.
Setting up our CircleCI with React
config.yml setup to run test, lint and build checks with React.
After you pushed this code, give the orb the permissions it needs.
Now each commit/PR runs the workflow jobs.
Check CircleCI for the progress of jobs. Here’s what CircleCI is doing for each commit:
- Set up the React project
- Runs eslint to check the formatting of the code
- Runs unit tests
- Runs test coverage
All of the above workflow jobs have to succeed for the commit and build to be successful.
Now each commit has a green, red or yellow tick indicating the status! Handy.
Thanks for reading, check out my Twitter for more.
Here are some of my previous articles you might enjoy:
How to setup a powerful API with GraphQL, Koa and MongoDB
Building an API is super fun! Especially when you can leverage modern technologies such as Koa, GraphQL and MongoDB.medium.freecodecamp.orgHere are some of the best resources to improve your coding skills
There are lots of high-quality coding tutorials, books, and overall resources on the web. I've gathered the very best…www.strilliant.comSupercharge your debugging experience for Node.js
hypothetical: You might check every line of code and try to find a typo. No typo found... next, you might start using…www.strilliant.com