Cosmos DB for PostgreSQL and React

Introduction

I’m so excited to ‘introduce’ you to a new addition to Azure Cosmos DB service. At Ignite 2022, Microsoft made an announcement for PostgreSQL in CosmosDB!

In this blog we will show you how to connect your Front end app to the Cosmos DB for PostgreSQL service in Azure.

This is the beginning of a larger series so not all the features you see on the app are complete. We will walk this journey together as we add more production level of deployment into the repo. (Aka. Key-Vault for secrets, Managed Identity and Infrastructure As Code. :))

What is Cosmos DB for PostgreSQL?

Cosmos DB - is a fast, distributed NoSQL database. Scalable with 99.999% availability! (Get started)

PostgreSQL - Here are some reasons why you might want to use PostgreSQL –

• Free and Open-Source
• Runs on wide range of Operating Systems (But this could be a moot point CosmosDb for PostgreSQL will be hosted on the cloud)
• Many data types (eg. Boolean, range)
• More info here

Cosmos DB for PostgreSQL has combined these two technologies and extended with Citus extension to bring distributed tables for PostgreSQL. Combining Cosmos DB’s high scalability and Citus’s distributed tables allows for maximum performance with PostgreSQL. 

• Checkout this Devblog post to that goes more into details

Let’s Get Started!

Azure

Let's go to the Azure Portal and click ‘+ Create a resource’. Then search for ‘Cosmos DB’

Once you select Cosmos DB you will see these options:

Select ‘Cosmos DB for PostgreSQL’

Choose your ‘Cluster name’ and ‘Password’. (You will use these values in the next step.)

Code

Go and clone/fork this repo: GitHub - i-am-dan/CosmosDb-PostgreSQL-Quickstart - Repo contains both the front-end and the back-end.

Once you clone the repo, go to ‘Server/db/citus.js’

Please replace ‘<cluster>’ and ‘<password>’ with the values you put in from the previous step.

Go to your favorite cli tool then go to the React folder and run:

You will see:

Now go to the Server folder and run:

‘Reset’ will create the table of Pharmacy in the Citus Database with seed data.

‘Load’ will load the dataset into the view.

‘Delete All’ will drop the table.

(I haven’t worked on the ‘Add Pharmacy’ and ‘Delete Selected’, YET, so they are disabled… lol)

It’s easy as that! You’ve created your first React app with CosmosDb for PostgreSQL.

I hope this set a good foundation for anyone to go start making something awesome!