Using Azure Web App Services, Visual Studio, DevOps (Repos, Pipeline) to Create a Basic Web App

The term DevOps derives from development and operations. It refers to the integration of development, quality assurance, and IT operations into a unified culture and set of processes for delivering software.

DevOps includes these activities and operations:

Continuous integration (CI) is the practice of merging all developer code into a central codebase frequently, and then performing automated build and test processes. The objectives are to quickly discover and correct code issues, to streamline deployment, and to ensure code quality. For more information, see What is Continuous Integration?.
Continuous delivery (CD) is the practice of automatically building, testing, and deploying code to production-like environments. The objective is to ensure that code is always ready to deploy. Adding continuous delivery to create a full CI/CD pipeline helps you detect code defects as soon as possible. It also ensures that properly tested updates can be released in a short time. For more information, see What is Continuous Delivery?.
Continuous deployment is an additional process that automatically takes any updates that have passed through the CI/CD pipeline and deploys them into production. Continuous deployment requires robust automatic testing and advanced process planning. It might not be appropriate for all teams.
Continuous monitoring refers to the process and technology required to incorporate monitoring across each phase of DevOps and IT operations lifecycles. Monitoring helps to ensure the health, performance, and reliability of your application and infrastructure as the application moves from development to production. Continuous monitoring builds on the concepts of CI and CD.

Microsoft Learn for DevOps

Azure DevOps Services

Azure service	Documentation	Description
Azure Artifacts	Azure Artifacts overview	Fully integrated package management for your CI/CD pipelines.
Azure DevOps	Azure DevOps documentation	Modern dev services for managing your development lifecycle end-to-end. It includes Azure Repos, Azure Pipelines, and Azure Artifacts.
Azure DevTest Labs	Azure DevTest Labs documentation	Reusable templates and artifacts for provisioning development and test environments.
Azure Monitor	Azure Monitor documentation	Provides full observability into your applications, infrastructure, and network.
Azure Pipelines	Azure Pipelines documentation	Helps you automate build and deployment by using cloud-hosted pipelines.
Azure Repos	Azure Repos documentation	Provides unlimited, cloud-hosted private Git repos for your project and can be configured to use GitHub Advanced Security.
Azure Resource Manager	Azure Resource Manager documentation	Provides consistent deployment, organization, and control for resource management.
Azure Resource Manager templates (ARM templates)	ARM template documentation	Templates that you can use to define the infrastructure and configuration for your project.
Azure Test Plans	Azure Test Plans documentation	Provides planned and exploratory testing services for your apps.

Azure DevOps Portal

https://aex.dev.azure.com/

https://dev.azure.com/

Enter the following URL for your organization, specifying the organization name.

https://dev.azure.com/YourOrganizationName/_home/About.

A page similar to the following example opens showing the version number.

Free tier

The free tier includes the following aspects:

First five users free (Basic license)
Azure Pipelines
- One Microsoft-hosted CI/CD (one concurrent job, up to 30 hours per month)
- One self-hosted CI/CD concurrent job
Azure Boards: Work item tracking and boards
Azure Repos: Unlimited private Git repos
Azure Artifacts: Two GiB free per organization

All charges appear on your monthly Azure bill. Azure supports payment by credit card and invoiced billing through the Enterprise Agreement (EA), Cloud Solution Providers (CSP), and more.

Create Free Web App Using Azure Azure Web Service

1 Log into Azure Portal and search Web App service

2 Create a new Web App

Pricing plan : choose "Free F1 (Shared Infrastructure)", which gives you 60 CPU Minutes / day for free.

3 All other options are default. You can choose create from Review+create page.

4 After deployed, you can access the default url based on your project name and microsoft azurewebsites.net domain.

Here is how it looks like:

Use Visual Studio to Create New Web App & Deploy to Azure Web App

Create your web app on your local machine using Visual Studio

1. Download Visual Studio Community version from : https://visualstudio.microsoft.com/free-developer-offers/

2. Install Visual Studio 2022

3. Create a new project and select Blazor Web App

4. Configure your new projects

5. Ctrl + F5 to Build this web app

Select yes to trust self-signed SSL certificate.

Copy url https://localhost:7159/ and open it from incognito / inprivate mode of browser

Publish to App Service through Visual Studio

1. Click Publish

2. Choose Azure App Service (Windows)

make sure your logged in azure account has valid subscription to use azure web service.

In following screenshot, we are deploying to same web app we created in previous step.

Click publish button:

Here you can see the publish succeed information.

Using Visual Studio Deploy to Azure DevOps Repos

https://portal.azure.com/#view/AzureTfsExtension/OrganizationsTemplateBlade

https://aex.dev.azure.com/me?mkt=en-US

1. Create a new project in Azure DevOps, make sure Repos and Pipelines on.

2. Get the repos https url to link into Visual Studio's project.

3. From visual studio's project menu, select git - create git repository ...

Choose exisitng remote since we already created our new project and new repository.

4. Now you can see all codes / files in Azure DevOps - Repos - Files page

Deploy from Azure Repos to Web App (Through Deployment Center)

Now we can set up CI/CD.

There are two ways to do that.

1. Through App Services - App - Deployment - Deployment Center

Deploy from Azure Repos to Web App (Through Pipeline)

2. Through Azue DevOps Pipeline

Make sure you have disconnected Azure Repos from App's Deployment Center. Else our CI/CD pipeline will be failed to release.

Create Pipeline - Choose Azure Repos Git

Configure your pipeline - Choose Starter Pipeline

Edit your default pipleline YAML file:

Here is the code:

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  buildConfiguration: 'Release'


steps:
- task: DotNetCoreCLT@2
  displayName: Restore
  inputs:
    command: 'restore'
    feedsToUse: 'select'
    vstsFeed: 'my-vsts-feed'

- task: DotNetCoreCLI@2
  displayName: Build
  inputs:
    command: build
    projects: '**/*.csproj'
    arguments: '--configuration $(buildConfiguration)'

- task: DotNetCoreCLI@2
  displayName: Publish
  inputs:
    command: publish
    publishWebProjects: True
    arguments: '--configuration $(BuildConfiguration) --output $(Build.ArtifactStagingDirectory)'
    zipAfterPublish: True

- task: PublishPipelineArtifact@1
  displayName: Upload
  inputs:
    targetPath: '$(Build.ArtifactStagingDirectory)'
    artifactName: 'TestApp2'