Edit

Share via

Create a MongoDB app with React and Azure Cosmos DB

  • Applies to: ✅ MongoDB

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: v14.x or later (LTS recommended). Verify with node --version.
  • HTTP testing tool: Insomnia, curl, Visual Studio, or PowerShell Invoke-RestMethod. Verify availability by running the tool once (for example, curl --version).

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.
Success check: You understand the overall app architecture (React UI, Node/Express API, Azure Cosmos DB for MongoDB).

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.
Success check: The project runs locally without errors using npm start (or the equivalent start script).

Build the UI

This video shows how to create the application's user interface (UI) with React.
Success check: The React UI renders in the browser and displays the hero list layout.

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.

Example: connect with Mongoose

const mongoose = require("mongoose");

mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.on("connected", () => {
  console.log("Connected to Azure Cosmos DB for MongoDB");
});

Verification: Start the app and confirm that the console logs Connected to Azure Cosmos DB for MongoDB.

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.
Success check: Creating a hero returns HTTP 201 (or 200) and the new hero appears in the UI list.

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.
Success check: Updates and deletions are immediately reflected in the UI and persisted in the database.

Complete the app

This video shows how to complete the app and finish hooking the UI up to the backend API.
Success check: The full create, read, update, and delete workflow works end to end.

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.

  • Last updated on