| title | description | services | documentationcenter | author | manager | editor | ms.assetid | ms.service | ms.workload | ms.tgt_pltfrm | ms.devlang | ms.topic | ms.date | ms.author | ms.custom |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MongoDB, React, and Node.js tutorial for Azure | Microsoft Docs |
Learn how to create a MongoDB app with React and Node.js on Azure Cosmos DB using the exact same APIs you use for MongoDB with this video based tutorial series. |
cosmos-db |
mimig1 |
jhubbard |
cosmos-db |
na |
nodejs |
hero-article |
09/05/2017 |
mimig |
mvc |
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 with the MongoDB API, 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 MongoDB client connections, so you can use Azure Cosmos DB in place of MongoDB, but use the same code that you use for MongoDB apps; but with added benefits such as simple cloud deployment, scaling, and super-fast reads and writes.
This multi-part tutorial covers the following tasks:
[!div class="checklist"]
- 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.
Get the completed application from GitHub.
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.
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.
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.
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.
This video shows how to read heroes and create heroes in the Cosmos DB database, as well as how to test those methods using Postman and the React UI.
This video shows how to delete and update heroes from the app and display the updates in the UI.
This video shows how to complete the app and finish hooking the UI up to the backend API.
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.
- From the left-hand menu in the Azure portal, click Resource groups and then click the name of the resource you created.
- On your resource group page, click Delete, type the name of the resource to delete in the text box, and then click Delete.
In this tutorial, you've learned how to:
[!div class="checklist"]
- 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 Postman
- Run the application and add heroes to the database
Check back for an additional video in this tutorial series that will cover deploying the application and globally replicating your data.
You can proceed to the next tutorial and learn how to import MongoDB data into Azure Cosmos DB.
[!div class="nextstepaction"] Import MongoDB data into Azure Cosmos DB