Edit

Share via

Create a MongoDB app with React and Azure Cosmos DB

  • Article

APPLIES TO: MongoDB

This multi-part video tutorial demonstrates how to create a hero tracking app with a React front-end. The app used Node and Express for the server, connects to Azure Cosmos DB database configured with the Azure Cosmos DB's API for MongoDB, and then connects the React front-end to the server portion of the app. The tutorial also demonstrates how to do point-and-click scaling of Azure Cosmos DB in the Azure portal and how to deploy the app to the internet so everyone can track their favorite heroes.

Azure Cosmos DB supports wire protocol compatibility with MongoDB, enabling clients to use Azure Cosmos DB in place of MongoDB.

This multi-part tutorial covers the following tasks:

  • Introduction
  • Setup the project
  • Build the UI with React
  • Create an Azure Cosmos DB account using the Azure portal
  • Use Mongoose to connect to Azure Cosmos DB
  • Add React, Create, Update, and Delete operations to the app

Want to do build this same app with Angular? See the Angular tutorial video series.

Prerequisites

  • Node.js
  • An HTTP testing tool
    • We recommend Insomnia, curl, Visual Studio, or Invoke-RestMethod

Finished Project

Get the completed application from GitHub.

Introduction

In this video, Burke Holland gives an introduction to Azure Cosmos DB and walks you through the app that is created in this video series.

Project setup

This video shows how set up the Express and React in the same project. Burke then provides a walkthrough of the code in the project.

Build the UI

This video shows how to create the application's user interface (UI) with React.

Note

The CSS referenced in this video can be found in the react-cosmosdb GitHub repo.

Connect to Azure Cosmos DB

This video shows how to create an Azure Cosmos DB account in the Azure portal, install the MongoDB and Mongoose packages, and then connect the app to the newly created account using the Azure Cosmos DB connection string.

Read and create heroes in the app

This video shows how to read heroes and create heroes in the Azure Cosmos DB database, as well as how to test those methods using a HTTP testing utility and the React UI.

Delete and update heroes in the app

This video shows how to delete and update heroes from the app and display the updates in the UI.

Complete the app

This video shows how to complete the app and finish hooking the UI up to the backend API.

Clean up resources

If you're not going to continue to use this app, use the following steps to delete all resources created by this tutorial in the Azure portal.

  1. From the left-hand menu in the Azure portal, click Resource groups and then click the name of the resource you created.
  2. On your resource group page, click Delete, type the name of the resource to delete in the text box, and then click Delete.

Next steps

In this tutorial, you've learned how to:

  • Create an app with React, Node, Express, and Azure Cosmos DB
  • Create an Azure Cosmos DB account
  • Connect the app to the Azure Cosmos DB account
  • Test the app using an HTTP testing utility
  • Run the application and add heroes to the database

You can proceed to the next tutorial and learn how to import MongoDB data into Azure Cosmos DB.

Import MongoDB data into Azure Cosmos DB

Trying to do capacity planning for a migration to Azure Cosmos DB? You can use information about your existing database cluster for capacity planning.