Add Project Code into Azure DevOps through Visual Studio and Command Line

There are a couple of ways to add a new project or existing project in the DevOps. Let’s take the example of an existing offline project and you want to check-in to DevOps.

Push the code through Visual Studio

Before that, you need a Repository in the DevOps. I hope you already have, If not, let’s first create the new Repo in the Azure DevOps.  

Step 1: Go To Azure DevOps, create a new repository in your Project. If you don’t have any project in your DevOps then first create a new project. In my example, I already have a project, so I’m creating a brand new repository in this.

Step 2: Click on the new repository option and create a new repo.

Step 3: Specify the Repository name and press the create button and it will create a new repo.

Step 4: Click on the clone button and copy the URL.

The repository is ready and let’s learn how to push code in this repo through Visual Studio.

Step 5: Open your existing/newly created project in Visual Studio.

Step 6: Right-click on the solution file and click add the solution to source control.

Now you can see the lock symbol in the files. In Team Explorer, Branches, you can see it has created a new Master branch. If you don't see this option in the Visual Studio then you can choose the alternate option, push the code through the command line, mentioned below.

Step 7: Go to team explorer, Click on the Sync tab, and select the push Git Repo button.

Step 8: Enter the URL that we have copied above in the Clone option and press publish.

Now you can see the code in the master branch in Azure DevOps. If you are on the main branch then, you need to switch to the master branch in Azure DevOps.

Let's learn another way to push the code to Azure DevOps.

Push the code through the Command line

I have created a blank .Net Core project in my Visual Studio and created new blank Repo in Azure DevOps name SecondRepo. Now, will push that code through the command line.

Step 1 to Step 4 is the same.

Step 5: Go to your project location and open the command prompt.

Step 6: Create a Git repo on your machine to store your code by running the below command.

          git init

Step 7: Commit your code into the local git repository and run the below commands

        git add --all

        git commit -m "first commit through command line"

Step 8: Connect your local repo to the Git repo in Azure Repos using the command mentioned below and enter your repo URL.

                

        git remote add origin https://sunnysetia.visualstudio.com/test/_git/SecondRepo

Step 9: Push the code.

        git push origin master

Now, if you go to Azure DevOps, you can see all the code in the repository.

This is all about this article. I hope you like it.

Backup In Azure Cloud with Recovery Service Vault

Azure Backup

Azure backup is a service to provide a solution to backup your data and recover it from the Cloud.

What do you want to backup?

As shown in the above snapshot, you can backup Virtual machines, File Share, SQL Server, SAP Hana database running on Azure VMs.

In this article, we will pick a simple use case for backup of File Share. Let start with adding a Backup Service.

Step 1: Go to Create a Resource & select Backup and Site Recovery as shown in the snapshot below

Step 2: Click on the Create button as shown below.

Step 3: Create Recovery Services Vault, Create/Select the existing Resource Group. Enter the vault name and select the region and press the review + Create button.

Step 4: It will create a new vault for you. Now Go to a resource that you have just created and click the Backup button as shown below.

Step 5: We are going to create our first backup. You start your back up with a goal. Azure backup runs on both Azure resources or On-Premises resources. We will select Azure in the workload and Azure File Share as a backup. Click on the Backup button as shown below.

Step 6: There are a couple of things we need to do here. You need to select an Azure storage account where you have Azure files and you want to backup. If you don't have an Azure storage account then you first create the new storage account and then create a new File share and then place some files there.

Once your storage account is ready then you need to follow the below steps.

• Chose the existing storage account, as I selected below "azstoragebackup" as shown below. I have only 1 file in the file share i.e. test_file.png
• Click on the Add button, it will open the right panel.
• Select the File share folder. I have selected backupFileShare
• You need to create your new policy
• You need to specify at what time you need a backup.

Step 7: Backup Policy

• Specify the time and for how many days you need a backup.
• I have selected 10 PM and for 5 days only.
• Press the enable backup button.

Step 8: Go to Resource Services Vault --> Backup Items and you will find 1 item in Azure Storage backup.

When you click on the Count(1) then you can see your backup is created successfully 

Restore Backup

You can click backupfileshare Items for restoring the backup as shown above. 

You need to specify the storage account where you want your backup. Also, you need to specify the file for backup. Once your press the restore button it will automatically restore the backup in that folder.

As shown in the snapshot below. I have opened my restoreShareFile Storage and you can see the file there. It successfully restored the file from the Backup.

This is all about this article. I hope you like it.

Deploy Angular/Vue/React App to Azure Portal through Azure DevOps CI/CD

Overview

Today we will learn how to deploy the angular app to Azure Portal through CI/CD. For this, first of all, you need to create new App Services in the Azure portal. You can follow the first 3 steps as mentioned in the link below. Below URL is to deploy the angular app manually through Visual studio code.

https://setiasunny.blogspot.com/2020/05/deploy-angularvue-app-to-azure-portal.html

Once your app service is ready then make sure code is check-in the Azure DevOps. The first step is to create a new build.

Step 1: Build a Pipeline

Login to Azure DevOps and click on the Pipeline link as shown in the snapshot below and then press New Pipeline

Step 2: Specify where is your code?

I'm selecting Other Git options for the angular app as our code exists in the Azure DevOps Repo.

Step 3: Select a source

Specify your Project and repository as shown below

Step 4: Select a template

I'm selecting an empty job here. So, we perform all the steps manually here.

Step 5: Add New Tasks

In the pipeline Task, you can specify the default Agent pool and specifications.

Get sources Task, Project, and Repository is already selected. if not, select your project.

Add your 3 new tasks, as shown below.

1. Npm task
2. Npm task
3. Publish build artifact

1. You need to press the "+" symbol and add a new npm task here. The First npm task is to install all npm package that is required for the angular app.

2. The second npm task is to build the project. I'm selecting custom command here and specify the working folder where you package.json exists.
Then write build command. In my example, we have run the build command 

OR

You can add build:prod for production env.

3. Add a new publish artifact task and specify the path to publish, it should be in the dist folder. In my case, it is in the folder/dist. your package.json might be outside the folder then you will write only dist and specify the artifact name, it can be anything.

OR

Step 6: Press the save and queue button.

You can see the build has succeeded and will create artifacts for you.

Step 7: Create a release

Click on the release button as shown in the snapshot below and click the "Create Release" button.

Step 8: Select the template

We will select the default template i.e Azure App Service deployment

Step 9: Add an artifact

Specify your Project and build pipeline here, so it can pick the code from that pipeline.

Step 10: Select the Deploy Azure app service task

Specify the following options

1. Connection Type
2. Subscription (Your Azure Subscription)
3. App Service Type (it should be a Web app) as we have an angular app.
4. App Service Name (Once you select the subscription, it will automatically fetch all the Web App that you have created on Azure Portal). Select that app service name here.

Step: 11 Create the release.

Once the release is succeeded, It will automatically deploy all the code to the Azure web app.

This is all about this article and let me know if you have any questions.