Quickstart: Deploy an ASP.NET web app

In this quickstart, you'll learn how to create and deploy your first ASP.NET web app to Azure App Service. App Service supports various versions of .NET apps, and provides a highly scalable, self-patching web hosting service. ASP.NET web apps are cross-platform and can be hosted on Linux or Windows. When you're finished, you'll have an Azure resource group consisting of an App Service hosting plan and an App Service with a deployed web application.

Prerequisites

  • An Azure account with an active subscription. Create an account for free.

  • Visual Studio 2019 with the ASP.NET and web development workload.

    If you've already installed Visual Studio 2019:

    • Install the latest updates in Visual Studio by selecting Help > Check for Updates.
    • Add the workload by selecting Tools > Get Tools and Features.
Install the latest .NET Core 3.1 SDK.
Install the latest .NET Core 3.1 SDK.

Create an ASP.NET web app

Tip

.NET Core 3.1 is the current long-term support (LTS) release of .NET. For more information, see .NET support policy.

  1. Open Visual Studio and then select Create a new project.

  2. In Create a new project, find, and choose ASP.NET Core Web App, then select Next.

  3. In Configure your new project, name the application MyFirstAzureWebApp, and then select Next.

    Configure ASP.NET Core 3.1 web app

  4. Select .NET Core 3.1 (Long-term support).

  5. Make sure Authentication Type is set to None. Select Create.

    Visual Studio - Select .NET Core 3.1 and None for Authentication Type.

  6. From the Visual Studio menu, select Debug > Start Without Debugging to run the web app locally.

    Visual Studio - .NET Core 3.1 browse locally

Create a new folder named MyFirstAzureWebApp, and open it in Visual Studio Code. Open the Terminal window, and create a new .NET web app using the dotnet new webapp command.

dotnet new webapp -f netcoreapp3.1

From the Terminal in Visual Studio Code, run the application locally using the dotnet run command.

dotnet run

Open a web browser, and navigate to the app at https://localhost:5001.

You'll see the template ASP.NET Core 3.1 web app displayed in the page.

Visual Studio Code - run .NET Core 3.1 in browser locally.

Open a terminal window on your machine to a working directory. Create a new .NET web app using the dotnet new webapp command, and then change directories into the newly created app.

dotnet new webapp -n MyFirstAzureWebApp -f netcoreapp3.1 && cd MyFirstAzureWebApp

From the same terminal session, run the application locally using the dotnet run command.

dotnet run

Open a web browser, and navigate to the app at https://localhost:5001.

You'll see the template ASP.NET Core 3.1 web app displayed in the page.

Visual Studio Code - ASP.NET Core 3.1 in local browser.

Publish your web app

To publish your web app, you must first create and configure a new App Service that you can publish your app to.

As part of setting up the App Service, you'll create:

  • A new resource group to contain all of the Azure resources for the service.
  • A new Hosting Plan that specifies the location, size, and features of the web server farm that hosts your app.

Follow these steps to create your App Service and publish your web app:

  1. In Solution Explorer, right-click the MyFirstAzureWebApp project and select Publish.

  2. In Publish, select Azure and then Next.

    Visual Studio - Publish the web app and target Azure.

  3. Your options depend on whether you're signed in to Azure already and whether you have a Visual Studio account linked to an Azure account. Select either Add an account or Sign in to sign in to your Azure subscription. If you're already signed in, select the account you want.

    Visual Studio - Select sign in to Azure dialog.

  4. Choose the Specific target, either Azure App Service (Linux) or Azure App Service (Windows).

    Important

    When targeting ASP.NET Framework 4.8, you will use Azure App Service (Windows).

  5. To the right of App Service instances, select +.

    Visual Studio - New App Service app dialog.

  6. For Subscription, accept the subscription that is listed or select a new one from the drop-down list.

  7. For Resource group, select New. In New resource group name, enter myResourceGroup and select OK.

  8. For Hosting Plan, select New.

  9. In the Hosting Plan: Create new dialog, enter the values specified in the following table:

    Setting Suggested value Description
    Hosting Plan MyFirstAzureWebAppPlan Name of the App Service plan.
    Location West Europe The datacenter where the web app is hosted.
    Size Free Pricing tier determines hosting features.

    Create new Hosting Plan

  10. In Name, enter a unique app name that includes only the valid characters are a-z, A-Z, 0-9, and -. You can accept the automatically generated unique name. The URL of the web app is http://<app-name>.azurewebsites.net, where <app-name> is your app name.

  11. Select Create to create the Azure resources.

    Visual Studio - Create app resources dialog.

    Once the wizard completes, the Azure resources are created for you and you are ready to publish.

  12. Select Finish to close the wizard.

  13. In the Publish page, select Publish. Visual Studio builds, packages, and publishes the app to Azure, and then launches the app in the default browser.

    You'll see the ASP.NET Core 3.1 web app displayed in the page.

    Visual Studio - ASP.NET Core 3.1 web app in Azure.

To deploy your web app using the Visual Studio Azure Tools extension:

  1. In Visual Studio Code, open the Command Palette, Ctrl+Shift+P.

  2. Search for and select "Azure App Service: Deploy to Web App".

  3. Respond to the prompts as follows:

    • Select MyFirstAzureWebApp as the folder to deploy.
    • Select Add Config when prompted.
    • If prompted, sign in to your existing Azure account.

    Visual Studio Code - Sign in to Azure.

    • Select your Subscription.
    • Select Create new Web App... Advanced.
    • For Enter a globally unique name, use a name that's unique across all of Azure (valid characters are a-z, 0-9, and -). A good pattern is to use a combination of your company name and an app identifier.
    • Select Create new resource group and provide a name like myResourceGroup.
    • When prompted to Select a runtime stack:
      • For .NET Core 3.1, select .NET Core 3.1 (LTS)
      • For .NET 5.0, select .NET 5
      • For .NET Framework 4.8, select ASP.NET V4.8
    • Select an operating system (Windows or Linux).
      • For .NET Framework 4.8, Windows will be selected implicitly.
    • Select Create a new App Service plan, provide a name, and select the F1 Free pricing tier.
    • Select Skip for now for the Application Insights resource.
    • Select a location near you.
  4. When publishing completes, select Browse Website in the notification and select Open when prompted.

    You'll see the ASP.NET Core 3.1 web app displayed in the page.

    Visual Studio Code - ASP.NET Core 3.1 web app in Azure.

Deploy the code in your local MyFirstAzureWebApp directory using the az webapp up command:

az webapp up --sku F1 --name <app-name> --os-type <os>
  • If the az command isn't recognized, be sure you have the Azure CLI installed as described in Prerequisites.
  • Replace <app-name> with a name that's unique across all of Azure (valid characters are a-z, 0-9, and -). A good pattern is to use a combination of your company name and an app identifier.
  • The --sku F1 argument creates the web app on the Free pricing tier. Omit this argument to use a faster premium tier, which incurs an hourly cost.
  • Replace <os> with either linux or windows. You must use windows when targeting ASP.NET Framework 4.8.
  • You can optionally include the argument --location <location-name> where <location-name> is an available Azure region. You can retrieve a list of allowable regions for your Azure account by running the az account list-locations command.

The command may take a few minutes to complete. While running, it provides messages about creating the resource group, the App Service plan, and hosting app, configuring logging, then performing ZIP deployment. It then outputs a message with the app's URL:

You can launch the app at http://<app-name>.azurewebsites.net

Open a web browser and navigate to the URL:

You'll see the ASP.NET Core 3.1 web app displayed in the page.

CLI - ASP.NET Core 3.1 web app in Azure.

Update the app and redeploy

Follow these steps to update and redeploy your web app:

  1. In Solution Explorer, under your project, open Index.cshtml.

  2. Replace the first <div> element with the following code:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    Save your changes.

  3. To redeploy to Azure, right-click the MyFirstAzureWebApp project in Solution Explorer and select Publish.

  4. In the Publish summary page, select Publish.

    When publishing completes, Visual Studio launches a browser to the URL of the web app.

    You'll see the updated ASP.NET Core 3.1 web app displayed in the page.

    Visual Studio - Updated ASP.NET Core 3.1 web app in Azure.

  1. Open Index.cshtml.

  2. Replace the first <div> element with the following code:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    Save your changes.

  3. Open the Visual Studio Code Side Bar, select the Azure icon to expand its options.

  4. Under the APP SERVICE node, expand your subscription and right-click on the MyFirstAzureWebApp.

  5. Select the Deploy to Web App....

  6. Select Deploy when prompted.

  7. When publishing completes, select Browse Website in the notification and select Open when prompted.

    You'll see the updated ASP.NET Core 3.1 web app displayed in the page.

    Visual Studio Code - Updated ASP.NET Core 3.1 web app in Azure.

In the local directory, open the Index.cshtml file. Replace the first <div> element:

<div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

Save your changes, then redeploy the app using the az webapp up command again:

ASP.NET Core 3.1 is cross-platform, based on your previous deployment replace <os> with either linux or windows.

az webapp up --os-type <os>

This command uses values that are cached locally in the .azure/config file, including the app name, resource group, and App Service plan.

Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and hit refresh.

You'll see the updated ASP.NET Core 3.1 web app displayed in the page.

CLI - Updated ASP.NET Core 3.1 web app in Azure.

Manage the Azure app

To manage your web app, go to the Azure portal, and search for and select App Services.

Azure portal - Select App Services option.

On the App Services page, select the name of your web app.

Azure portal - App Services page with an example web app selected.

The Overview page for your web app, contains options for basic management like browse, stop, start, restart, and delete. The left menu provides further pages for configuring your app.

Azure portal - App Service overview page.

Clean up resources

In the preceding steps, you created Azure resources in a resource group. If you don't expect to need these resources in the future, you can delete them by deleting the resource group.

  1. From your web app's Overview page in the Azure portal, select the myResourceGroup link under Resource group.
  2. On the resource group page, make sure that the listed resources are the ones you want to delete.
  3. Select Delete, type myResourceGroup in the text box, and then select Delete.

Clean up resources

In the preceding steps, you created Azure resources in a resource group. If you don't expect to need these resources in the future, you can delete them by deleting the resource group.

  1. From your web app's Overview page in the Azure portal, select the myResourceGroup link under Resource group.
  2. On the resource group page, make sure that the listed resources are the ones you want to delete.
  3. Select Delete, type myResourceGroup in the text box, and then select Delete.

Clean up resources

In the preceding steps, you created Azure resources in a resource group. If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

This command may take a minute to run.

Next steps

In this quickstart, you created and deployed an ASP.NET web app to Azure App Service.

Advance to the next article to learn how to create a .NET Core app and connect it to a SQL Database: