Hey Guys! What’s Up?

I was just searching for hosted free CICD tools, I have found some of the tools like Azure Pipelines, Netlify, Github Actions, Circle CI. One of the best is Azure pipelines because in this we can add our agent and use the power of azure pipelines to create our CICD.

In the following blogs, I will post how to use other CI tools also but for now, let’s see how we can set up a Free Build Pipeline.

For this tutorial, we will use the following Git Repositories and setup CICD for a Quiz App made in React JS.

Link: https://github.com/27aadesh/QuizApp.git

Introduction to Azure Pipelines

Azure Pipelines is a cloud service that you can use to automatically build and test your code project and make it available to other users. It works with just about any language or project type.

Azure Pipelines combines continuous integration (CI) and continuous delivery (CD) to constantly and consistently test and build your code and ship it to any target.

How we will use it to Create a Build Pipeline for Free!

For using Azure Pipelines, We need to follow the below steps:

  1. Create an account on Azure DevOps: Go to https://azure.microsoft.com/en-in/services/devops/ and click on “Start Free” and just log in with your Microsoft Account or create a new one to start.

Azure DevOps

2. Once your account is created, you will see the below screen.

The default organization and project will be already there.

3. Create a New Project: For creating a new project click on the “New Project” button on the top right corner. The below screen will be displayed.

Just give the project name and select private or public depending on the requirement and click “Create”.

Voila! Our new project has been created.

Now we need to plan if we will add our agent or use the Azure provided agent with limited Quota but first let’s understand what is an Azure agent.

Azure Pipeline Agents

We can call agent as any compute engine, It can be a Virtual Machine or a Container. An agent can be Windows VM, Ubuntu VM, MacOs VM, etc…

You can read more about agents at https://docs.microsoft.com/en-us/azure/devops/pipelines/agents/agents?view=azure-devops&tabs=browser

The importing thing to note is Azure pipelines charges you for the agent usage so if you use a self-hosted Agent you can use Azure pipelines for free!!!

If your usage is less than the quota provided by Azure pipelines then you can use the Microsoft hosted agent.

Please see the below quota details:

  • One Microsoft-hosted job with 1,800 minutes per month for CI/CD and 1 self-hosted job with unlimited minutes per month.

Setting up your Personal Computer as a Self-Hosted Agent

We can set up any VM on the internet as a self-hosted Agent. So why not use our personal computer as a self-hosted agent.

For doing that just follow the below steps:

  1. Go to the Organization Settings.

2. Go to Agent-Pools

We can use the default agent pool or create a new agent pool. We will use the default agent pool.

Click on the default agent pool and click on New Agent.

To Setup a new agent, we will need a personal Access Token so for that just go to the Personal Access tokens page.

Enter the below details and click on create to create a Personal Access Token.

Warning — Make sure you copy the token as soon as it is generated as you will not be able to see it again.

Now Go back to the Agent Pools page and click on New Agent. You will see the below popup.

Download the agent and create an agent folder in the PC and extract the zip file in the agent folder.

To Configure the agent, Open Powershell with admin access and execute the below command:

PS C:\agent> .\config.cmd

The Server URL will be https://dev.azure.com/<ORGANISATION NAME>

Use Authentication type as PAT

Enter the Personal Access token when it prompts

Since we are using the default pool so directly press enter

Give any name for the agent, I am using the default name.

Voila! Your agent is configured. You can see it from the Portal but you will see your agent as offline.

To make the agent online again go to PowerShell and execute the below command:

PS C:\agent> .\run.cmd

This will make the Agent online.

Setting up Build Pipeline (CI) in Azure Pipelines.

Setting up a build pipeline is very easy in Azure Pipelines. We will set up the build pipelines for a react JS application present in Github Repo.

Go back to the “Demo Project” we created in the starting and click on Pipelines.

Click on Create Pipeline and select GitHub as the Source Control Management.

After authentication with Github, You will see the list of repositories present in GitHub.

Once you select the repository, You will see the page for creating the YAML for build steps.

We will use the below YAML to create the build and publish the build artifacts on the Azure Artifacts so that we can use them in release Pipelines.

   # Node.js with React   
   # Build a Node.js project that uses React.   
   # Add steps that analyze code, save build artifacts, deploy, and more:   
   # https://docs.microsoft.com/azure/devops/pipelines/languages/javascripttrigger:   
   - masterpool:   
     defaultsteps:   
   - task: NodeTool@0   
     inputs:   
       versionSpec: '10.x'   
     displayName: 'Install Node.js'- task: PowerShell@2   
     inputs:   
       targetType: 'inline'   
       script: 'npm install'- task: PowerShell@2   
     inputs:   
       targetType: 'inline'   
       script: 'npm run build.azure'- task: CopyFiles@2   
     inputs:   
       SourceFolder: '$(System.DefaultWorkingDirectory)/build'   
       Contents: '**'   
       TargetFolder: '$(Build.ArtifactStagingDirectory)'- task: PublishBuildArtifacts@1   
     inputs:   
       PathtoPublish: '$(Build.ArtifactStagingDirectory)'   
       ArtifactName: 'quizapp'   
       publishLocation: 'Container' 

You can edit the YAML as per the requirement of the Language of which you are setting up the CI Pipeline.

Now Just Click on “RUN” to execute the pipeline.

When we run for the first time, It will ask for permission so go ahead and grant the permission.

Now the Pipeline will start to run and the steps defined in the YAML will execute.

You can see the complete log of all the steps in the portal itself.

As per the configuration of your agent it will take time in the build process. My machine is slow so it takes around 10 mins to build the code and publish the artifacts to azure.

Once the Pipeline is successfully completed you will see that the artifacts are generated.

and the artifacts contain the static files which need to be deployed on a web server.

Every time you will commit anything the GitHub repo, This pipeline will be triggered and the build artifacts will be generated.

Voila! We have successfully set up a free build pipeline using Azure Pipelines with a self-hosted agent.

Conclusion: We discussed how to use azure pipelines to setup your build pipeline for free. If you have any queries please write to me at [email protected], I will be happy to answer your questions.

Leave a Reply

Your email address will not be published. Required fields are marked *