[Tutorial] Part 1 — Integrate CircleCI & Codecov

CI/CD (Continuous Integration/Continuous Delivery or Deployment) are methods to deliver applications with more frequency by using automation. CircleCI and Codecov are tools that can help you with this task.

Continuous Integration

Continuous Integration is when you develop a new feature and it is tested and consolidated with the shared repository. This automated process will provide some advantages like:

Catch Bugs 🐛
Reduce merge conflicts ✅
Ensures the quality of the code 🔎

Continuous Delivery or Deployment

Continuous Delivery or Deployment refers to automation on the advanced parts of a pipeline. The main difference between them is:

‍Continuous Delivery 📦 — Develop to release at any time.‍
Continuous Deployment 🤖 — Deploy new features immediately

This means that on Continuous Delivery there needs to exist human approval for a new feature to be released and on Continuous Deployment that feature will be automatically deployed into production without any human interaction, which will require some very robust test suites.

CircleCI

CircleCI is a tool that will allow you to implement CI/CD on your project. It is pretty easy to create a YAML config, mainly because they provide excellent documentation. It may take between 5–10 minutes to configure a project.

Configuration

The first step is to create an account on CircleCI with your GitHub account. Then, you’ll need to set up the project you want on the CircleCI website. On the left tab, press the “Add projects” tab, which will take you to the following page that displays all your Github projects.

Then it will open a page with instructions to Set Up the project. There you will have a list of steps you have to follow.

Config.yml file

The first step is to create a folder named “.circleci” and add a file inside called “config.yml” with the following content:

version: 2 jobs: &nbsp;build:  &nbsp;&nbsp;docker:     &nbsp;&nbsp;&nbsp;- image: circleci/ruby:2.4.1  &nbsp;&nbsp;steps:     &nbsp;&nbsp;&nbsp;- checkout     &nbsp;&nbsp;&nbsp;- run: echo "A first hello" ‍This is the simplest config file that will only display a message on the CircleCI console. Push these changes to your GitHub repository. On the CircleCI page, you were before press the “Start Building” button.<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d8523d0c5fe2701d73e2a2_5f4d0c17bedb7a2b64552e42_1_xHC9xt2NaionIYlwaKMLng.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>After this, you will see the end-result right away.Now, let us take a look at an important step called “checkout” which will retrieve the GitHub code into the CircleCI machine. To do this, edit the “config.yml” file with this:-- CODE language-yml line-numbers -- version: 2 jobs: &nbsp;build: &nbsp;&nbsp;docker: &nbsp;&nbsp;&nbsp;- image: alpine:3.7 &nbsp;&nbsp;steps: &nbsp;&nbsp;&nbsp;- checkout &nbsp;&nbsp;&nbsp;- run: &nbsp;&nbsp;&nbsp;&nbsp;name: The First Step &nbsp;&nbsp;&nbsp;&nbsp;command: | &nbsp;&nbsp;&nbsp;echo 'Hello World!' &nbsp;&nbsp;&nbsp;echo 'This is the delivery pipeline' &nbsp;&nbsp;&nbsp;- run: &nbsp;&nbsp;&nbsp;name: Code has arrived &nbsp;&nbsp;&nbsp;command: | &nbsp;&nbsp;ls -al &nbsp;&nbsp;echo '^^^That should look familiar^^^' ‍To show you that it retrieved all the code from the GitHub project the code above will also show you the file system inside the CircleCI machine<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d8523e0c5fe2701d73e2de_5f4d0cda0536dc7d2ae00c42_1_rROC4OWj43-EU-dvfJKmeQ.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>Before diving into more complex configurations let us talk about CircleCI Workflows which will let us make Continuous Delivery or Deployment.<h3 id="">CircleCI Workflows</h3>Workflows let you define collections of jobs and their run order. This will increase your software development trough:<ul id=""><li id="">Faster feedback ⚡️</li><li id="">Shorter reruns 🏃</li><li id="">More efficient use of resources 🌿</li></ul>Besides this, with workflows you can:‍<ul id=""><li id="">Run and troubleshoot jobs independently with real-time status feedback 🔧</li><li id="">Schedule workflows for jobs that should only run periodically 🗓</li><li id="">Fan-out to run multiple jobs in parallel for efficient version testing 🎯</li><li id="">Fan-in to quickly deploy to multiple platforms 🚀</li></ul>Workflows come in four different types:‍<ul id=""><li id="">Scheduling/Cron — Allows you to define a schedule for jobs that should only run periodically 🗓</li><li id="">Approval — Provides control over steps that need manual approval to continue 👍</li><li id="">Branch specific — Allows you to specify which branches a build should run on 🌴</li><li id="">Tag specific — Allows you to specify which tags a build should run on 🏷</li></ul>With all this said, let’s see how it works!<h3 id="">Workflow set up</h3>The first step to create a workflow is by editing the config.yml file. Where we will define the jobs and then the workflows.‍On top of the file we create our jobs, and on the bottom of the file, we create the workflows:-- CODE language-yml line-numbers -- &nbsp;version: 2 &nbsp;jobs: &nbsp;&nbsp;&nbsp; Hello-World:   &nbsp;&nbsp; docker:      &nbsp;&nbsp;&nbsp;- image: alpine:3.7    &nbsp;&nbsp;steps:     &nbsp;&nbsp;&nbsp; - run:         &nbsp;&nbsp;&nbsp;&nbsp; name: Hello World        &nbsp;&nbsp;&nbsp;&nbsp;  command: |         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   echo 'Hello World!'          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  echo 'This is the delivery pipeline' &nbsp;&nbsp;&nbsp; I-Have-Code:   &nbsp;&nbsp;&nbsp;&nbsp; docker:    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - image: alpine:3.7    &nbsp;&nbsp;&nbsp;&nbsp;steps:     &nbsp;&nbsp;&nbsp; - checkout     &nbsp;&nbsp;&nbsp; - run:      &nbsp;&nbsp;&nbsp;&nbsp;    name: Code Has Arrived        &nbsp;&nbsp;&nbsp;&nbsp;  command: |       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     ls -al         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   echo '^^^That should look familiar^^^'  &nbsp;&nbsp;&nbsp;Run-With-Node:    &nbsp;&nbsp;&nbsp;&nbsp;docker:     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - image: circleci/node:10-browsers    &nbsp;&nbsp;&nbsp;&nbsp;steps:      &nbsp;&nbsp;&nbsp;- run:          &nbsp;&nbsp;&nbsp;&nbsp;name: Running In A Container With Node         &nbsp;&nbsp;&nbsp;&nbsp; command: |          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  node -v  &nbsp;&nbsp;&nbsp;Now-Complete:   &nbsp;&nbsp;&nbsp;&nbsp; docker:      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- image: alpine:3.7    &nbsp;&nbsp;steps:    &nbsp;&nbsp;&nbsp;&nbsp;  - run:     &nbsp;&nbsp;&nbsp;&nbsp;     name: Approval Complete        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  command: |           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; echo 'Do work once the approval has completed' -- CODE language-yml line-numbers -- workflows: version: 2 Example_Workflow:  &nbsp; jobs:    &nbsp;&nbsp; - Hello-World   &nbsp;&nbsp;  - I-Have-Code:       &nbsp;&nbsp;&nbsp;  requires:        &nbsp;&nbsp;&nbsp;&nbsp;   - Hello-World     &nbsp;&nbsp;&nbsp;- Run-With-Node:       &nbsp;&nbsp;&nbsp;&nbsp;  requires:           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Hello-World    &nbsp;&nbsp;&nbsp; - Hold-For-Approval:        &nbsp;&nbsp;&nbsp;&nbsp; type: approval       &nbsp;&nbsp;&nbsp;&nbsp;  requires:        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   - Run-With-Node        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   - I-Have-Code    &nbsp;&nbsp;&nbsp; - Now-Complete:        &nbsp;&nbsp;&nbsp;&nbsp; requires:         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - Hold-For-Approval ‍Did you spot which type of workflow this is? It is an Approval workflow because, as you can see, the “Hold-for-approval” job is type “Approval”. This means that this workflow will only end when an allowed user approves it and for this, we can conclude that this is also a Continuous Delivery pipeline.The following images show how this workflow is shown in the CircleCI interface and how we can approve this pipeline.<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center" data-rt-max-width=""><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/5f4d0dd7873b08541136fc48_1*eBhvoXBCJzrs4GBr9GCh4A.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d8523d0c5fe2701d73e29f_5f4d0d35626ad287b75e3b7a_1_Ak_hR7_eLrzPjyuSb_ng9g.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center" data-rt-max-width=""><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/5f4d0dd77fb4970a213a1ee7_1*LpYrow1tFgt0jjbhCD-4WQ.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>After all of this information, let’s apply it to a real project. First off, we will create some basic functions and some basic tests so that we can run the CircleCI tests and check if everything is going smoothly.Basic functions-- CODE language-js line-numbers -- function sum(a, b) {  &nbsp;return a + b; }function sub(a, b) {  &nbsp;return a - b }function multiply(a, b) {  &nbsp;return a * b }function divide(a, b) {  &nbsp;return a / b } module.exports = {  &nbsp;sum,  &nbsp;sub,  &nbsp;multiply,  &nbsp;divide, } ‍Basic tests-- CODE language-js line-numbers -- const {sum, sub, multiply, divide } = require('./index')test('Adds 1+2 and expects 3', () => {  &nbsp;expect(sum(1,2)).toBe(3) }) test('Subtracts 2-1 and returns 1', () => {  &nbsp;expect(sub(2, 1)).toBe(1) }) test('Multiply 2 and 2 a return 4', () => {  &nbsp;expect(multiply(2, 2)).toBe(4) }) test('divides 4 per 2 and returns 2', () => {  &nbsp;expect(divide(4, 2)).toBe(2) })‍After creating this, we have to edit one of the jobs on our config.yml file so that it installs and runs our tests. Since we already have a “Run-With-Node” job let’s edit it.-- CODE language-yml line-numbers -- Run-With-Node:   &nbsp; docker:    &nbsp;&nbsp;  - image: circleci/node:10-browsers   &nbsp; steps:    &nbsp;&nbsp;  - checkout     &nbsp;&nbsp; - run:     &nbsp;&nbsp;&nbsp;     name: install and run tests      &nbsp;&nbsp;&nbsp;    command: |       &nbsp;&nbsp;&nbsp;&nbsp;     yarn install && yarn test ‍With this, we have all set up to run tests on CircleCI which will output something like this:<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d8523f0c5fe2701d73e308_5f4d0f1e0536dc749de01019_1_7i7xVydgsZMX6lUMx3lfHg.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>And that’s it for CircleCI 🎉 Now before jumping into Codecov on part 2 let’s just protect our master branch so that we are not able to push changes into master before all the tests run.This can be easily made by going into the project settings, then accessing the “Branches” settings and add a rule where we protect the master branch and mark the “Require status to pass before merging”, selecting also all the status checks we want.<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d8523f0c5fe2701d73e305_5f4d0f352a017cf3181e7fa2_1_2HV5vPiHJ18iFQdLCYXtSw.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d8523e0c5fe2701d73e2fe_5f4d0f4961a2ddf03bed0336_1_rUPGzxSh3Iein6f-dE6YTw.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d8523e0c5fe2701d73e2fb_5f4d0f554931a16de6af00c9_1_qdDTbK0GB6BJKjTcd5YNJg.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>All is done in this part! 🎉 🥳Head over to part two to continue the tutorial. <div data-rt-embed-type='true'><a class="card-banner-blog card-banner-blog-cs tracking-work-on-blog" href="https://www.pixelmatters.com/blog/tutorial-part-2-how-to-integrate-circleci-codecov-into-your-project" target="_blank"> <div class="card-banner-blog-info card-banner-blog-info-cs"> <div class="card-banner-blog-heading card-banner-blog-heading-cs"> <div class="card-banner-blog-heading-text"> [Tutorial] Part 2 — How to integrate CircleCI & Codecov into your project </div> </div> <div class="card-banner-blog-description card-banner-blog-description-cs"> Done with part 1 of the tutorial? Here's part 2! </div> </div> <div class="card-banner-blog-thumb"> <img src="https://cdn.prod.website-files.com/5f3fdb4985d0e045361ec124/66d867fd7d52f1c0b3c8ddf0_5f4d0f9eed627d1d51d6ab9a_Blog%20_%20Cover%20_%20CircleCi%20_%20Codecov.png" alt="CI/CD tools" /> </div> </a></div>‍‍[Card Banner][Card Banner][Card Banner]

‍‍

Pedro Fonseca

Full-Stack Engineer

Share this article

Related Insights

Blog

Engineering

October 2, 2023

Building secure, high-performing, and user-friendly API Endpoints

How to master API endpoints while keeping best practices for security, error handling, and scalability in mind.

Pedro Fonseca

Full-Stack Engineer

[Tutorial] Part 2 — How to integrate CircleCI & Codecov into your project

One of the main goals of a developer is to automate every operation that turns out to be repetitive. This gives them to focus on the actual problems of the project and lets them develop faster with fewer worries.

Pedro Fonseca

Full-Stack Engineer

What are the real benefits and risks of vibe coding?

Vibe coding lets you build software fast with AI, no code required. But is it ready for production? Here’s what you need to know.

Tiago Coelho

CTO

Read article