DEV Community

Cover image for DEPLOY AZURE WEB APP
Habeeb Hameed
Habeeb Hameed

Posted on

DEPLOY AZURE WEB APP

#webapp #azure #templatejson #github

🚀 Deploy a Static Website on Azure App Service Using ARM Template and Azure CLI

In this tutorial, I’ll walk you through deploying a static website using Azure App Service with an ARM template, running commands from VS Code, and fixing issues that came up along the way.

🔧 Step 1: Set Up Your WebApp Template

Open your template.json in VS Code. This defines two resources:

  • An App Service Plan
  • A Web App 
{
  "resources": [
    {
      "type": "Microsoft.Web/serverfarms",
      ...
    },
    {
      "type": "Microsoft.Web/sites",
      ...
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Template Json

📂 Step 2: Create and Enter the Webapp Folder 

cd webapp
Enter fullscreen mode Exit fullscreen mode

CD into webapp folder

🧱 Step 3: Create the Resource Group 

az group create -n dolamyRG -l westus
Enter fullscreen mode Exit fullscreen mode

Resource Group Created

📦 Step 4: Deploy the ARM Template 

az deployment group create --resource-group dolamyRG --template-file template.json --parameters parameters.json
Enter fullscreen mode Exit fullscreen mode

You might run into this error:

(ResourceNotFound) The Resource 'Microsoft.Web/sites/dolaApp4356' was not found...
Enter fullscreen mode Exit fullscreen mode

Error Message

🛠️ Step 5: Fixing the Missing WebApp Name Error

The fix is to manually create the app service plan and the webapp.

az appservice plan create --name MyPlan --resource-group dolamyRG --sku FREE
az webapp create --name dolaApp4356 --resource-group dolamyRG --plan MyPlan
Enter fullscreen mode Exit fullscreen mode

App Service Plan Created
App service Successful

🌐 Step 6: Link GitHub Repository to the WebApp 

az webapp deployment source config --name dolaApp4356 --resource-group dolamyRG --repo-url https://github.com/yourtechie/fruitables --branch master --manual-integration
Enter fullscreen mode Exit fullscreen mode

Webapp deployment source

🔍 Step 7: Get the WebApp URL 

az webapp show --name dolaApp4356 --resource-group dolamyRG --query defaultHostName --output tsv
Enter fullscreen mode Exit fullscreen mode

This will return something like:

dolaApp4356.azurewebsites.net
Enter fullscreen mode Exit fullscreen mode

Webapp running

✅ Result

Visit your site:

🌐 dolaApp4356.azurewebsites.net

You're live!

📝 Summary

Step Action
1 Create webapp template
2 Enter project directory
3 Create resource group
4 Deploy template
5 Fix missing resource with manual creation
6 Connect GitHub repo
7 Get your live link

Top comments (0)