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

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 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 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 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.
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.
The first step is to create a folder named “.circleci” and add a file inside called “config.yml” with the following content:
<br>version: 2<br><br>jobs:<br><br>&nbsp;build:<br><br> &nbsp;&nbsp;docker: <br><br> &nbsp;&nbsp;&nbsp;- image: circleci/ruby:2.4.1 <br><br> &nbsp;&nbsp;steps: <br><br> &nbsp;&nbsp;&nbsp;- checkout <br><br> &nbsp;&nbsp;&nbsp;- run: echo "A first hello"<br></p><p id=""></p><p id="">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.</p><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><p id="">After this, you will see the end-result right away.</p><p id="">Now, let us take a look at an important step called “checkout” which will retrieve the GitHub code into the CircleCI machine. <strong id="">To do this, edit the “config.yml” file with this:</strong></p><p id="">-- CODE language-yml line-numbers --<br>version: 2<br><br>jobs:<br><br>&nbsp;build:<br><br>&nbsp;&nbsp;docker:<br><br>&nbsp;&nbsp;&nbsp;- image: alpine:3.7<br><br>&nbsp;&nbsp;steps:<br><br>&nbsp;&nbsp;&nbsp;- checkout<br><br>&nbsp;&nbsp;&nbsp;- run:<br><br>&nbsp;&nbsp;&nbsp;&nbsp;name: The First Step<br><br>&nbsp;&nbsp;&nbsp;&nbsp;command: |<br><br>&nbsp;&nbsp;&nbsp;echo 'Hello World!'<br><br>&nbsp;&nbsp;&nbsp;echo 'This is the delivery pipeline'<br><br>&nbsp;&nbsp;&nbsp;- run:<br><br>&nbsp;&nbsp;&nbsp;name: Code has arrived<br><br>&nbsp;&nbsp;&nbsp;command: |<br><br>&nbsp;&nbsp;ls -al<br><br>&nbsp;&nbsp;echo '^^^That should look familiar^^^'<br></p><p id=""></p><p id="">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</p><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><p id="">Before diving into more complex configurations let us talk about CircleCI Workflows which will let us make Continuous Delivery or Deployment.</p><h3 id="">CircleCI Workflows</h3><p id="">Workflows let you define collections of jobs and their run order. <strong id="">This will increase your software development trough:</strong></p><ul id=""><li id="">Faster feedback ⚡️</li><li id="">Shorter reruns 🏃</li><li id="">More efficient use of resources 🌿</li></ul><p id=""><strong id="">Besides this, with workflows you can:</strong></p><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><p id=""><strong id="">Workflows come in four different types:</strong></p><ul id=""><li id=""><strong id="">Scheduling/Cron </strong>— Allows you to define a schedule for jobs that should only run periodically 🗓</li><li id=""><strong id="">Approval </strong>— Provides control over steps that need manual approval to continue 👍</li><li id=""><strong id="">Branch specific </strong>— Allows you to specify which branches a build should run on 🌴</li><li id=""><strong id="">Tag specific </strong>— Allows you to specify which tags a build should run on 🏷</li></ul><p id="">With all this said, let’s see how it works!</p><h3 id="">Workflow set up</h3><p id="">The first step to create a workflow is by editing the config.yml file. Where we will define the <strong id="">jobs</strong> and then the <strong id="">workflows.</strong></p><p id=""><strong id=""></strong>On top of the file we create our jobs, and on the bottom of the file, we create the workflows:</p><p id="">-- CODE language-yml line-numbers --<br>&nbsp;version: 2<br><br>&nbsp;jobs:<br><br> &nbsp;&nbsp;&nbsp; Hello-World:<br><br> &nbsp;&nbsp; docker:<br><br> &nbsp;&nbsp;&nbsp;- image: alpine:3.7<br><br> &nbsp;&nbsp;steps:<br><br> &nbsp;&nbsp;&nbsp; - run:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; name: Hello World<br><br> &nbsp;&nbsp;&nbsp;&nbsp; command: |<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; echo 'Hello World!'<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; echo 'This is the delivery pipeline'<br><br> &nbsp;&nbsp;&nbsp; I-Have-Code:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; docker:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - image: alpine:3.7<br><br> &nbsp;&nbsp;&nbsp;&nbsp;steps:<br><br> &nbsp;&nbsp;&nbsp; - checkout<br><br> &nbsp;&nbsp;&nbsp; - run:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; name: Code Has Arrived<br><br> &nbsp;&nbsp;&nbsp;&nbsp; command: |<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ls -al<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; echo '^^^That should look familiar^^^'<br><br> &nbsp;&nbsp;&nbsp;Run-With-Node:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;docker:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - image: circleci/node:10-browsers<br><br> &nbsp;&nbsp;&nbsp;&nbsp;steps:<br><br> &nbsp;&nbsp;&nbsp;- run:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;name: Running In A Container With Node<br><br> &nbsp;&nbsp;&nbsp;&nbsp; command: |<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; node -v<br><br> &nbsp;&nbsp;&nbsp;Now-Complete:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; docker:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- image: alpine:3.7<br><br> &nbsp;&nbsp;steps:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; - run:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; name: Approval Complete<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; command: |<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; echo 'Do work once the approval has completed'<br></p><p id="">-- CODE language-yml line-numbers --<br>workflows:<br><br> version: 2<br><br> Example_Workflow:<br><br> &nbsp; jobs:<br><br> &nbsp;&nbsp; - Hello-World<br><br> &nbsp;&nbsp; - I-Have-Code:<br><br> &nbsp;&nbsp;&nbsp; requires:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; - Hello-World<br><br> &nbsp;&nbsp;&nbsp;- Run-With-Node:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; requires:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Hello-World<br><br> &nbsp;&nbsp;&nbsp; - Hold-For-Approval:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; type: approval<br><br> &nbsp;&nbsp;&nbsp;&nbsp; requires:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - Run-With-Node<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - I-Have-Code<br><br> &nbsp;&nbsp;&nbsp; - Now-Complete:<br><br> &nbsp;&nbsp;&nbsp;&nbsp; requires:<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - Hold-For-Approval<br></p><p id=""></p><p id="">Did you spot which type of workflow this is? It is an <strong id="">Approval workflow</strong> 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 <strong id="">Continuous Delivery</strong> pipeline.</p><p id="">The following images show how this workflow is shown in the CircleCI interface and how we can approve this pipeline.</p><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><p id="">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.</p><p id=""><strong id="">Basic functions</strong></p><p id="">-- CODE language-js line-numbers --<br>function sum(a, b) {<br><br> &nbsp;return a + b;<br><br>}function sub(a, b) {<br><br> &nbsp;return a - b<br><br>}function multiply(a, b) {<br><br> &nbsp;return a * b<br><br>}function divide(a, b) {<br><br> &nbsp;return a / b<br><br>}<br><br>module.exports = {<br><br> &nbsp;sum,<br><br> &nbsp;sub,<br><br> &nbsp;multiply,<br><br> &nbsp;divide,<br><br>}<br></p><p id=""></p><p id=""><strong id="">Basic tests</strong></p><p id="">-- CODE language-js line-numbers --<br>const {sum, sub, multiply, divide } = require('./index')test('Adds 1+2 and expects 3', () => {<br><br> &nbsp;expect(sum(1,2)).toBe(3)<br><br>})<br>test('Subtracts 2-1 and returns 1', () => {<br><br> &nbsp;expect(sub(2, 1)).toBe(1)<br><br>})<br>test('Multiply 2 and 2 a return 4', () => {<br><br> &nbsp;expect(multiply(2, 2)).toBe(4)<br><br>})<br>test('divides 4 per 2 and returns 2', () => {<br><br> &nbsp;expect(divide(4, 2)).toBe(2)<br><br>})</p><p id=""></p><p id="">After creating this, we have to edit one of the jobs on our config.yml file so that it installs and runs our tests.<br>Since we already have a “Run-With-Node” job let’s edit it.</p><p id="">-- CODE language-yml line-numbers --<br>Run-With-Node:<br><br> &nbsp; docker:<br><br> &nbsp;&nbsp; - image: circleci/node:10-browsers<br><br> &nbsp; steps:<br><br> &nbsp;&nbsp; - checkout<br><br> &nbsp;&nbsp; - run:<br><br> &nbsp;&nbsp;&nbsp; name: install and run tests<br><br> &nbsp;&nbsp;&nbsp; command: |<br><br> &nbsp;&nbsp;&nbsp;&nbsp; yarn install && yarn test<br></p><p id=""></p><p id="">With this, we have all set up to run tests on CircleCI which will output something like this:</p><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><p id="">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.</p><p id="">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.</p><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><p id="">All is done in this part! 🎉 🥳</p><p id="">Head over to part two to continue the tutorial. </p><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 <span class="card-banner-blog-cta-icon"></span> </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><p id=""><em id=""></em></p>[Card Banner][Card Banner][Card Banner]
Share this article