Azure DevOps Build and Release Pipelines

Requirement:
Visual Studio Enterprise Subscription
To check if you have an active subscription, go to www.portal.azure.com and enter your
Accenture email address and password. Go to subscription and a similar subscription in the image
below must be listed. (NOTE: Your subscription ID will be different from the subscription ID in the
image below. Make sure that the “Show only subscriptions selected in the global subscriptions
filter” checkbox is ticked.) Make sure that the status is in Active. If you do not have a Visual Studio
Enterprise Subscription or the Visual Studio Enterprise Subscription is not in an Active status,
contact your team leader immediately.
 NOTE: Before moving on to the next phase, make sure that you have achieved the desired
results in the previous phases. If not, repeat the steps until achieved.

Phase 1: Make sure that you have an existing source code in the Visual Studio
Code.

Phase 2: Azure Repository

Step 2.1: In the Azure DevOps website, create a new project. Enter your desired project name
and follow the settings as shown in the image below.
Step 2.2: After creating the project, in the left side pane, go to Repos and copy the command
line for existing repository.

Step 2.3: Go to the Visual Studio Code and paste it in the terminal.
Step 2.4: Go back to the Azure DevOps Repos and check if the source code is already reflected
in the repository like an image shown below.
 Phase 3: Azure Build Pipeline

Step 3.1: Back in the Azure DevOps, go to the Pipelines and create a new pipeline.
Step 3.2: Select Use Classic Editor.

Step 3.3: Select Azure Repos Git and make sure that you select the correct repository and
project that you wish to build.
Step 3.4: Search for “Node” and select Node.js With Grunt.

Step 3.5: Remove the “Run Grunt Task” by right clicking and removing the task and then
duplicate the npm install task by right clicking and selecting clone task. Change the Display
name into “npm run build”. Also, change the command into custom and put “run build” in the
command and arguments.

Step 3.6: Go to the Triggers tab and enable the continuous integration (CI). This will ensure that
every time a change happens in your source code when pushed into the repository, it will
automatically rebuild the pipeline.
Step 3.7: Click Save and Queue. The building of pipeline will now start and wait for it to finish all
of the tasks. This is the desired output in this phase. An automatically generated email will be
sent in your outlook account that will tell you if the build is successful or not.
 Phase 4: Azure Web App

Step 4.1: Go to the Azure Portal and select the App Service then Add. It will redirect you to a
similar page in the image below.

Step 4.2: Enter your resource group name or if none, create a new resource group. Also, enter
your desire web app name. Select Runtime stack to .NetCore 3.1 and Southeast Asia region
then select Review + Create. (It is fine to maintain the default settings in monitoring and tags
but if you need to change, you can do so.)

Step 4.3: An App Service must be now present and working. Check your app service by going to
the newly created app service and copy the URL given and try to paste it in the browser. A
default web app must be present.
 Phase 5: Azure Release Pipeline

Step 5.1: Under Azure Pipelines, select release and create a new pipeline. Select Azure App
Service Deployment.

Step 5.2: Click on the view task and job that shows error.
Step 5.3: Make sure that the Agent Job is “Azure Web App Deploy”. If not, remove the existing
agent job and add “Azure Web App” and once added, it would be renamed into “Azure Web
App Deploy”.

Step 5.4: Select the Azure Subscription you are currently using and click the drop down arrow
beside authorize to show Advanced Options.

Step 5.5: A toggle box will appear and select Publish Profile Based Authentication. Select the
appropriate resource group and web app name then click OK.
Step 5.6: After you close the pop-up box, enter the name of your App Service under “App
Name” and then click on SAVE.

Step 5.7: Go back to the pipeline tab and select Add an Artifact. Select the source type as Build
and choose the azure build name that you did earlier under the Source dropdown arrow.
Step 5.8: Click on the lightning icon enable the continuous deployment trigger. This would
ensure that after you push your changes in the repository and build the pipeline, it would
automatically release the changes and reflect in your web app service. Click SAVE.

Step 5.9: Click on CREATE RELEASE and the release must be successful. To check if it is
successful, go to your web app URL and the source code app must now be reflected in the URL
of the web app that you created from the Azure Portal.
TO PERFORM CI/CD IN AZURE PIPELINE:

Step 1: Go back to your Visual Studio Code and click the third icon from the top in the left side
pane. Make a change in your source code. It can just be a simple text change. The changes in
your source code would be reflected there and enter a message where you can type the change
that you did. Click on the check button on top of the message form.

Step 2: In the terminal of your VS Code, type “git push”. Make sure that you are in your specific
file.
Step 3: The Azure DevOps Repos will be updated and so is the building of pipelines. The
pipelines will be automatically built and released because you enabled the CI and CD in creating
the build and release of pipelines. Wait for the pipelines to be built and released.

Step 4: If the releasing of pipeline is successful, refresh your azure web app URL and the change
that you committed in your source code must now be reflected.