Azure Practice Day 1

Source: Dev.to

Project Setup

1. Cloning the Repo

Steps in VS Code:

git init
git clone 
cd 

• Source code is now available locally
• Next steps:
  • Install npm dependencies
  • Build project
  • Deploy via Azure Web App

Step 2: Create Azure DevOps Project

Go to

• Click New Project
• Provide a project name
• Project created successfully

Step 3: Push Code to Azure Repos

(Details omitted – push your local repo to the Azure Repos created in the previous step.)

Step 4: Azure App Service – Hosting the Application

• Create a Web App
• Go to
• Search App Services
• Click Create → Web App

Configuration Details

• Subscription
• Resource Group
• App Name
• Publish
• Runtime Stack
• Version
• OS
• Region
• Select an App Service Plan

Verify the app:

• Click Browse
• The default Azure App Service page appears (no code deployed yet)

Step 5: Build Pipeline – Classic Editor

• Azure DevOps → Pipelines → Create Pipeline
• Select Use Classic Editor

Pipeline Tasks

1. npm install

   • Task: npm
   • Command: install
   • Working Directory: root

2. npm build

   • Task: npm
   • Command: custom
   • Custom command: run build

3. Publish Build Artifacts

   • Task: Publish Build Artifacts
   • Path: build
   • Artifact Name: drop

4. Azure App Service Deploy

   • Task: Azure App Service Deploy
   • Service Connection: Authorize (creates Service Principal)
   • App Type: Web App on Linux
   • App Name: Created App Service
   • Package: build
   • Runtime Stack: Static Site

Step 6: Application Settings

Navigate to App Service → Configuration → Application Settings and add:

Save and Restart the App Service.

App loads successfully

YAML Pipeline – From Scratch

trigger:
- main

stages:
- stage: Build
  jobs:
  - job: BuildJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: Npm@1
      inputs:
        command: install

    - task: Npm@1
      inputs:
        command: custom
        customCommand: run build

    - task: PublishBuildArtifacts@1
      inputs:
        pathToPublish: build
        artifactName: drop

- stage: Deploy
  jobs:
  - job: DeployJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: DownloadBuildArtifacts@0
      inputs:
        artifactName: drop

    - task: AzureWebApp@1
      inputs:
        appType: webAppLinux
        appName: 
        package: $(System.DefaultWorkingDirectory)/drop/build
        runtimeStack: STATIC

Final Result

• Build Stage ✔
• Deploy Stage ✔
• Artifact created ✔
• App deployed ✔
• Website working ✔

Cleanup Reminder

Delete the Resource Group to prevent unnecessary Azure billing.