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 hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: git init git clone <GitHub-repo-URL> cd <repo-folder> Enter fullscreen mode Exit fullscreen mode 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 Enter fullscreen mode Exit fullscreen mode 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