search

Azure-Samples / dab-azure-cosmos-db-nosql-quickstart

Quickstart application template for Data API builder and Azure Cosmos DB for NoSQL
MIT License
1 stars 1 forks source link

readme

Quickstart: Data API builder and Azure Cosmos DB for NoSQL

This is a Blazor web application that illustrates using Data API builder with Azure Cosmos DB for NoSQL. This sample application uses a Blazor WebAssembly front-end to access an Azure Cosmos DB for NoSQL 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:

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.

  1. Log in to azd. Only required once per-install.

    azd auth login

  2. Run the first-time project setup. Initialize a project in the current directory, using this template.

    azd init --template dab-azure-cosmos-db-nosql-quickstart

    [!NOTE] Omit the --template argument if you are running in a development container.

  3. Provision the resources in Azure and deploy the application code.

    azd up

  4. Navigate to the Azure Static Web App resource in the Azure portal.

  5. Configure the static web app to add a Database Connection to the Azure Cosmos DB for NoSQL. Ensure you use the built-in user-assigned managed identity.

    Screenshot of the database connection page for a static web app in the Azure portal.

    [!TIP] This template will be updated in the future to automate this step in the deployment.

  6. Browse to the running web application.

    Screenshot of the running web application on Azure Static Web Apps.

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:

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-cosmos-db-nosql[Azure Cosmos DB for NoSQL]
        subgraph database-adventureworkslt[Database: CosmicWorks]
            subgraph container-product[Container: Products]
            end
        end
    end
    web-app --> azure-cosmos-db-nosql
    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.