Setup Continuous Integration (CI) With React, CircleCI, and GitHub

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 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.

Code checks at Newly

CI lets us run code checks automatically. Who wants to run all those commands before pushing code to the repository?

Getting Started

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 React App

Create your React app to your liking. For simplicity’s sake, I’m using CRA.

Create 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, create one here.

Once you’ve logged in, click on Add Projects.

Adding a Project to CircleCI

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 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.

  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

Push the Code to Your Repository

Start building

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.

Setting Up CircleCI With React

Use 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.

Settings -> Security -> 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:

  • Set up the React project.
  • Runs ESLint to check the formatting of the code.
  • Runs unit tests.
  • Runs test coverage.

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.

If you’re curious to learn more about the best practices for security, scalability, and dev ops, start from this book.

Recommended Reading

React Redux binding with React Hooks and Proxy

Understanding React [setState](https://morioh.com/p/1250c804cabb/understanding-react-setstate "setState")

Creating Micro Frontends using Web Components (with Angular and React)

Aalpha Experts Are Your Choice Hire Mobile App Developers in India

JavaScript Features You Should Know Before Learn React

Deploy ReactJS App with AWS S3

Create Your First React App In Easy Steps

reactjs javascript github

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Host ReactJS Website Live for Free using GitHub in 2020

Welcome, how to Host React Website Live for Free using GitHub in 2020.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Why JavaScript is the most used language in all over Github

Ever wondered why JavaScript is the most used language in all over Github, the most popular language on the StackOverflow and, top technology for software development? Through this blog, I’ll try to justify the hype. JavaScript is a high-level programming language, meaning it is close to our common English. Traditionally, JavaScript was built for front-end web development along with HTML and CSS to make web pages interactive.

ReactJS Github API Search

ReactJS Github API Search This is a ReactJS web App that provides API info about Github users and theirs repositories.