Quickstart: Deploy an ASP.NET web app

If you already installed Visual Studio 2022:

1. Install the latest updates in Visual Studio by selecting Help > Check for Updates.
2. Add the workload by selecting Tools > Get Tools and Features.

• An Azure account with an active subscription. Create an account.
• Visual Studio Code.
• The Azure Tools extension.
• The latest .NET 8.0 SDK.
• (Optional) To try GitHub Copilot, a GitHub Copilot account. A 30-day trial is available.

• An Azure account with an active subscription. Create an account.
• The Azure CLI.
• The latest .NET 8.0 SDK.
• (Optional) To try GitHub Copilot, a GitHub Copilot account. A 30-day trial is available.

• An Azure account with an active subscription. Create an account.
• The Azure PowerShell.
• The latest .NET 8.0 SDK.

• An Azure account with an active subscription. Create an account.
• A GitHub account Create an account.

1. 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 --framework net8.0
   cd MyFirstAzureWebApp
   

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

   dotnet run --urls=https://localhost:5001/
   

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

   You see the template ASP.NET Core 8.0 web app displayed in the page.

   

In this step, you fork a demo project to deploy.

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

2. In Publish, select Azure and then Next.

   

3. Choose the Specific target, either Azure App Service (Linux) or Azure App Service (Windows). Then, select Next.

   Important

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

4. 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.

   

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

   

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	China North 2	The datacenter where the web app is hosted.
   Size	Choose the lowest tier.	Pricing tiers define hosting features.

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>.chinacloudsites.cn, where <app-name> is your app name.

11. Select Create to create the Azure resources.

    

    Once the wizard completes, the Azure resources are created for you, and you're ready to publish your ASP.NET Core project.

12. In the Publish dialog, ensure your new App Service app is selected, then select Finish, then select Close. Visual Studio creates a publish profile for you for the selected App Service app.

13. In the Publish page, select Publish. If you see a warning message, select Continue.

    Visual Studio builds, packages, and publishes the app to Azure, and then launches the app in the default browser.

    • .NET 8.0
    • .NET Framework 4.8

    You see the ASP.NET Core 8.0 web app displayed in the page.

    

1. Open Visual Studio Code from your project's root directory.

   code .
   

2. If prompted, select Yes, I trust the authors.

   Tip

   If you have a GitHub Copilot account, try getting GitHub Copilot features for Visual Studio Code.

3. In Visual Studio Code, open the Command Palette by selecting View > Command Palette.

4. Search for and select "Azure App Service: Create New Web App (Advanced)".

5. Respond to the prompts as follows:

   1. If prompted, sign in to your Azure account.
   2. Select your Subscription.
   3. Select Create new Web App... Advanced.
   4. 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.
   5. Select Create new resource group and provide a name like myResourceGroup.
   6. When prompted to Select a runtime stack, select .NET 8 (LTS).
   7. Select an operating system (Windows or Linux).
   8. Select a location near you.
   9. Select Create new App Service plan, provide a name, and select the Free (F1) pricing tier.
   10. Select Skip for now for the Application Insights resource.
   11. When prompted, select Deploy.
   12. Select MyFirstAzureWebApp as the folder to deploy.
   13. Select Add Config when prompted.

6. In the popup Always deploy the workspace "MyFirstAzureWebApp" to <app-name>", select Yes so that Visual Studio Code deploys to the same App Service app every time you're in that workspace.

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

   You see the ASP.NET Core 8.0 web app displayed in the page.

   

1. Sign into your Azure account by using the az login command and following the prompt:

   az login
   

   • If the az command isn't recognized, ensure you have the Azure CLI installed as described in Prerequisites.

2. 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>
   

   • 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 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 might take a few minutes to complete. While it's running, the command provides messages about creating the resource group, the App Service plan, and hosting app, configuring logging, then performing ZIP deployment. Then it shows a message with the app's URL:

   You can launch the app at http://<app-name>.chinacloudsites.cn
   

3. Open a web browser and navigate to the URL:

   You see the ASP.NET Core 8.0 web app displayed in the page.

   

1. Sign into your Azure account by using the Connect-AzAccount -Environment AzureChinaCloud command and following the prompt:

   Connect-AzAccount -Environment AzureChinaCloud
   

2. Create a new app by using the New-AzWebApp command:

   New-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -Location chinanorth2
   

   • Replace <app-name> with a name that's unique across all of Azure (valid characters are a-z, 0-9, and -). A combination of your company name and an app identifier is a good pattern.
   • You can optionally include the parameter -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 Get-AzLocation command.

   The command might take a few minutes to complete. While it's running, the command creates a resource group, an App Service plan, and the App Service resource.

3. From the application root folder, prepare your local MyFirstAzureWebApp application for deployment using the dotnet publish command:

   dotnet publish --configuration Release
   

4. Change to the release directory and create a zip file from the contents:

   cd bin\Release\net8.0\publish
   Compress-Archive -Path * -DestinationPath deploy.zip
   

5. Publish the zip file to the Azure app using the Publish-AzWebApp command:

   Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
   

   Note

   -ArchivePath needs the full path of the zip file.

6. Open a web browser and navigate to the URL:

   You see the ASP.NET Core 8.0 web app displayed in the page.

   

1. Type app services in the search. Under Services, select App Services.

   

2. In the App Services page, select Create > Web App.

3. In the Basics tab:

   • .NET 8.0
   • .NET Framework 4.8

   • Under Resource group, select Create new. Type myResourceGroup for the name.
   • Under Name, type a globally unique name for your web app.
   • Under Publish, select Code.
   • Under Runtime stack select .NET 8 (LTS).
   • Under Operating System, select Windows. If you select Linux, you can't configure GitHub deployment in the next step, but you can still do it after creating the app in the Deployment Center page.
   • Select a Region you want to serve your app from.
   • Under App Service Plan, select Create new and type myAppServicePlan for the name.
   • Under Pricing plan, select Free F1.

   

4. Select the Deployment tab at the top of the page

5. Under GitHub Actions settings, set Continuous deployment to Enable.

6. Under GitHub Actions details, authenticate with your GitHub account, and select the following options:

   • .NET 8.0
   • .NET Framework 4.8

   • For Organization select the organization where you forked the demo project.
   • For Repository select the dotnetcore-docs-hello-world project.
   • For Branch select main.

   

   Note

   By default, the creation wizard disables basic authentication and GitHub Actions deployment is created using a user-assigned identity. If you get a permissions error during resource creation, your Azure account may not have enough permissions. You can configure GitHub Actions deployment later with an identity generated for you by an Azure administrator, or you can also enable basic authentication instead.

7. Select the Review + create button at the bottom of the page.

8. After validation runs, select the Create button at the bottom of the page.

9. After deployment is complete, select Go to resource.

   

10. Browse to the deployed application in your web browser at the URL http://<app-name>.chinacloudsites.cn. If you see the message "Your web app is running and waiting for your content", GitHub deployment is still running. Wait a couple of minutes and refresh the page.

    • .NET 8.0
    • .NET Framework 4.8

    

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>
   

   Tip

   With GitHub Copilot enabled in Visual Studio, try the following:

   1. Select the <div> element and type Alt+/.
   2. Ask Copilot, "Change to a Bootstrap card that says .NET 💜 Azure."

   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.

   • .NET 8.0
   • .NET Framework 4.8

   You see the updated ASP.NET Core 8.0 web app displayed in the page.

   

1. Open Pages/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>
   

   Tip

   Try this with GitHub Copilot:

   1. Select the entire <div> element and click .
   2. Ask Copilot, "Change to a Bootstrap card that says .NET 💜 Azure."

   Save your changes.

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

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

5. Select the subscription and the web app you used earlier.

6. When prompted, select Deploy.

7. When publishing completes, select Browse Website in the notification.

   You see the updated ASP.NET Core 8.0 web app displayed in the page.

   

In the local directory, open the Pages/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 and 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 completes, switch back to the browser window that opened in the Browse to the app step, and hit refresh.

You see the updated ASP.NET Core 8.0 web app displayed in the page.

1. In the local directory, open the Pages/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>
   

2. From the application root folder, prepare your local MyFirstAzureWebApp application for deployment using the dotnet publish command:

   dotnet publish --configuration Release
   

3. Change to the release directory and create a zip file from the contents:

   cd bin\Release\net8.0\publish
   Compress-Archive -Path * -DestinationPath deploy.zip
   

4. Publish the zip file to the Azure app using the Publish-AzWebApp command:

   Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
   

   Note

   -ArchivePath needs the full path of the zip file.

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

   You see the updated ASP.NET Core 8.0 web app displayed in the page.

   

1. Browse to your GitHub fork of the sample code.

2. On your repo page, create a codespace by selecting Code > Create codespace on main.

   • .NET 8.0
   • .NET Framework 4.8

   

   Tip

   If you have a GitHub Copilot account, try getting GitHub Copilot features in your codespace.

3. Open Index.cshtml.

   • .NET 8.0
   • .NET Framework 4.8

   Index.cshtml is located in the Pages folder.

   

4. 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>
   

   The changes are automatically saved.

   Tip

   Try this with GitHub Copilot:

   1. Select the entire <div> element and click .
   2. Ask Copilot, "Change to a Bootstrap card that says .NET 💜 Azure."

5. From the Source Control menu, enter a commit message such as Modify homepage. Then, select Commit and confirm staging the changes by selecting Yes.

   • .NET 8.0
   • .NET Framework 4.8

   

   Tip

   Let GitHub Copilot create a commit message for you by selecting in the message box.

6. Select Sync changes 1, then confirm by selecting OK.

7. It takes a few minutes for the deployment to run. To view the progress, navigate to https://github.com/<your-github-alias>/dotnetcore-docs-hello-world/actions.

8. Return to the browser window that opened during the Browse to the app step, and refresh the page.

   • .NET 8.0
   • .NET Framework 4.8

   You see the updated ASP.NET Core 8.0 web app displayed in the 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.

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

For your convenience, the az webapp up command you ran earlier in this project saves the resource group name as the default value whenever you run az commands from this project.

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 PowerShell command:

Remove-AzResourceGroup -Name myResourceGroup

This command may take a minute to run.

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.