title | description | ms.assetid | ms.topic | ms.date | zone_pivot_groups | adobe-target | adobe-target-activity | adobe-target-experience | adobe-target-content | author | ms.author | ms.custom | ai-usage | ms.collection |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Quickstart: Deploy an ASP.NET web app |
Learn how to run web apps in Azure App Service by deploying your first ASP.NET app. |
b1e6bd58-48d1-4007-9d6c-53fd6db061e3 |
quickstart |
01/26/2024 |
app-service-ide |
true |
DocsExpβ386541βA/BβEnhanced-Readability-Quickstartsβ2.19.2021 |
Experience B |
./quickstart-dotnetcore-uiex |
cephalin |
cephalin |
devx-track-csharp, mvc, devcenter, vs-azure, devdivchpfy22, devx-track-azurepowershell, devx-track-dotnet, ai-video-demo, devx-track-extended-azdevcli |
ai-assisted |
ce-skilling-ai-copilot |
[!INCLUDE regionalization-note]
In this quickstart, you 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 have an Azure resource group consisting of an App Service hosting plan and an App Service with a deployed web application.
Alternatively, you can deploy an ASP.NET web app as part of a Windows or Linux container in App Service.
Tip
Find GitHub Copilot tips in the Visual Studio, Visual Studio Code, and Azure portal steps.
Note
Building .NET 9 (STS) apps with Windows App Service using MSBuild or SCM_DO_BUILD is not yet supported. Support for these build scenarios will come after the initial GA date and by December 4th, 2024. Deployments that build outside of App Service through Visual Studio, Visual Studio Code, GitHub Actions and Azure DevOps are fully supported.
:::zone target="docs" pivot="development-environment-vs"
- An Azure account with an active subscription. Create an account for free.
- Visual Studio 2022 with the ASP.NET and web development workload.
- (Optional) To try GitHub Copilot, a GitHub Copilot account. A 30-day free trial is available.
- An Azure account with an active subscription. Create an account for free.
- Visual Studio 2022 with the ASP.NET and web development workload (ensure the optional checkbox .NET Framework project and item templates is selected).
- (Optional) To try GitHub Copilot, a GitHub Copilot account. A 30-day free trial is available.
If you already installed Visual Studio 2022:
- Install the latest updates in Visual Studio by selecting Help > Check for Updates.
- Add the workload by selecting Tools > Get Tools and Features.
:::zone-end
:::zone target="docs" pivot="development-environment-vscode"
- An Azure account with an active subscription. Create an account for free.
- 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 free trial is available.
:::zone-end
:::zone target="docs" pivot="development-environment-cli"
- An Azure account with an active subscription. Create an account for free.
- The Azure CLI.
- The latest .NET 8.0 SDK.
- (Optional) To try GitHub Copilot, a GitHub Copilot account. A 30-day free trial is available.
:::zone-end
:::zone target="docs" pivot="development-environment-ps"
- An Azure account with an active subscription. Create an account for free.
- The Azure PowerShell.
- The latest .NET 8.0 SDK.
:::zone-end
:::zone target="docs" pivot="development-environment-azure-portal"
- An Azure account with an active subscription. Create an account for free.
- A GitHub account Create an account for free.
:::zone-end
:::zone target="docs" pivot="development-environment-azd"
- An Azure account with an active subscription. Create an account for free.
- The Azure Developer CLI
- The latest .NET 8.0 SDK.
:::zone-end
:::zone target="docs" pivot="development-environment-vs, development-environment-azure-portal, development-environment-ps, development-environment-vscode, development-environment-cli"
:::zone-end
:::zone target="docs" pivot="development-environment-azd"
:::zone-end
:::zone target="docs" pivot="development-environment-vs"
-
Open Visual Studio and then select Create a new project.
-
In Create a new project, find, and select ASP.NET Core Web App (Razor Pages), then select Next.
-
In Configure your new project, name the application MyFirstAzureWebApp, and then select Next.
:::image type="content" source="./media/quickstart-dotnetcore/configure-web-app-project.png" alt-text="Screenshot of Visual Studio - Configure ASP.NET 8.0 web app." lightbox="media/quickstart-dotnetcore/configure-web-app-project.png" border="true":::
-
Select .NET 8.0 (Long Term Support).
-
Ensure Authentication type is set to None. Select Create.
:::image type="content" source="media/quickstart-dotnetcore/vs-additional-info-net-80.png" alt-text="Screenshot of Visual Studio - Additional info when selecting .NET 8.0." lightbox="media/quickstart-dotnetcore/vs-additional-info-net-80.png" border="true":::
-
From the Visual Studio menu, select Debug > Start Without Debugging to run the web app locally. If you see a message asking you to trust a self-signed certificate, select Yes.
:::image type="content" source="media/quickstart-dotnetcore/local-web-app-net.png" alt-text="Screenshot of Visual Studio - ASP.NET Core 8.0 running locally." lightbox="media/quickstart-dotnetcore/local-web-app-net.png" border="true":::
-
Open Visual Studio and then select Create a new project.
-
In Create a new project, find, and select ASP.NET Web Application (.NET Framework), then select Next.
-
In Configure your new project, name the application MyFirstAzureWebApp, and then select Create.
:::image type="content" source="media/quickstart-dotnet/configure-web-app-net-framework-48.png" alt-text="Screenshot of Visual Studio - Configure ASP.NET Framework 4.8 web app." lightbox="media/quickstart-dotnet/configure-web-app-net-framework-48.png" border="true":::
-
Select the MVC template.
-
Ensure Authentication is set to No Authentication. Select Create.
:::image type="content" source="media/quickstart-dotnetcore/vs-mvc-no-auth-net-framework-48.png" alt-text="Screenshot of Visual Studio - Select the MVC template." lightbox="media/quickstart-dotnetcore/vs-mvc-no-auth-net-framework-48.png" border="true":::
-
From the Visual Studio menu, select Debug > Start Without Debugging to run the web app locally.
:::image type="content" source="media/quickstart-dotnetcore/vs-local-web-app-net-framework-48.png" alt-text="Screenshot of Visual Studio - ASP.NET Framework 4.8 running locally." lightbox="media/quickstart-dotnetcore/vs-local-web-app-net-framework-48.png" border="true":::
Tip
If you have a GitHub Copilot account, try getting GitHub Copilot features for Visual Studio.
:::zone-end
:::zone target="docs" pivot="development-environment-vscode,development-environment-cli,development-environment-ps"
-
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
-
From the same terminal session, run the application locally using the
dotnet run
command.dotnet run --urls=https://localhost:5001/
-
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.
:::image type="content" source="media/quickstart-dotnetcore/local-web-app-net.png" alt-text="Screenshot of Visual Studio Code - ASP.NET Core 8.0 in local browser." lightbox="media/quickstart-dotnetcore/local-web-app-net.png" border="true":::
:::zone-end
:::zone target="docs" pivot="development-environment-azure-portal"
In this step, you fork a demo project to deploy.
- Go to the .NET 8.0 sample app.
- Select the Fork button in the upper right on the GitHub page.
- Select the Owner and leave the default Repository name.
- Select Create fork.
- Go to the .NET Framework 4.8 sample app.
- Select the Fork button in the upper right on the GitHub page.
- Select the Owner and leave the default Repository name.
- Select Create fork.
:::zone-end
:::zone target="docs" pivot="development-environment-azd"
This quickstart uses the Azure Developer CLI (azd
) both to create Azure resources and deploy code to it. For more information about Azure Developer CLI, visit the documentation or training path.
Retrieve and initialize the ASP.NET Core web app template for this quickstart using the following steps:
-
Open a terminal window on your machine to an empty working directory. Initialize the
azd
template using theazd init
command.azd init --template https://github.com/Azure-Samples/quickstart-deploy-aspnet-core-app-service.git
When prompted for an environment name, enter
dev
. -
From the same terminal session, run the application locally using the
dotnet run
command. Use the--project
parameter to specify thesrc
directory of theazd
template, which is where the application code lives.dotnet run --project src --urls=https://localhost:5001/
-
Open a web browser and navigate to the app at
https://localhost:5001
. The ASP.NET Core 8.0 web app template is displayed on the page.:::image type="content" source="media/quickstart-dotnetcore/local-web-app-net.png" alt-text="Screenshot of Visual Studio Code - ASP.NET Core 8.0 in local browser." lightbox="media/quickstart-dotnetcore/local-web-app-net.png" border="true":::
:::zone-end
Follow these steps to create your App Service resources and publish your project:
:::zone target="docs" pivot="development-environment-vs"
-
In Solution Explorer, right-click the MyFirstAzureWebApp project and select Publish.
-
In Publish, select Azure and then Next.
:::image type="content" source="media/quickstart-dotnetcore/vs-publish-target-azure.png" alt-text="Screenshot of Visual Studio - Publish the web app and target Azure." lightbox="media/quickstart-dotnetcore/vs-publish-target-azure.png" border="true":::
-
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).
-
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.
:::image type="content" source="media/quickstart-dotnetcore/sign-in-azure.png" border="true" alt-text="Screenshot of Visual Studio - Select sign in to Azure dialog." lightbox="media/quickstart-dotnetcore/sign-in-azure.png" :::
-
To the right of App Service instances, select +.
:::image type="content" source="media/quickstart-dotnetcore/publish-new-app-service.png" border="true" alt-text="Screenshot of Visual Studio - New App Service app dialog." lightbox="media/quickstart-dotnetcore/publish-new-app-service.png" :::
-
For Subscription, accept the subscription that is listed or select a new one from the drop-down list.
-
For Resource group, select New. In New resource group name, enter myResourceGroup and select OK.
-
For Hosting Plan, select New.
-
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 Choose the lowest tier. Pricing tiers define hosting features. -
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 ishttp://<app-name>.azurewebsites.net
, where<app-name>
is your app name. -
Select Create to create the Azure resources.
:::image type="content" source="media/quickstart-dotnetcore/web-app-name.png" border="true" alt-text="Screenshot of Visual Studio - Create app resources dialog." lightbox="media/quickstart-dotnetcore/web-app-name.png" :::
Once the wizard completes, the Azure resources are created for you, and you're ready to publish your ASP.NET Core project.
-
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.
-
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.
You see the ASP.NET Core 8.0 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/azure-web-app-net.png" border="true" alt-text="Screenshot of Visual Studio - ASP.NET Core 8.0 web app in Azure." :::
You see the ASP.NET Framework 4.8 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/vs-azure-web-app-net-48.png" lightbox="media/quickstart-dotnetcore/vs-azure-web-app-net-48.png" border="true" alt-text="Screenshot of Visual Studio - ASP.NET Framework 4.8 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-vscode"
-
Open Visual Studio Code from your project's root directory.
code .
-
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.
-
In Visual Studio Code, open the Command Palette by selecting View > Command Palette.
-
Search for and select "Azure App Service: Create New Web App (Advanced)".
-
Respond to the prompts as follows:
- If prompted, sign in to your Azure account.
- 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, select .NET 8 (LTS).
- Select an operating system (Windows or Linux).
- Select a location near you.
- Select Create new App Service plan, provide a name, and select the Free (F1) pricing tier.
- Select Skip for now for the Application Insights resource.
- When prompted, select Deploy.
- Select MyFirstAzureWebApp as the folder to deploy.
- Select Add Config when prompted.
-
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.
-
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.
:::image type="content" source="media/quickstart-dotnetcore/azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/azure-web-app-net.png" border="true" alt-text="Screenshot of Visual Studio Code - ASP.NET Core 8.0 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-cli"
-
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.
- If the
-
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 area-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 eitherlinux
orwindows
. - 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 theaz 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>.azurewebsites.net
- Replace
-
Open a web browser and navigate to the URL:
You see the ASP.NET Core 8.0 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/azure-web-app-net.png" border="true" alt-text="Screenshot of the CLI - ASP.NET Core 8.0 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-ps"
Note
Azure PowerShell is recommended for creating apps on the Windows hosting platform. To create apps on Linux, use a different tool, such as Azure CLI.
-
Sign into your Azure account by using the
Connect-AzAccount
command and following the prompt:Connect-AzAccount
-
Create a new app by using the New-AzWebApp command:
New-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -Location westeurope
- Replace
<app-name>
with a name that's unique across all of Azure (valid characters area-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 theGet-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.
- Replace
-
From the application root folder, prepare your local MyFirstAzureWebApp application for deployment using the
dotnet publish
command:dotnet publish --configuration Release
-
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
-
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. -
Open a web browser and navigate to the URL:
You see the ASP.NET Core 8.0 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/azure-web-app-net.png" border="true" alt-text="Screenshot of the CLI - ASP.NET Core 8.0 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-azure-portal"
-
Type app services in the search. Under Services, select App Services.
:::image type="content" source="./media/quickstart-dotnetcore/portal-search.png?text=Azure portal search details" alt-text="Screenshot of portal search in the Azure portal.":::
-
In the App Services page, select Create > Web App.
-
In the Basics tab:
- 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.
:::image type="content" source="./media/quickstart-dotnetcore/app-service-details-net-80.png" lightbox="./media/quickstart-dotnetcore/app-service-details-net-80.png" alt-text="Screenshot of new App Service app configuration for .NET 8 in the Azure portal.":::
- 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 ASP.NET V4.8.
- Select an Operating System, and 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.
:::image type="content" source="./media/quickstart-dotnetcore/app-service-details-net-48.png" lightbox="./media/quickstart-dotnetcore/app-service-details-net-48.png" alt-text="Screenshot of new App Service app configuration for .NET Framework V4.8 in the Azure portal.":::
-
Select the Deployment tab at the top of the page
-
Under GitHub Actions settings, set Continuous deployment to Enable.
-
Under GitHub Actions details, authenticate with your GitHub account, and select the following options:
- For Organization select the organization where you forked the demo project.
- For Repository select the dotnetcore-docs-hello-world project.
- For Branch select main.
:::image type="content" source="media/quickstart-dotnetcore/app-service-deploy-80.png" lightbox="media/quickstart-dotnetcore/app-service-deploy-80.png" border="true" alt-text="Screenshot of the deployment options for an app using the .NET 8 runtime.":::
- For Organization select the organization where you forked the demo project.
- For Repository select the app-service-web-dotnet-get-started project.
- For Branch select main.
:::image type="content" source="media/quickstart-dotnet/app-service-deploy-48.png" lightbox="media/quickstart-dotnet/app-service-deploy-48.png" border="true" alt-text="Screenshot of the deployment options for an app using the .NET Framework 4.8 runtime.":::
[!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.
-
Select the Review + create button at the bottom of the page.
-
After validation runs, select the Create button at the bottom of the page.
-
After deployment is complete, select Go to resource.
:::image type="content" source="./media/quickstart-dotnet/next-steps.png" alt-text="Screenshot of the next step of going to the resource.":::
-
Browse to the deployed application in your web browser at the URL
http://<app-name>.azurewebsites.net
. 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.:::image type="content" source="media/quickstart-dotnetcore/browse-dotnet-80.png" lightbox="media/quickstart-dotnetcore/browse-dotnet-80.png" border="true" alt-text="Screenshot of the deployed .NET 8.0 sample app.":::
:::image type="content" source="media/quickstart-dotnet/browse-dotnet-48.png" lightbox="media/quickstart-dotnet/browse-dotnet-48.png" border="true" alt-text="Screenshot of the deployed .NET Framework 4.8 sample app.":::
:::zone-end
:::zone target="docs" pivot="development-environment-azd"
The AZD template contains files that generate the following required resources for your application to run in App service:
- A new resource group to contain all of the Azure resources for the service.
- A new App Service plan that specifies the location, size, and features of the web server farm that hosts your app.
- A new App Service app instance to run the deployed application.
-
Sign into your Azure account by using the
azd auth login
command and following the prompt:azd auth login
-
Create the Azure resources and deploy your app using the
azd up
command:azd up
The
azd up
command might take a few minutes to complete.azd up
uses the Bicep files in your projects to create the resource group, App Service Plan, and hosting app. It also performs certain configurations such as enabling logging and deploys your compiled app code. While it's running, the command provides messages about the provisioning and deployment process, including a link to the deployment in Azure. When it finishes, the command also displays a link to the deploy application. -
Open a web browser and navigate to the URL:
You see the ASP.NET Core 8.0 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/browse-dotnet-70.png" lightbox="media/quickstart-dotnetcore/browse-dotnet-70.png" border="true" alt-text="Screenshot of the deployed .NET Framework 4.8 sample app.":::
:::zone-end
You'll make a change to Index.cshtml and redeploy to see the changes. In the .NET 8.0 template, it's in the Pages folder. In the .NET Framework 4.8 template, it's in the Views/Home folder. Follow these steps to update and redeploy your web app:
:::zone target="docs" pivot="development-environment-vs"
-
In Solution Explorer, under your project, open Index.cshtml.
-
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:
- Select the
<div>
element and type Alt+/. - Ask Copilot, "Change to a Bootstrap card that says .NET π Azure."
Save your changes.
- Select the
-
To redeploy to Azure, right-click the MyFirstAzureWebApp project in Solution Explorer and select Publish.
-
In the Publish summary page, select Publish.
When publishing completes, Visual Studio launches a browser to the URL of the web app.
You see the updated ASP.NET Core 8.0 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/updated-azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/updated-azure-web-app-net.png" border="true" alt-text="Screenshot of Visual Studio - Updated ASP.NET Core 8.0 web app in Azure.":::
You see the updated ASP.NET Framework 4.8 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/vs-updated-azure-web-app-net-48.png" lightbox="media/quickstart-dotnetcore/vs-updated-azure-web-app-net-48.png" border="true" alt-text="Screenshot of Visual Studio - Updated ASP.NET Framework 4.8 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-vscode"
-
Open Pages/Index.cshtml.
-
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:
- Select the entire
<div>
element and click :::image type="icon" source="media/quickstart-dotnetcore/github-copilot-in-editor.png" border="false":::. - Ask Copilot, "Change to a Bootstrap card that says .NET π Azure."
Save your changes.
- Select the entire
-
In Visual Studio Code, open the Command Palette, Ctrl+Shift+P.
-
Search for and select "Azure App Service: Deploy to Web App".
-
Select the subscription and the web app you used earlier.
-
When prompted, select Deploy.
-
When publishing completes, select Browse Website in the notification.
You see the updated ASP.NET Core 8.0 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/updated-azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/updated-azure-web-app-net.png" border="true" alt-text="Screenshot of Visual Studio Code - Updated ASP.NET Core 8.0 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-cli,development-environment-ps,development-environment-azd"
Tip
To see how Visual Studio Code with GitHub Copilot helps improve your web development experience, see the Visual Studio Code steps.
:::zone-end
:::zone target="docs" pivot="development-environment-cli"
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.
:::image type="content" source="media/quickstart-dotnetcore/updated-azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/updated-azure-web-app-net.png" border="true" alt-text="Screenshot of the CLI - Updated ASP.NET Core 8.0 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-ps"
-
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>
-
From the application root folder, prepare your local MyFirstAzureWebApp application for deployment using the
dotnet publish
command:dotnet publish --configuration Release
-
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
-
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. -
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.
:::image type="content" source="media/quickstart-dotnetcore/updated-azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/updated-azure-web-app-net.png" border="true" alt-text="Screenshot of the CLI - Updated ASP.NET Core 8.0 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-azure-portal"
-
Browse to your GitHub fork of the sample code.
-
On your repo page, create a codespace by selecting Code > Create codespace on main.
[!TIP] If you have a GitHub Copilot account, try getting GitHub Copilot features in your codespace.
-
Open Index.cshtml.
Index.cshtml is located in the
Pages
folder.Index.cshtml is located in the
aspnet-get-started/Views/Home
folder
-
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:
- Select the entire
<div>
element and click :::image type="icon" source="media/quickstart-dotnetcore/github-copilot-in-editor.png" border="false":::. - Ask Copilot, "Change to a Bootstrap card that says .NET π Azure."
- Select the entire
-
From the Source Control menu, enter a commit message such as
Modify homepage
. Then, select Commit and confirm staging the changes by selecting Yes.
[!TIP] Let GitHub Copilot create a commit message for you by selecting :::image type="icon" source="media/quickstart-dotnetcore/github-copilot-in-editor.png" border="false"::: in the message box.
-
Select Sync changes 1, then confirm by selecting OK.
-
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
. -
Return to the browser window that opened during the Browse to the app step, and refresh the page.
You see the updated ASP.NET Core 8.0 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnetcore/portal-updated-dotnet-7.png" lightbox="media/quickstart-dotnetcore/portal-updated-dotnet-7.png" border="true" alt-text="Screenshot of the CLI - Updated ASP.NET Core 8.0 web app in Azure.":::
You see the updated ASP.NET Framework 4.8 web app displayed in the page.
:::image type="content" source="media/quickstart-dotnet/updated-azure-webapp-net-48.png" lightbox="media/quickstart-dotnet/updated-azure-webapp-net-48.png" border="true" alt-text="Screenshot of the CLI - Updated ASP.NET Framework 4.8 web app in Azure.":::
:::zone-end
:::zone target="docs" pivot="development-environment-azd"
In the local directory, open the src/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 azd up
command again:
azd up
azd up
skips the provisioning resources step this time and only redeploys your code, since there are no changes to the Bicep files.
Once deployment completes, the browser opens to the updated ASP.NET Core 8.0 web app.
:::image type="content" source="media/quickstart-dotnetcore/updated-azure-web-app-net.png" lightbox="media/quickstart-dotnetcore/updated-azure-web-app-net.png" border="true" alt-text="Screenshot of the CLI - Updated ASP.NET Core 8.0 web app in Azure.":::
:::zone-end
To manage your web app, go to the Azure portal, and search for and select App Services.
:::image type="content" source="media/quickstart-dotnetcore/app-services.png" alt-text="Screenshot of the Azure portal - Select App Services option.":::
On the App Services page, select the name of your web app.
:::image type="content" source="./media/quickstart-dotnetcore/select-app-service.png" alt-text="Screenshot of the 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.
:::image type="content" source="media/quickstart-dotnetcore/web-app-overview-page.png" alt-text="Screenshot of the Azure portal - App Service overview page.":::
:::zone target="docs" pivot="development-environment-vs" [!INCLUDE Clean-up Portal web app resources] :::zone-end
:::zone target="docs" pivot="development-environment-vscode" [!INCLUDE Clean-up Portal web app resources] :::zone-end
:::zone target="docs" pivot="development-environment-cli"
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.
:::zone-end
:::zone target="docs" pivot="development-environment-ps"
[!INCLUDE Clean-up PowerShell resources] :::zone-end
:::zone target="docs" pivot="development-environment-azure-portal"
[!INCLUDE Clean-up Portal web app resources] :::zone-end
:::zone target="docs" pivot="development-environment-azd"
[!INCLUDE Clean-up Azure Developer CLI web app resources] :::zone-end
Advance to the next article to learn how to create a .NET Core app and connect it to a SQL Database:
[!div class="nextstepaction"] Tutorial: ASP.NET Core app with SQL database
[!div class="nextstepaction"] App Template: ASP.NET Core app with SQL database and App Insights deployed using CI/CD GitHub Actions
[!div class="nextstepaction"] Configure ASP.NET Core app
:::zone target="docs" pivot="development-environment-azd"
[!div class="nextstepaction"] Learn more about the Azure Developer CLI :::zone-end
Advance to the next article to learn how to create a .NET Framework app and connect it to a SQL Database:
[!div class="nextstepaction"] Tutorial: ASP.NET app with SQL database
[!div class="nextstepaction"] Configure ASP.NET Framework app
[!div class="nextstepaction"] Β Secure with custom domain and certificate