Data API builder and Azure SQL database quickstart
This is a Blazor web application that illustrates using Data API builder with Azure SQL. This sample application uses a Blazor WebAssembly front-end to access an Azure SQL database using the Data API builder, and business logic using Azure Functions. This quickstart makes use of the Database connections feature of Azure Static Web Apps.
This template illustrates these practices:
- Using a user-assigned managed identity to connect hosting and database services
- Using the managed identity to connect the Azure Functions app to the Azure Storage service
- Using the same managed identity to connect the Azure Static Web Apps to an Azure SQL server
- Assigning the managed identity as the admin for the Azure SQL server
- Deploying Azure Functions and Azure Static Web App seperately
- Linking the deployed function app to the static web app
- Deploying the AdventureWorksLT sample database to Azure SQL database
- Disabling local and key-based authentication to Azure SQL database and Azure Storage
Prerequisites
This template will create infrastructure and deploy code to Azure. If you don't have an Azure Subscription, you can sign up for a free account here. Make sure you have the contributor role in the Azure subscription.
The following prerequisites are required to use this application. Please ensure that you have them all installed locally.
Get started
Follow these steps to authenticate to Azure, initialize thetemplate, provision infrastructure in Azure, and deploy the code to Azure.
Log in to azd. Only required once per-install.
azd auth login
Run the first-time project setup. Initialize a project in the current directory, using this template.
azd init --template dab-azure-sql-quickstart
Note
Omit the --template argument if you are running in a development container.
Provision the resources in Azure and deploy the application code.
azd up
Navigate to the Azure Static Web App resource in the Azure portal.
Configure the static web app to add a Database Connection to the Azure SQL database. Ensure you use the built-in user-assigned managed identity.
Tip
This template will be updated in the future to automate this step in the deployment.
Browse to the running web application.
Configuration
In the application's code, open the src/web/swa-db-connections/staticwebapp.database.config.json configuration file. This file includes the configuration for the Data API builder client in Azure Static Web Apps:
{
"$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
"data-source": {
"database-type": "mssql",
"options": { "set-session-context": false },
"connection-string": "@env('SQL_CONNECTION_STRING')"
},
"runtime": {
"host": { "authentication": { "provider": "StaticWebApps" } }
},
"entities": {
"product": {
"source": "SalesLT.Product",
"permissions": [ { "actions": [ "read" ], "role": "anonymous" } ]
}
}
}
Application Architecture
This application utilizes the following Azure resources:
- Azure Static Web Apps
- This service hosts the ASP.NET Blazor WebAssembly web application
- The data API is powered by Data API builder
- Azure Functions
- This service hosts the .NET business logic API
- Azure SQL
- This service stores the SQL data
- Azure Storage
- This services stores the Azure Functions metadata
Here's a high level architecture diagram that illustrates these components. Notice that these are all contained within a single resource group, that will be created for you when you create the resources.
%%{ init: { 'theme': 'base', 'themeVariables': { 'background': '#243A5E', 'primaryColor': '#50E6FF', 'primaryBorderColor': '#243A5E', 'tertiaryBorderColor': '#50E6FF', 'tertiaryColor': '#243A5E', 'fontFamily': 'Segoe UI', 'lineColor': '#FFFFFF', 'primaryTextColor': '#243A5E', 'tertiaryTextColor': '#FFFFFF' } }}%%
flowchart TB
subgraph web-app[Azure Static Web Apps]
app-framework([.NET 8 - Blazor WASM])
end
subgraph azure-func[Azure Functions]
func-framework([.NET 8 - Isolated])
end
subgraph azure-sql[Azure SQL]
subgraph database-adventureworkslt[Database: AdventureWorksLT]
subgraph table-product[Table: SalesLT.Product]
end
end
end
web-app --> azure-sql
web-app --> azure-func
Cost of provisioning and deploying this template
This template provisions resources to an Azure subscription that you will select upon provisioning them. Refer to the Pricing calculator for Microsoft Azure to estimate the cost you might incur when this template is running on Azure and, if needed, update the included Azure resource definitions found in infra/main.bicep
to suit your needs.
Tooling
This template is structured using the Azure Developer CLI. You can learn more about azd
architecture in the official documentation.
Next steps
At this point, you have a complete application deployed on Azure. But there is much more that the Azure Developer CLI can do. These next steps will introduce you to additional commands that will make creating applications on Azure much easier. Using the Azure Developer CLI, you can setup your pipelines, monitor your application, test and debug locally.
azd pipeline config
- to configure a CI/CD pipeline (using GitHub Actions or Azure DevOps) to deploy your application whenever code is pushed to the main branch.azd down
- to delete all the Azure resources created with this template