Deploy an ASP.NET Core Blazor Server Application to Azure App Service

• Nov 23, 2023
• 6 minutes to read

This topic shows how to publish an XAF Blazor Server UI application to the Azure App Service. For more information about other deployment methods, refer to the Microsoft documentation.

Prerequisites

• An Azure account with an active subscription.

• An XAF Blazor Server application. This topic is based on the MainDemo Blazor Server demo application that ships with XAF. You can find this demo in the following folder: %PUBLIC%\Documents\DevExpress Demos 23.2\Components\XAF\MainDemo.NET.EFCore\CS\MainDemo.Blazor.Server.

  In some cases, you may encounter build errors because file paths are too long. To solve this, we recommend that you copy the folder containing the demo application closer to the root of your drive.

  If you do not have XAF installed, download our Universal Subscription installer from the Download Manager or start a 30-day trial now.

  Read Tutorial: Create a New XAF Blazor App

Deployment Instructions

Add Required Packages (.NET 7+)

Make sure you have the correct drawing engine for your application. If your project targets .NET 7+, add the following packages to your MainDemo.Blazor.Server project:

• DevExpress.Drawing
• DevExpress.Drawing.Skia – For more information on this package, refer to the following topic: DevExpress.Drawing Graphics Library.

Set Up a Publishing Profile

1. Run Visual Studio with administrative privileges and open your Blazor solution (the MainDemo Blazor Server demo application is used in this example).

2. Log into your Microsoft account from Visual Studio.

   

3. In Solution Explorer, right-click the MainDemo.Blazor.Server project name and click Publish.

   

4. Select Azure and click Next.

   

5. Select the Azure App Service. In this tutorial, we publish the application to Azure App Service (Linux). Select this item and click Next.

   

6. On the App Service tab, click Create new.

   

7. If necessary, change the Name, Resource group, or Hosting Plan values and click Create.

8. Select the newly-created service and click Next.

   

9. On the API Management tab, check the Skip this step box and click Finish.

   

10. Close the Publish wizard.

11. Visual Studio creates a publishing profile for your project.

Connect to an Azure SQL Database

1. Scroll to the bottom of the Publish Profile Summary page and click the ellipsis button next to the SQL Server Database (ConnectionStrings:ConnectionString) service dependency. Select Connect from the ensuing menu.

   

2. Select Azure SQL Database and click Next.

   

3. Select an existing Azure SQL server or create a new instance. In this tutorial, we click New to create a new server.

   

4. Click New next to the Database server field.

   

5. Specify values for the Database server name, Location, Administrator username, and password fields. Click OK to close the dialog.

   

6. Click Create in the Azure SQL Database dialog.

7. Select the created database and click Next.

   

8. Specify credentials (username and password) for database connection. Best practice is to avoid using the same details as the username and password used in step 5.

   Click Next.

   

9. Clear the NuGet packages check box and click Finish.

   

10. Close the dialog.

Choose a Publishing Approach

You can publish your app to the Azure App Service using one of the following options:

Azure SignalR Service (Recommended by Microsoft)

This approach requires additional setup in the MainDemo.Blazor.Server/Startup.cs file. Note that the specified step is implemented in the MainDemo application by default.

public void ConfigureServices(IServiceCollection services) {
    services.AddSingleton(
        typeof(HubConnectionHandler<>),
        typeof(ProxyHubConnectionHandler<>)
);

For more information, refer to the following Microsoft page: Azure SignalR Service.

Application Request Routing (ARR) Affinity and WebSockets

You can enable this functionality in the App Service settings on the Azure Portal. For more information, refer to the following Microsoft topic: Using the Application Request Routing Module.

HTTP Long Polling

This approach uses multiple HTTP connections to send and receive data instead of WebSocket connection. In this case, the application displays error messages in the browser console.

This tutorial describes how to implement the first two approaches. For detailed steps, refer to sections below.

The “Azure SignalR Service” Publishing Approach

1. Ensure you have performed an additional setup step.

2. Scroll to the bottom of the Publish Profile Summary page and click the ellipsis button next to the SignalR service dependency. Select Connect from the ensuing menu.

   

3. Select an existing SingleR instance or create a new one. In this tutorial, we click New to create a new instance.

   

4. Specify required field values and click Create.

   

5. Select the created instance and click Next.

6. Click Finish to create the instance.
7. Close the dialog.

The “Application Request Routing (ARR) affinity and WebSockets” Publishing Approach

1. Open the Azure Portal.

2. Click App Services.

   

3. Click your App Service name.

4. Switch to the Configuration -> General Settings page.

   

5. Enable WebSockets and ARR settings.

   Note that these settings are always enabled for Linux App Services - these settings are enabled by default for the App Service we have created in this tutorial. In this case, the General Settings page does not display corresponding settings. For more information, refer to the following Microsoft article: Azure App Service on Linux FAQ - Web Sockets.

Publish the Application

1. In the Visual Studio, click Publish next to the created profile.

   

2. Once the application is published, update the database (if necessary). Note that these steps (2-3) are not required for this example as our demo application automatically generates a demo database. You would normally need to perform these steps for your custom applications.

   Open Azure Portal and go your App Service settings. Click Advanced Tools and follow the Go link.

   

3. Switch to the Bash tab and launch the application in the database update mode.

   dotnet ~/site/wwwroot/MainDemo.Blazor.Server.dll --updateDatabase --force --silent
   

4. Ensure that the application runs correctly in your default browser.

   

Important Disclaimer

These deployment recommendations do not apply to all possible configurations and should not be considered comprehensive. We offer these instructions as a getting-started reference. Steps may vary depending on your operating system, installed software, and DevExpress versions. You, the developer, are responsible for the application, database, network, and other configurations based on your client, security, environment, and other requirements. We recommend that you review these settings with your database, network, and IT infrastructure administrators and consider their recommendations tailored to your case. We also recommend that you review Performance Optimization tips for deployed applications.

Troubleshooting

If you encounter problems, refer to the Deployment Troubleshooting Guide or review application logs.

Additional Resources

Refer to the Microsoft documentation for more information about deploying ASP.NET Core and Blazor applications:

• Deploy ASP.NET Core apps to Azure App Service
• Host and deploy server-side Blazor apps