DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

MakendranG
MakendranG

Posted on • Originally published at makendran.hashnode.dev on

A Fascinating Behind-the-Scenes Look at How I Built a Harness CI Pipeline

In this blog, I am sharing my learning that are gained from the Full Stack Testing and GitOps Workshop.

This workshop is really useful for those who want to learn the steps required to implement an application, setup CI/CD pipelines and implement a Full Stack testing solution. It was a great opportunity to participate in the Full Stack Testing and GitOps Workshop hosted by the Konfhub Tech in collaboration with Harness.

Speaker of the session: Jaap Brasser, Sr. Developer Advocate at Harness

image.png

During the workshop, I learned the below mentioned topics.

What is a MERN stack?

MERN-stack-1.png

Image Source

The MERN stack enables faster application development. The technology is used worldwide, and the MERN stack is primarily used to develop fully JavaScript-based applications. MERN stands for MongoDB, Express, React, and Node, and is based on the four core technologies that make up the stack.

  • MongoDB: A document database
  • Express(.js): Web Framework
  • React(.js): A client-side JavaScript framework
  • Node (.js): JavaScript web server

All four are included in the stack because of the four JS-based technologies. So if you're familiar with JavaScript (and JSON), you can run the frontend, backend, and database separately or together.

CI Concepts

What's wrong with CI today?

image.png

  • Visibility
  • Difficulties in Troubleshooting
  • Length build Cycles
  • Overhead in Maintaining CI
  • Difficulty onboarding
  • Hard to Promote Best Practices

Harness CI Core Concepts

image.png

  • Agnostic
  • Containerized
  • Scalable
  • Developer Friendly
  • Fine-Grained RBAC
  • Secrets Management

Exercise - How to create a Harness CI Pipeline for the MERN Stack App

In this tutorial, we will create a CI pipeline for our stack of MERN application. The application code is in harness-apps/MERN-Stack-Example repository.

Pre-requisites

Create a CI pipeline

image.png

  • Click Create a Pipeline.

image.png

  • Wait for your environment to be provisioned.

image.png

image.png

image.png

  • Select GitHub , enter your personal GitHub access token in the Access Token field.

0827.png

0834.png

  • Click Test Connection. Wait for the connection success message to appear, then click Next: Select Repository.

0830.png

  • Type "MERN" in the search bar and MERN-Stack-Example will appear in the list. Select the repository and click Create Pipeline.

0839.png

  • Pipeline will be created.

image.png

  • Click the Execution tab, then click Add Step.

0846.png

  • Select the Run step.

0847.png

  • Enter Test MERN Server in the Name field, then click in the Container Registry field.

0849.png

  • Click New Connector.

0850.png

  • Click Docker Registry.

0851.png

  • Enter Docker Hub in the Name field, then click Continue.

0852.png

  • Enter "https://index.docker.io/v1/" in the Docker Registry URL field and enter your Docker Hub username in the Username field and then click Create or choose Secret.

0854.png

  • Click New Secret Text.

0855.png

0859.png

  • The token must have Read, Write and Delete permissions.

0901.png

  • Enter Docker Hub Token in the Secret Name field and enter your Docker Hub access token in the Secret Value field, then click Save.

0902.png

  • Verify that Docker Hub Token appears in the Password field, then click Continue.

0904.png

  • Select Connect through a Harness Delegate , then click Save and Continue.

0905.png

  • At the Delegate Setup step, click Save and Continue.

0907.png

  • A connection test will run, wait for it to complete, then click Finish.

0908.png

  • Select the Docker Hub connector you just created, then click Apply Selected.

0909.png

  • Verify that Docker Hub appears in the Container Registry field. Enter node:16 in the Image field. Enter the below commands in the Command field:
cd server 
yarn install 
yarn test

Enter fullscreen mode Exit fullscreen mode
  • Click Apply Changes.

09011.png

Run CI Pipeline

  • Back in the pipeline view, click Save

0913.png

  • Then click Run.

0916.png

  • For Build Type select Git Branch. Enter main in the Branch Name field, then click Run Pipeline.

0919.png

  • Your Harness CI pipeline will now execute.

image.png

image.png

  • Examine the Test MERN Server log output.

image.png

You just built your first Harness CI pipeline! Great job! With Harness CI, you can easily set up pipelines (using the graphical interface or as-code), connect them to your Git/artifact repo, and start building and testing!

Reference Article

  1. Full Stack Testing and GitOps Workshop
  2. Building a Full Stack CI/CD Pipeline
  3. Official Page of Harness
  4. CI Pipeline Basics
  5. CI/CD Pipeline: Everything You Need to Know
  6. Harness Platform Solutions: Getting Started with Integrating Drone CI with Harness CD

Gratitude for perusing my article till end. I hope you realized something unique today. If you enjoyed this article then please share to your buddies and if you have suggestions or thoughts to share with me then please write in the comment box.

Follow me and share your thoughts,GitHubLinkedInTwitter

Top comments (0)

Want to Create an Account?
Now it's your turn!
ย 
๐Ÿ—’ Share a tutorial
๐Ÿค” Reflect on your coding journey
โ“ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.