Edit

Share via

Quickstart: Use Data API builder with Azure Cosmos DB for NoSQL and Azure Static Web Apps

  • Article

In this Quickstart, you deploy an Azure Developer CLI (AZD) template. The template deploys an Azure Static Web App that hosts the Data API builder using it's database connections feature. The template also includes a sample application that you can use as a starting point for your solutions.

Prerequisites

Tip

Alternatively, open this Quickstart in GitHub Codespaces with all developer prerequisites already installed. Simply bring your own Azure subscription. GitHub accounts include an entitlement of storage and core hours at no cost. For more information, see included storage and core hours for GitHub accounts.

Open in GitHub Codespaces

Deploy the template

First, deploy all of the required services using the AZD template.

  1. Open a terminal in the root directory of the project.

  2. Authenticate to the Azure Developer CLI using azd auth login. Follow the steps specified by the tool to authenticate to the CLI using your preferred Azure credentials.

    azd auth login

  3. Use azd init to initialize the project.

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

    Important

    If you are running in GitHub Codespaces, you can safely omit the --template argument since the code has already been cloned to your environment.

  4. During initialization, configure a unique environment name.

    Tip

    The environment name will also be used as the target resource group name. For this quickstart, consider using msdocs-swa-dab.

  5. Deploy the Azure Static Web Apps solution using azd up. The Bicep templates deploy an Azure Cosmos DB for NoSQL account along with the supporting storage, identity, and host services. A sample web application is deployed to the web host.

    azd up

  6. During the provisioning process, select your subscription and desired location. Wait for the provisioning process to complete. The process can take approximately five minutes.

  7. Once the provisioning of your Azure resources is done, the template outputs a SUCCESS message along with the duration of the run.

    SUCCESS: Your application was provisioned and deployed to Azure in 5 minutes 0 seconds.

Configure the database connection

Now, use the database connections feature of Azure Static Web Apps to create a connection between the deployed static web app and the deployed database. This feature uses Data API builder seamlessly to create a connection to a running Azure Cosmos DB for NoSQL account using the credentials you specify.

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

  2. Configure the static web app to add a Database Connection to the Azure Cosmos DB for NoSQL account using these settings. Then, select Link.

    Value
    Database type Azure Cosmos DB for NoSQL
    Subscription Select the subscription you used for the AZD deployment
    Resource group Select the resource group (environment) you used for the AZD deployment
    Resource name Select the only Azure Cosmos DB for NoSQL resource with a prefix of nosql-*
    Database name cosmicworks
    Authentication type User-assigned managed identity
    User-assigned managed identity *Select the only managed identity resource with a prefix of ua-id-*

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

  3. Now, select the Browse option on the resource page to observe running web application.

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

Clean up

When you no longer need the sample application or resources, remove the corresponding deployment and all resources.

  1. Remove the deployment from your Azure subscription.

    azd down

  2. Delete the running codespace to maximize your storage and core entitlements if you're using GitHub Codespaces.

Next step

GraphQL endpoints