Azure Practice Day 1

Project Setup –
1. Cloning the Repo

Steps in VS Code

git init
git clone <GitHub-repo-URL>
cd <repo-folder>

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

*Step 2: Create Azure DevOps Project *

1. Go to https://dev.azure.com
2. Click New Project
3. Give Project Name:
4. Project created successfully

*Step 3 : Push Code to Azure Repos *

*Step 4: Azure App Service – Hosting the Application *

• Create Web App

1. Go to: https://portal.azure.com
2. Search App Services
3. Click Create → Web App

Configuration Details

1. Subscription
2. Resource Group
3. App Name
4. Publish
5. Runtime Stack
6. Version
7. OS
8. Region
9. Select App Service Plan

• Verify App

• Click Browse

• Default Azure App Service page appears (no code deployed yet)

Step 5: Build Pipeline – Classic Editor

-Create Pipeline

1. Azure DevOps → Pipelines → Create Pipeline
2. Select Use Classic Editor

Pipeline Tasks

1️⃣ npm install

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

2️⃣ npm build

• Task: npm
• Command: custom 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:
Go to
App Service → Configuration → Application Settings

Add:

Key	Value
WEBSITE_DYNAMIC_CACHE	0
CACHE_OPTION	never

Save → Restart App Service

✔ App loads successfully

*YAML Pipeline – From Scratch *
YAML Pipeline Code :

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: <App-Service-Name>
        package: $(System.DefaultWorkingDirectory)/drop/build
        runtimeStack: STATIC

Final Result

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

🧹 Cleanup Reminder

• Delete Resource Group
• Prevent unnecessary Azure billing

Comments

[BerryAnalyst]

Thanks for such useful information, I Recently cleared Microsoft’s Azure DevOps exam, p2pcerts practice test assisted me really well to pass the exam.

[Cloudia DevopsDynamicsHub]

That’s great to hear, congratulations on clearing the exam! 🎉
Thanks for stopping by and sharing your success.