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 you’re 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 front end 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 because of its generous free tier, GitHub because of its community, and React because it’s easy and fun to use.
Create your React app to your liking. For simplicity’s sake, I’m using CRA.
Once you’re finished with CRA, push the code to your GitHub repository.
If you already have a CircleCI account, great! If not, create one here.
Once you’ve logged in, click on Add Projects.
Find your repository and click Set Up Project.
Setting up a project
Now we should see some instructions.
Simple enough, let’s create a folder called
.circleci, and place the
config.yml inside the folder.
We specify the CircleCI
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.
orbs: react: "thefrontside/[email protected]:alpha" version: 2.1 workflows: push: jobs: - react/install - react/eslint: requires: - react/install - react/test: requires: - react/install - react/coverage: requires: - react/install
Head back to CircleCI and press Start building.
If you click on the build, you can monitor what actually happened. In this case, the welcome orb is a demo and doesn’t do much.
config.yml setup to run test, lint and build checks with React.
After you’ve pushed this code, give the orb the permissions it needs.
Yes, allow orbs
Each commit/PR now runs the workflow jobs.
Check CircleCI for the progress of the jobs. Here’s what CircleCI is doing for each commit:
All of the workflow jobs above have to succeed for the commit and build to be successful.
Each commit now has a green, red or yellow tick indicating the status! Handy.
☞ Understanding React
Welcome, how to Host React Website Live for Free using GitHub in 2020.
ReactJS Github API Search This is a ReactJS web App that provides API info about Github users and theirs repositories.