Quickstart: Deploy Your First Web App to Azure App Service

This guide will walk you through the essential steps to create and deploy a simple web application to Azure App Service using the Azure portal.

Prerequisites

Before you begin, ensure you have the following:

Tip: For this quickstart, we'll deploy a static HTML page, which is the simplest form of a web app.

Step 1: Create a Web App

1

Sign in to the Azure Portal

Open your web browser and navigate to the Azure portal. Sign in with your Azure account credentials.

Create an App Service Resource

In the Azure portal search bar at the top, type "App Services" and select it from the results.

Click the + Create button.

In the "App Service" page, select Create App Service.

2

Configure Basic Settings

On the "Create App Service" page, under the Basics tab:

  • Subscription: Select your Azure subscription.
  • Resource Group: Click Create new and enter a name for your resource group (e.g., my-app-rg).
  • Name: Enter a globally unique name for your web app (e.g., my-first-azure-app-xyz). Azure will automatically check availability.
  • Publish: Select Code.
  • Runtime stack: For this example, choose HTML, CSS, and JavaScript.
  • Operating System: Select Linux or Windows.
  • Region: Choose a region close to your users.
3

Configure App Service Plan

Under the App Service Plan section:

  • Operating System: Should match your choice above.
  • Region: Should match your choice above.
  • Pricing plan: For testing, select a F1 Free or B1 Basic tier.
  • If you need to create a new App Service Plan, click Create new and configure it.

Click Review + create.

4

Create the App Service

Review your settings. If everything looks correct, click Create.

Deployment may take a few minutes. You will see a notification once it's complete.

Step 2: Deploy Your Web Content

5

Navigate to Your App Service

Once deployment is complete, click Go to resource.

On the overview page of your App Service, you will see the default URL for your app (e.g., https://my-first-azure-app-xyz.azurewebsites.net).

Click this URL to see the default Azure App Service placeholder page. This confirms your app is running.

6

Deploy a Simple HTML File

For this quickstart, we will deploy a static HTML file using FTP.

In your App Service's left-hand menu, under Deployment, click Deployment Center.

Under the FTP tab, you will find your FTP host, username, and password.

Create a simple index.html file

Create a file named index.html on your local machine with the following content:

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Azure App</title> <style> body { font-family: 'Segoe UI', sans-serif; text-align: center; padding: 50px; background-color: #f0f8ff; color: #333; } h1 { color: #0078d4; } </style> </head> <body> <h1>Hello from Azure App Service!</h1> <p>This is my first web application deployed to Azure.</p> </body> </html>
7

Upload via FTP

Use an FTP client (like FileZilla, Cyberduck, or the command-line ftp tool) to connect to your App Service using the credentials provided in the Deployment Center.

Navigate to the site/wwwroot directory on your App Service.

Upload your index.html file to this directory, overwriting any existing files if necessary.

Step 3: Verify Your Deployment

8

View Your Web App

Go back to your App Service overview page and click the URL (e.g., https://my-first-azure-app-xyz.azurewebsites.net).

You should now see your "Hello from Azure App Service!" message.

Congratulations!

You have successfully created an Azure App Service and deployed a simple web application. This quickstart provides a foundational understanding of deploying web apps to Azure.

To learn more about Azure App Services, explore the following resources:

Explore More App Services Tutorials