Live Chat Icon For mobile
Live Chat Icon

How do I deploy a Blazor WebAssembly application to Azure App Service

Platform: Blazor| Category : Host and deploy, WebAssembly

Follow the steps below to deploy a Blazor WebAssembly application to Azure App Service.

  1. Prerequisites:

    • .NET Core 3.1/.NET 5.0

    • Visual Studio 2019 or a more current version, which should include Azure and ASP.NET as well as web development workloads.

    • Azure App Service account.

  2. Create a Blazor WebAssemby Application

    To create a blazor WebAssembly Application using the following steps

    1. Open Visual Studio 2019 and create a new project.

      Create a Blazor WebAssemby Application -1

    2. Once Blazor App is selected, click Next button to configure the project name and location.

    3. Save the application, and then click Create button.

    4. Select Blazor WebAssembly App and click Create button to complete the application creation.

      Create a Blazor WebAssemby Application

  3. Deploying to Azure App Service

    To Deploying the Azure App Service using the following steps.

    1. If you don’t have a login for Azure, sign up to access the Azure portal.

    2. Click Create a resource in Azure to create a resource group.

      Deploying to Azure App Service 2

    3. Select the Web App Azure application service.

      Deploying to Azure App Service 3

    4. Once Web App is selected, select the following options:

      • Select Free Trial as the subscription.

      • Create a resource group name, such as “Blazor.”

      • Update the Instance Details:

        1. Name: blazor-publish. The application hosted will be available in this URL: blazor-publish.azurewebsites.net.

        2. Select the Code radio button for Publish.

        3. Choose the .NET Core 3.1 LTS runtime stack and Windows operating system.

        4. Select the region in which to publish the app. Central US was chosen for this demo.

      • The app service plan with the Free F1 option will be selected by default, but this can be modified.

      • Once this is done, click Review + create.
        Deploying to Azure App Service 4

    5. After configuring the Web App service, get the publish profile for the Web App service to host the Blazor WebAssembly application. Select the created web app service (blazor-publish).

      Deploying to Azure App Service 5

    6. Navigate to the overview section, click on Get publish profile, and save the profile locally.

      Deploying to Azure App Service 6

  4. Publish a Blazor WebAssembly application in Azure

    • Using import-profile option

      To using import-profile option using the following steps.

      1. Right-click the project and click Publish in the context menu.

        Using-import-profile-option

      2. Choose Import Profile and click Next. Then, locate the downloaded publish profile for the web app service.

        Using import-profile option

      3. Finally, publish the application by clicking Publish. The application will be deployed and will be available in the URL https://blazor-publish.azurewebsites.net/.

        Using-import-profile-option-3

    • Using Azure account login

      To using Azure account login using the following steps.

      1. In Visual Studio 2019, right-click on the project and click Publish in the context menu.
        Using Azure account login 1

      2. Select Azure as the target.
        Using-Azure-account-login-2

      3. Select Azure App Service (Windows) as the specific target.
        Using Azure account login 3

      4. You need to log in to your Azure account and choose the web app service.
        Using-Azure-account-login-4

      5. Now click Publish to deploy the application.
        Using-Azure-account-login-5

      6. Now, the application will be deployed and will be available in the following URL. https://blazor-publish.azurewebsites.net/

Refer to “Publish an ASP.NET Core app to Azure with Visual Studio” for more details.

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.