Tools: Azure Practice Day 1

Steps in VS Code ## Configuration Details ## 🧹 Cleanup Reminder Project Setup – 1. Cloning the Repo *Step 2: Create Azure DevOps Project * *Step 3 : Push Code to Azure Repos * *Step 4: Azure App Service – Hosting the Application * Default Azure App Service page appears (no code deployed yet) Step 5: Build Pipeline – Classic Editor 3️⃣ Publish Build Artifacts 4️⃣ Azure App Service Deploy Step 6: Go to App Service → Configuration → Application Settings Save → Restart App Service ✔ App loads successfully *YAML Pipeline – From Scratch * YAML Pipeline Code : Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or COMMAND_BLOCK: git init git clone <GitHub-repo-URL> cd <repo-folder> COMMAND_BLOCK: git init git clone <GitHub-repo-URL> cd <repo-folder> COMMAND_BLOCK: git init git clone <GitHub-repo-URL> cd <repo-folder> CODE_BLOCK: 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 CODE_BLOCK: 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 CODE_BLOCK: 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 - Source code is now available locally - Next steps: - Install npm dependencies - Build project - Deploy via Azure Web App - Go to https://dev.azure.com - Click New Project - Give Project Name: - Project created successfully - Create Web App - Go to: https://portal.azure.com - Search App Services - Click Create → Web App - Subscription - Resource Group - Runtime Stack - Select App Service Plan - Click Browse - Default Azure App Service page appears (no code deployed yet) - Azure DevOps → Pipelines → Create Pipeline - Select Use Classic Editor - Command: install - Working Directory: root - Command: custom run build - Task: Publish Build Artifacts - Path: build - Artifact Name: drop - 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 - Build Stage ✔ - Deploy Stage ✔ - Artifact created ✔ - App deployed ✔ - Website working ✔ - Delete Resource Group - Prevent unnecessary Azure billing