Post
Ask Question

Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL

Introduction

 
In this article we will focus on deploying our Blazor WASM .NET Core 3.1 hosted application to Azure App Service. We will be using Azure SQL to store user data..
 
By the end of the article we will have a fully functional Blazor site running in Azure Cloud.
 
Prerequisites
 
This article assumes you have a basic working knowledge of Blazor web assembly, NET Core and Azure.
 
Microsft Account is required to log into Azure portal and use any Azure Services. 
 
Read my previous articles on creating a fully functional Blazor WASM app 
Through this article, we will cover the following topics,
  • Creating Azure Resource Group and App service 
  • Creating Azure SQL database with SQL Auth and Employee table
  • Configure our project to use Azure SQL and deploy our application to Azure Sql.

Implementation

 
This project requires VS 2019 to be installed on your machine.
 
Step 1 - Creating Microsoft online account
 
Use this link to create a free Microsoft account.
 
The account creation will  require you to provide your credit/debit card details for validation. The first month of the Azure Subscription is free and you will not be automatically charged unless you upgrade your account manually.
 
Once the account is created succesfully we can log into Azure Portal using this link.
 
Home screen will display all recently used Azure resources.
 
Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL
 
Step 2 - Creating Azure Resource Group and App service
 
Click on Resource Group on Home screen and it will redirect us to resource pool home screen.
 
Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL
 
This will display a list of all existing Resource Groups. To Add a new Resource Group click on Add
 
Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL
 
Now that we have created a Resource Group our next step is to create App Service to deploy our application.
 
Click on App Services on Home screen and we will see a list of all active app services running under your account.
 
Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL
 
Click on Add to create a new App Service.
 
Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL
 
Select the Resource Group which we have created in the previous step.
 
Specify your site name which is also the site URL.
 
Publish option should be code as we are not using container for this article.
 
The Runtime Stack is .NET Core 3.1 
 
Click on create and our App service is now ready and running.
 
Step 3 -Create and Configure Azure SQL database 
 
Under SQL database on home screen click on create new SQL database.
 

 

Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL

 

Select resource Group created in step 1 and create new server instance if we dont have an existing one.
 
Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL
 
We have our SQL database created in Azure. On our local machine using SQL Mnagement connect to Azure SQL server by specfying sql username and password. You will see your Azure SQL Database
 
Create a new Employee table with the below script. 
  1. /****** Object: Table [dbo].[Employee] Script Date: 20-08-2020 12:21:38 ******/  
  2. SET ANSI_NULLS ON  
  3. GO  
  4. SET QUOTED_IDENTIFIER ON  
  5. GO  
  6. CREATE TABLE [dbo].[Employee](  
  7. [EmployeeId] [int] IDENTITY(1,1) NOT NULL,  
  8. [FirstName] [varchar](256) NULL,  
  9. [LastName] [varchar](256) NULL,  
  10. [Email] [varchar](256) NULL,  
  11. [Street] [varchar](256) NULL,  
  12. [Zip] [varchar](256) NULL,  
  13. [City] [varchar](256) NULL,  
  14. [PhoneNumber] [varchar](256) NULL,  
  15. [Comment] [varchar](256) NULL  
  16. ) ON [PRIMARY]  
  17. GO  

In appsettings.Json of Server specify SQL connection configuration,

  1. {  
  2.     "ConnectionStrings": {  
  3.         "DefaultConnection": "Server=hrmsemployee.database.windows.net;Database=Hrms;user=password;password=password;MultipleActiveResultSets=true;"  
  4.     },  
  5.     "Logging": {  
  6.         "LogLevel": {  
  7.             "Default": "Information",  
  8.             "Microsoft": "Warning",  
  9.             "Microsoft.Hosting.Lifetime": "Information"  
  10.         }  
  11.     },  
  12.     "AllowedHosts": "*"  
  13. }  
Step 4 -Deploy code to Azure App Service 
 
Open Project in VS 2019 right click EmployeePortal.Server project and click publish.
 
Deploying Blazor WASM .NET Core 3.1 Hosted To Azure Cloud (Paas) Model Connected To Azure SQL
 
Select Azure App service and validate publish profile and click on publish.
 
This will publish your Blazor WASM site to Azure App service.
 
Once publishing is compelete you can now access your site using URL specified in step 3.
 
Navigate to Azure Portal and check your App pool and we can see application logs and app utilization.
 
We can configure Azure CI/CD pipeline to autmoated deployments to Azure app service from Azure/GIT Hub repos.
 
This article will only focus on publishing code through VS. 
 

Summary

 
Through this article we have learned how to create Azure App service and Azure SQL database and also deploy our existing Blazor WASM to Azure Cloud.
 
In our next article we will deploy our Blazor application to Linux containers deployed on Azure Kubernetes services.
 
Thanks a lot for reading. I hope you liked this article. Please share your valuable suggestions and feedback. Write in the comment box in case you have any questions. Have a good day!


Similar Articles