This article is part of series by Ondrej Polesny and myself. To catch-up, check out the previous articles.
You've created an amazing, interactive web application using the latest feature of ASP.NET, Blazor, but now what? How do you get it out there to show the world all your hard work? Where do you host it? How do you get it there?
In this article, we'll show you how to deploy your Blazor application to Microsoft's cloud computing service, Azure. We'll also be using Visual Studio 2019 to publish/deploy the application. Visual Studio provides the ability to deploy your application to a folder, IIS, Azure, or other destinations, within the integrated development environment (IDE) reducing the steps it takes to get your application in front of your audience.
Setting up the environment
Before we can deploy our application, we need to create and configure the environment to hold and serve the application. We'll be using services that fall under the free tier account usage within Azure. To see a list of everything available on the free tier account, go here.
Creating a web application in Azure
Log in to the Azure portal.
While in the portal, click on the "+" symbol on the menu on the left.
In the Marketplace, search for "Web App",
and click "Create".
On the "Basics" tab, ensure the subscription you wish to use is selected. We'll create a new resource group to contain our app service. A resource group is a collection of resources that share the same lifecycle, permissions and policies. Then provide an instance name for our application.
Scroll down the page, changing "Operating System" to "Windows" and "Runtime Stack"to ."NET Core 3.0 (Current)". While .NET Core 3.1 (LTS) was released on December 3, 2019, at the time of this writing, web applications running under Windows on Azure do not currently support the latest version of .NET Core out of the box. Fear not, we can still run the latest version of .NET Core with a little extra configuration. We'll configure this later on in the article.
Leave the remaining options set to their defaults.
Note: .NET Core 3.1 (LTS) is available out of the box for Linux operating systems on Azure.
Now click "Review + create"
Validate all the options are correct and click "Create". This kicks off the automation process within Azure which creates the web app environment within the selected regional datacenter. This process may take a few minutes depending on the current load within the datacenter.
Once the deployment is complete, click on "Go to resource" to navigate to the newly created resource.
Configuring .NET Core 3.1 (LTS) Support
With our web application created, we can now configure support for .NET Core 3.1 (LTS). While in the web application, navigate to the "Extensions" tab and click "Add" to open the add extension window.
Click on "Choose Extension" and select "ASP.NET Core 3.1 (x64) Runtime".
Click on "Legal Terms" and click "OK" to accept the terms.
Now click on "OK" under the "Add Extension" window.
With the extension now added to our web application, we can run applications requiring .NET Core 3.1 without having to wait for Azure to support it. This same process can also be used when wanting to test new features only available within preview versions of .NET Core, like Blazor Web Assembly.
We have 1 more step to complete before we can publish our Blazor application to Azure: update the configuration to x64. We must do this because we installed the x64 extension for .NET Core 3.1.
Navigate to "Configuration" in the left menu, select the "General" tab and update the "Platform" to "64 bit".
Deploying the Blazor application
With our Azure environment created and configure, we're now ready to deploy the Blazor application to it. The application we're deploying can be downloaded/cloned from here. We'll also grab one other file from our Azure web application service, the publish profile.
Navigate to "Overview" on the left hand menu and click "Get publish profile".
The publish profile contains all the information Visual Studio needs (FTP location, credentials) to deploy our application to Azure.
Now, open the Blazor application cloned in the previous step in Visual Studio 2019. Right-click the project "awesome-blazor-app" and click "Publish".
Click "Import Profile..." and navigate to the location where you downloaded the publish profile from Azure a couple of steps ago. Select settings file and click import.
With the publish profile imported, click on "Publish". This kicks off the Visual Studio publish process, which will build the application in release mode and upon a successful build, will FTP the files to the Azure web application service we created earlier and launch our site in your default browser.
Summary
In this article, we learned how to create a web application environment within Azure to support a Blazor application and how to publish a Blazor application from Visual Studio to our Azure web application environment. We also learned how to use extensions in Azure to extend support for .NET Core 3.1 (LTS) to our web application. This is great, but it's not very maintainable, especially in a team environment. We'll fix this in an upcoming article where we automate the entire build and release process, removing bottlenecks and deployment silos.
- #1 What is this Blazor everyone's talking about?
- #2 How to Build an Interactive SPA with Blazor
- #3 Extending Interactive Blazor Site with Spatial Functions
- #4 Deploying your Blazor application to Azure
- #5 Automating the build and deploy of your Blazor application to Azure
Top comments (0)