hands-on lab

Interacting with Azure Cosmos DB from NextJS Web App using Application Settings

Difficulty: Intermediate
Duration: Up to 1 hour
Students: 35
Rating: 5/5
Get guided in a real environmentPractice with a step-by-step scenario in a real, provisioned environment.
Learn and validateUse validations to check your solutions every step of the way.
See resultsTrack your knowledge and monitor your progress.

Description

Azure App Service Web Apps (Web Apps) are the instances of your websites, API, or mobile backend hosted in Azure App Service. Each Web App is deployed into an App Service plan that can handle one or multiple applications. Web Apps are also DevOps-ready and can be deployed using a variety of continuous deployment tools.

The software development process often uses local variables when developing the application. However, during deployment, the need for environment variables is fulfilled by Application Settings in App Service. You can store the secrets and plaintext information for the application to use during the runtime without hardcoding the information.

In this hands-on lab, you will discover how to connect Azure Web App to a CosmosDB Account by leveraging application settings to pass the information as an environment variable. You will use a sample NextJS application running on a Windows app service.

Learning Objectives

Upon completion of this intermediate-level lab, you will be able to:

  • Create CosmosDB Accounts
  • Troubleshoot NextJS on Azure App Service common issues
  • Use Log Streams to read application logs
  • Add Application Settings to web app settings

Intended Audience

  • Candidates for the Azure Administrator Exam (AZ-104)
  • Cloud Architects
  • Data Engineers
  • DevOps Engineers
  • Software Engineers

Prerequisites

Familiarity with the following will be beneficial but is not required:

  • Azure App Service
  • Azure CosmosDB

The following content can be used to fulfill the prerequisite:

Environment before

Environment after

Covered topics

Lab steps

Logging in to the Microsoft Azure Portal
Creating an Azure CosmosDB Account for the Web App Connection
Troubleshooting and Fixing NextJS Web App Application Error
Adding Application Settings for CosmosDB Connection on Azure Web App