title | description | author | ms.author | ms.service | ms.topic | ms.date |
---|---|---|---|---|---|---|
Tutorial: Access data in Cosmos DB using Mongoose with Azure Static Web Apps |
Learn to access data in Cosmos DB using Mongoose from an Azure Static Web Apps API function. |
GeekTrainer |
chrhar |
static-web-apps |
tutorial |
01/25/2021 |
Mongoose is the most popular ODM (Object Document Mapping) client for Node.js. Allowing you to design a data structure and enforce validation, Mongoose provides all the tooling necessary to interact with databases that support the MongoDB API. Cosmos DB supports the necessary MongoDB APIs and is available as a back-end server option on Azure.
In this tutorial, you learn how to:
[!div class="checklist"]
- Create a Cosmos DB serverless account
- Create Azure Static Web Apps
- Update application settings to store the connection string
If you don’t have an Azure subscription, create a free trial account.
Sign in to the Azure portal.
Begin by creating a Cosmos DB serverless account. By using a serverless account, you only pay for the resources as they are used and avoid needing to create a full infrastructure.
- Navigate to https://portal.azure.com
- Select Create a resource
- Enter Azure Cosmos DB in the search box
- Select Azure Cosmos DB
- Select Create
- If prompted, under Azure Cosmos DB API for MongoDB select Create
- Configure your Azure Cosmos DB Account with the following information
- Subscription: Choose the subscription you wish to use
- Resource: Select Create new, and set the name to aswa-mongoose
- Account name: A unique value is required
- Location: West US 2
- Capacity mode: Serverless (preview)
- Version: 4.0 :::image type="content" source="media/add-mongoose/cosmos-db.png" alt-text="Create new Cosmos DB instance":::
- Select Review + create
- Select Create
The creation process will take a few minutes. Later steps will return to the database to gather the connection string.
This tutorial uses a GitHub template repository to help you create your application.
- Navigate to the starter template
- Choose the owner (if using an organization other than your main account)
- Name your repository aswa-mongoose-tutorial
- Select Create repository from template
- Return to the Azure portal
- Select Create a resource
- Type static web app in the search box
- Select Static Web App
- Select Create
- Configure your Azure Static Web App with the following information
- Subscription: Choose the same subscription as before
- Resource group: Select aswa-mongoose
- Name: aswa-mongoose-tutorial
- Region: West US 2
- Select Sign in with GitHub
- Select Authorize if prompted to allow Azure Static Web Apps to create the GitHub Action to enable deployment
- Organization: Your GitHub account name
- Repository: aswa-mongoose-tutorial
- Branch: main
- Build presets: Choose React
- App location: /
- Api location: api
- Output location: build :::image type="content" source="media/add-mongoose/azure-static-web-apps.png" alt-text="Completed Azure Static Web Apps form":::
- Select Review and create
- Select Create
- The creation process takes a few moments; select Go to resource once the static web app is provisioned
In order to allow the web app to communicate with the database, the database connection string is stored as an Application Setting. Setting values are accessible in Node.js using the process.env
object.
- Select Home in the upper left corner of the Azure portal (or navigate back to https://portal.azure.com)
- Select Resource groups
- Select aswa-mongoose
- Select the name of your database account - it will have a type of Azure Cosmos DB API for Mongo DB
- Under Settings select Connection String
- Copy the connection string listed under PRIMARY CONNECTION STRING
- In the breadcrumbs, select aswa-mongoose
- Select aswa-mongoose-tutorial to return to the website instance
- Under Settings select Configuration
- Select Add and create a new Application Setting with the following values
- Name: AZURE_COSMOS_CONNECTION_STRING
- Value: <Paste the connection string you copied earlier>
- Select OK
- Select Add and create a new Application Setting with the following values for name of the database
- Name: AZURE_COSMOS_DATABASE_NAME
- Value: todo
- Select Save
You can now explore the static web app.
- Select Overview
- Select the URL displayed in the upper right
- It will look similar to
https://calm-pond-05fcdb.azurestaticapps.net
- It will look similar to
- Select Please login to see your list of tasks
- Select Grant consent to access the application
- Create a new lists by typing a name into the textbox labeled create new list and selecting Save
- Create a new task by typing in a title in the textbox labeled create new item and selecting Save
- Confirm the task is displayed (it may take a moment)
- Mark the task as complete by selecting the check; the task will be moved to the Done items section of the page
- Refresh the page to confirm a database is being used
If you're not going to continue to use this application, delete the resource group with the following steps:
- Return to the Azure portal
- Select Resource groups
- Select aswa-mongoose
- Select Delete resource group
- Type aswa-mongoose into the textbox
- Select Delete
Advance to the next article to learn how to configure local development...
[!div class="nextstepaction"] Setup local development