Deploying a Web App to Azure from VS Code Using Azure CLI, ARM Templates, and GitHub

🧭 Step 1: Introduction

Modern application development doesn’t end at writing code—it includes how you deploy, manage, and automate your infrastructure. In this article, you’ll learn how to deploy a web application to Azure App Service using a full local-to-cloud pipeline, powered by:

Azure CLI (from within VS Code) to manage resources

ARM templates to provision infrastructure as code

GitHub Actions for CI/CD automation

By the end of this guide, you’ll be able to:

✅ Provision an App Service and supporting resources using an ARM template;
✅ Deploy your app to Azure;
✅ Automate future deployments with GitHub Actions;
using the command line in VS Code

Use Case: This guide is ideal for solo developers, small teams, or DevOps engineers who want fast, consistent deployments using tools they already use—like Visual Studio Code and GitHub.

Benefits: complete local-to-cloud workflow, repeatable deployments, automation using Infrastructure as Code (IaC) and GitHub Actions.

🧰 Step 2: Prerequisites

Before diving into deploying your web app, make sure you have the following tools and accounts set up:
✅ Tools Installed

• VS Code Download VS Code
• Azure CLI Install Azure CLI
• Azure Account Extension for VS Code
• Git Install Git
• GitHub account
• Azure subscription

🛠 Step 3: Project Setup in VS Code

In this step, we set up our local directory and connect it to our remote repository (Github)

🛠3.1:

Unzip the Free website template from Themewagon to your DevOps folder.
Open VS Code and navigate to the edit panel, open your folder

Doing this sets the folder as our working directory in VS Code Terminal.

🛠3.2: Push Project to GitHub

Next we create a new GitHub repository for our webapp. Go to GitHub, login then click on the Green button on the top left hand corner that says New

After creating the repo, we go back to VS Code Terminal to connect our local repo to GitHub.
We would need to initilize the folder (i.e tell Git to track changes in the folder) then add the files to our commit.

Run

git init
git add .
git commit -m "first website commit"

Then

git remote add origin https://github.com/Emmanuelakpadia/emzeeviolino-website.git
git push -u origin master

| ⛔️ Note: The link is gotten from your github repo.

Step 4: ARM Templates

In our current working directory we can create a folder for our ARM templates.

In terminal, Run

mkdir az-templates && cd az-templates
touch template.json && touch parameters.json

This creates a folder within our working directory and creates the .json files we need to deploy our WebApp.

Open the templates.json file and paste

{
    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "resources": [
      {
        "type": "Microsoft.Web/serverfarms",
        "apiVersion": "2021-01-15",
        "name": "[parameters('appServicePlanName')]",
        "location": "[resourceGroup().location]",
        "sku": {
          "name": "F1",
          "tier": "Free",
          "size": "F1",
          "family": "F",
          "capacity": 1
        }
      },
      {
        "type": "Microsoft.Web/sites",
        "apiVersion": "2021-01-15",
        "name": "[parameters('webAppName')]",
        "location": "[resourceGroup().location]",
      "dependsOn": [
          "[resourceId('Microsoft.Web/serverfarms', parameters('appServicePlanName'))]"
        ],
        "properties": {
          "serverFarmId": "[resourceId('Microsoft.Web/serverfarms', parameters('appServicePlanName'))]",
          "siteConfig": {
            "appSettings": [
              {
                "name": "SCM_DO_BUILD_DURING_DEPLOYMENT",
                "value": "true"
              }
            ]
          }
        }
      }
    ],
    "parameters": {
      "appServicePlanName": {
        "type": "string"
      },
      "webAppName": {
        "type": "string"
      }
    }
  }

Also open the parameters.json and paste

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "appServicePlanName": {
      "value": "myAppServicePlan"
    },
    "webAppName": {
      "value": "<insert your webapp name>"
    }
  }
}

| ⛔️ Note: make sure you edit the WebApp name and press Ctrl + S to save the code to the files.

🚀 Step 5: Use Azure CLI to Deploy the ARM Template

Now that we’ve set up our app and infrastructure template in VS Code, it’s time to deploy our resources to Azure using Azure CLI—all from the terminal inside the editor.

🚀5.1: Log In to Azure

In your VS Code terminal, run:

az login

This will open a browser window for you to sign in to your Azure account. Once authenticated, the terminal will return information about your subscriptions.

If you have more than one subscription, set the desired one as default:

az account set --subscription "<YOUR_SUBSCRIPTION_NAME_OR_ID>"

🚀5.2: Create a Resource Group

A resource group is a container for all related Azure resources.

Run this to create one:

az group create -n mywebrg -l westus

|💡 You can choose a different region by replacing westus with your preferred Azure region.

5.3: Deploy the ARM Template

Next, deploy the template.json template to the resource group.

az deployment group create --resource-group mywebrg --template-file template.json --parameters parameters.json

| ⏳ This may take a minute or two. Once done, you’ll see a JSON response confirming the resources were created.

🚀5.3: Deploy the WebApp

Run

az webapp deployment source config \
  --name emzeeviolino-website \
  --resource-group mywebrg \
  --repo-url https://github.com/Emmanuelakpadia/emzeeviolino-website \
  --branch master \
  --manual-integration

🌍 Step 6: Visit Your Web App

To get the URL of our deployed WebApp, we run

az webapp show \
--name emzeeviolino-web \
--resource group mywebrg \
--query defaultHostName \
--output tsv

🎉 That’s it! You now have:

✅ A web app deployed on Azure
✅ Infrastructure managed via ARM templates
✅ A full local-to-cloud pipeline built in VS Code

🔧 Errors encountered

• No file or directory found when deploying ARM templates.

Fix: Check to see if the directory is correct.

• Error when deploying ARM Templates

Fix: Honestly, the error goes away when you run the command a second time