How to Deploy a Web App Using Azure App Service: A Step-by-Step Guide for Beginners

I work with beginners who are learning how to build and host web apps, and I know the process can seem confusing at first. That’s why I’ve put together this guide—to help you deploy a basic web app using Azure App Service in a clear, step-by-step way.

In this article, I’ll walk you through setting up your Azure account, creating your app, preparing your project, and deploying it using the simplest method: ZIP Deploy via the Azure Portal. You’ll be able to get your website online using Azure’s free domain, without writing a single command.

Create a Free Azure Account

To begin, you’ll need a Microsoft Azure account. Go to https://azure.microsoft.com and click Start Free.

The free plan includes:

• 1 GB of storage
  
• 1 hour of computing per day (F1 plan)
  
• Enough to host small apps or test projects
  

You’ll need to verify your account with a phone number and payment method. As long as you stay on the Free Tier, you won’t be charged.

Set Up a New Web App in the Azure Portal

After signing up:

1. Visit https://portal.azure.com
   
2. Click App Services in the left menu or go through the search bar.
   
3. Select Create>Web App to begin.

Now complete the basic setup:

• Subscription: Leave as is
  
• Resource Group: Create a new one, e.g., UmeshRG
• Name: This becomes your app’s default URL, like umeshpandit.net
• Publish: Select Code
  
• Runtime Stack: Choose based on your app (e.g., .Node 22 LTS
• Region: Choose a region close to your expected users
  
• App Service Plan: Create a new plan and select the Free F1 tier
  

Click Review + Create, then Create again. 

Azure will take a minute to build the environment.

Prepare Your App for Deployment

Before uploading your project to Azure, make sure it’s organized correctly. For this method, Azure expects your app to be packaged as a .zip file containing all necessary files in the correct structure.

Here’s what to do:

• Your app should include a main entry point—typically an index.html file for static sites, or a standard server entry file, depending on your stack.
  
• Ensure that any stylesheets, JavaScript files, or assets (like images or fonts) are properly linked and placed in the appropriate folders.
  
• Open your project locally in a browser to confirm that it renders correctly and nothing is broken.

Once you’ve confirmed everything works:

1. Place all your project files inside a single root folder (not inside another subfolder).
   
2. Right-click that folder and compress it into a .zip file.

This .zip archive will be uploaded to Azure during the deployment step.

Deploy Your Web App Using ZIP Deploy

This is the easiest method, and doesn’t require any tools or code.

1. Go to your app in Azure Portal, and select the app you have created.
   
2. In the left menu, scroll down and click Deployment>Deployment Center

3. On the “Basics” screen, under “Source,” select ZIP Deploy

4. Click Continue and then Finish
   
5. Once it loads, click Browse or drag-and-drop your .zip file into the portal
   

Azure will unpack and deploy your site automatically. Wait a few seconds for it to complete. You’ll see a “Deployment completed successfully” message when done.

Check Your Live Website

Once the deployment finishes:

• Go to the Overview tab in your App Service
  
• Click the Default Domain link (e.g., https://umshpandit.azurewebsites.net)
  
• Your website will open in a new tab
  

If it loads correctly, you’ve deployed your first Azure web app successfully.
If you see an error, double-check:

• Your folder has an index.html in the root
  
• You zipped the folder contents correctly
  
• You chose the right runtime during setup
  

Monitor Your App and View Logs

Azure provides tools to help you monitor and troubleshoot your app:

• Use Log Stream to view real-time activity
  
• Check App Service Logs for error messages
  
• Turn on Application Insights (optional) for performance monitoring and crash reports
  

These tools help you stay on top of your app’s performance.

Final Checks and Testing

Before sharing the link:

• Open the site on both mobile and desktop
  
• Test in a few browsers like Chrome, Firefox, or Edge
  
• Make sure images, links, and styles load properly
  

Bookmark your Azure Portal and your live app’s URL for future updates.

Conclusion

You don’t need to write any code or use command-line tools to get started with Azure. With just a zipped folder and a few clicks, you can deploy your first site using ZIP Deploy in the Azure Portal.

I hope this step-by-step guide helped make the process easier to follow. Now that your app is live, you can continue building on it or start exploring other Azure tools when you’re ready.