Developing Web App using React Cosmos DB - Create Project and Install Dependencies

Screenshot from the tutorial

Developing a Web App Using React and Cosmos DB: A Step-by-Step Guide

In today’s tutorial, we will embark on a journey to develop a web application using React and Azure Cosmos DB. This guide will walk you through the initial steps of creating a project and installing the necessary dependencies. Whether you are a beginner or an experienced developer, this tutorial is designed to help you set up your development environment in just a few minutes.

Prerequisites

Before diving into the project setup, ensure that you have the following prerequisites:

• Node.js and npm: Node.js is a JavaScript runtime environment that allows you to execute JavaScript code server-side. npm (Node Package Manager) comes installed with Node.js and is essential for managing project dependencies.
• Code Editor: A code editor like Visual Studio Code (VS Code) will help you write and manage your code efficiently.
• Azure Account: Sign up for an Azure account if you don’t have one already; you’ll need it to create a Cosmos DB instance.

Step 1: Setting Up Your React Application

To get started, we need to create a new React application. We will use Create React App, a comfortable environment for building React applications.

Open a terminal and run the following command:

npx create-react-app my-web-app

Replace my-web-app with your desired project name. This command will create a new directory containing all the necessary files and folders for your React application.

Step 2: Navigating to Your Project Directory

Once the application has been created, navigate to your newly created project directory:

cd my-web-app

From here, you can start the development server to see your application running:

npm start

This will open your default web browser and display your React app at http://localhost:3000.

Step 3: Installing Dependencies

To connect your React application to Azure Cosmos DB, you will need to install the required dependencies. The primary libraries we will use include:

• @azure/cosmos: This is the official Azure Cosmos DB SDK for JavaScript, which allows your application to interact with Azure Cosmos DB.

Run the following command in your terminal to install this dependency:

npm install @azure/cosmos

Step 4: Setting Up Azure Cosmos DB

1. Log into Azure Portal: Go to the Azure Portal and log in with your credentials.

2. Create a Cosmos DB Account:

   • Click on "Create a resource" in the left sidebar.
   • Search for “Azure Cosmos DB” and select it.
   • Click on "Create."

3. Configure Your Cosmos DB:

   • Choose the API you want to use (SQL API is recommended for this tutorial).
   • Fill in the required fields such as Subscription, Resource Group, and Account Name.
   • Click on "Review + create" and then "Create" to provision your Cosmos DB account.

4. Get Connection String: Once your Cosmos DB account is created, navigate to the “Keys” section in your Cosmos DB account settings. Here, you will find your connection string, which will be crucial for connecting your application to the database.

Step 5: Connecting Your React App to Cosmos DB

In your React application, create a new file named cosmosClient.js in the src directory. This file will contain the logic to connect to your Cosmos DB instance.

// src/cosmosClient.js

const { CosmosClient } = require("@azure/cosmos");

const endpoint = "<Your-Cosmos-DB-Endpoint>";
const key = "<Your-Cosmos-DB-Key>";
const client = new CosmosClient({ endpoint, key });

module.exports = client;

Make sure to replace <Your-Cosmos-DB-Endpoint> and <Your-Cosmos-DB-Key> with the respective values from your Azure portal.

Conclusion

Congratulations! You have successfully set up a React application and connected it to Azure Cosmos DB. In the next stages of development, you will be able to perform CRUD operations on your database, enabling your web application to store and retrieve data dynamically.

In this tutorial, we've covered the foundational steps of creating a React app, installing dependencies, and setting up Cosmos DB. With this knowledge, you are now poised to delve deeper into developing a full-fledged web application.

Stay tuned for future posts where we will explore the next steps of building out the functionality of your application! Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios