Operate static web apps to land NoSQL application with Azure Cosmos DB

A detailed summary from Seven Peaks Software

Meet our Speakers

Giorgio Desideri

Tech Lead - Cloud Solutions

Developer Guide for Azure Cosmos DB

Giorgio is a certified cloud architect for AWS and Azure, who is enthusiastic about coding. He loves to educate and share his experience with passionate individuals. Giorgio will provide technical knowledge, approach, and guidelines to work with and leverage Azure Cosmos DB, to maximize its benefits.

Read more

Penjai Jiansuwan (Fon)

Senior .NET Developer

Get to know Azure Static Web Apps

Fon, a senior .NET Developer with 4+ years of experience developing, testing, and maintaining web applications and services with RESTFul API. Fon will describe what is Azure Static Web Apps and show you how this service can automatically build and deploy web apps to Azure from GitHub repository.

Read more

And Meet our Guest Speaker!

Fukiat Julnual

Partner Specialist at Microsoft (Thailand)

Continuously Deploy a Containerized App to Azure App Service

Meet Fukiat, Partner Specialist at Microsoft (Thailand), who is a highly Experienced Technical Evangelist with a demonstrated history of working in the computer software industry. His core skills include Data Analytics, Linux, Enterprise Software, Enterprise Architecture, Azure Application Development and Customer Relationship Management (CRM). Fukiat will be discussing how to Continuously deploy a containerized app to “Azure App Service” through introducing a deployment of containerized App to “App Service – Web App for Containers” by leveraging GitHub Actions.

Read more

In this article, we will uncover the full journey through Azure web applications; from starting with
static web apps to landing NoSQL applications using the
Azure Cosmos DB platform.

Developers Guides for Azure Cosmos DB

What is Azure Cosmos DB

Azure Cosmos DB logo

Azure Cosmos DB is a Nosql Database. It is a PaaS, platform as a service, provided by Azure. What makes Azure Cosmos DB amazing is that it has the ability to be globally distributed with one click. Moreover, it gives to the users the options to be billed by two execution models, provisioned or serverless.

Azure Cosmos DB Resource Model

Programmer Explaining

Cosmos DB is structured upon 3 main components: database account, database and container. First of all, a database account is a logical container of your database. The database is the base of the data where your data is stored, it is the logical group of your data. Afterwards, the container is the part where your data are stored and what could be replicated across the world.

The features which Azure Cosmos DB gives to you is the ability to manage conflicts, merge procedures, triggers, user-defined functions, and stored procedures. Conflicts and merge procedures are the way how Cosmos DB manages the conflicts automatically. However, you can define your custom option to manage the conflicts. Then, when there are some conflicts, Cosmos DB will apply those merge procedures. Cosmos DB is designed to globally scale. So think that someone in the same moment adds a new item to the container that needs to be managed, a conflict will need to be resolved.

Azure Cosmos DB API Model

Core/SQL API – Follow the SQL syntax

Core or SQL API, they called it Core before it was called SQL, because of it has a SQL Syntax but the data is NoSQL.

.Net Core

MongoDB API – Document model

MongoDB API, uses the same document representation of MongoDB. A document is practically the representation of the data. Using a book as an example, inside a single chapter we can have a simple property, like a short text, or an aggregation of complex properties, such as image, label, descriptions and so on.

MongoDB icon

Cassandra API – Multi key-values model

Cassandra API, with the multi key-values model, where a value can be a recursive key-value structure. So, in Cassandra you have a key, associated with this key you can have a column that can contain only one value or column that can contain multiple values and it is called column family. This is pretty useful for mapping the many-to-many relationships. There are some limitations, but it is convenient when your data model has a lot of many-to-many or one-to-many relationships.

Cassandra API

Gremlin API – Graph model

A graph is a mathematical model based on two simple objects: vertices (edges or nodes) and edges where each edge can be bidirectional or unidirectional.

Gremlin database

Storage Table API

In the Azure storage account, you have a feature, a service that is called the storage table, that is the key value model. And now is included into the Azure Cosmos DB. This API is very helpful in the IoT context because the price of the huge amount of data is more convenient than the storage account table.

Storage Table

Azure Cosmos DB 1st Contact

First contact, what we have to do, to do what we want to do, and avoiding what we don’t want to do.

How to Approach

API Model Flow Chart

API Examples

Product Catalog

In the product catalog, you choose the Core API because you have semi-structured data for the products which you have: unique code, product name, description, one or multiple sellers. After that, according to the time lapse you will have other not-common values which can be used or not. Therefore, you need a good capability to filter and sort the products during the retrieval phase like a lot of E-Commerce already did such as Lazada, Agoda, Shopee, etc. Using the Core/SQL API in Cosmos DB you will reduce to simple queries all the possible optimization and complexities for these operations.

Order History

For order history, it is better to use MongoDB. This is because, first, there is no search, you will load the document by its code or key. Secondly, by the data structures. One order is like one document, it is already pretty structured: there is the seller, the buyer, the items which you ordered, inside each item there is a quantity, description, unit price, etc.

Recommendation Engine

Gremlin API as graph API is the best option when you have to implement a system that should give you some suggestions, the suggestion works as our brain, following the idea association. For example, I like chocolate cake. If you like the chocolate cake, you like the cake and the chocolate. Focusing on chocolate, you can have white or dark chocolate. Now, moving on to the dark. There is another vertice that can bring it into the cake or give me another sweet with the dark chocolate. This is simple right? The results come by traversing the graph to suggest the chocolate cake.

Web Analytics

Web analytics is a classic example for collecting the data that comes from different sources using Cassandra API. You have the ability to collect all the data that comes from your website, classified by section, browser, path of the page, interval between the click, loading page, and so on. This kind of key-values data has one key because it’s about yourself or about your session, for example. All the data can be the value that you can collect and store in the Azure Cosmos DB using the Cassandra API.

IoT System

The IoT system should use the Storage Table API. You should use store only because in the IoT the first thing you have to do is store the data you received. Second, the minimum of the structural data, you have one id, one partition key, and one timestamp. The rest is the data that come from your sensor from your IoT input. In addition, you need the huge space.

An example would be the storage of the data for IoT weather forecasts. The weather forecast is a continuous update of the data. On the atmosphere level, there is a high, medium, low zone, and terrain layer. We need to collect all this data somewhere and pass this data periodically. In that way, when the news reports during lunch time, you have one weather forecast. Afterward, when the news report around dinner time, you will have another weather forecast for tomorrow that may change. The more data you provide for the weather forecast, the more accurate your forecast is. The data for the weather forecast is around 20-50 GB per six hour. Therefore, if you calculate by multiplying to 24 hour, you start to understand the amount of data that you need to have to calculate exactly what the weather of tomorrow is.

Azure Cosmos DB in Depth

But not too deep

Consistency Level

Consistency levels in Azure Cosmos DB

Azure Cosmos DB has a concept called consistency level. The consistency level consists of five levels which is strong,  bounded, session, consistent, and eventual.  They decide the level of data synchronization for the same database across the globe.  

Programmer working on Project

First, start to order the level by consistency. Strong consistency level means that your data will be synchronized in milliseconds time across all the world regions chosen. The default one is the Session consistency level, meanwhile the weakest one is the eventual, where the data are “eventual” (in the meaning of maybe) synchronized.

To explain the replication and synchronization Azure already did that using the example of the musical notes, and according to  Giorgio’s opinion, it is a good example to easily understand these difficult concepts.

Request Unit

How do you pay Cosmos DB?

Azure charges you the usage of Cosmos DB using the consumption of the request unit used to retrieve or store your data.

Payment Information

What is a request unit?

The cost to do a point read (i.e. fetching a single item by its ID and partition key value) for a 1 KB item is 1 Request Unit (or 1 RU).

Cloud Database

How many request units do I have to use?

Request Units Modes

How to define the throughput that you need?

First, you need to choose one API model for Azure Cosmos DB. Second, you need to choose the consistency level. Third, you need to choose the throughput for my request unit.

These are the main three points where you are going to focus on.

See your data model, if you cannot understand the right API model then choose the Core API as default. Second, write the PoC. Identify the most valuable features, if you need to write e-commerce, the login and logout is probably not your primary feature that you need to consider to use for Cosmos DB, but the product catalogue can be the first one. Develop the most valuable features that you identified, start with a minimum of request units per second, depending on the region you choose.

Female checklist
E-commerce - Digital Product Catalog

Lastly, test as a maniac, this is the key. You MUST test everything, every single flaw, success and the wrong ones, especially the wrong ones, as well as the performance. When you achieve these two points and you think to cover all the possible features that you have, see the report, see the number against Azure Cosmos DB, cross the data and check if you choose well. Otherwise, go back and increase the RU/s and test again.


Migration to the Cloud

First, consider what you have. For example, I want to use Cosmos DB to migrate my current MongoDB.
Yes, done, finish!

Second plan the API according to the data model that you have or you will have, take in consideration all the possible deviation of these API. 

Third, think about the usage of these data, how you search, how you insert, how you update, how you delete. Take in serious consideration of the model of the experiment, so go as PoC and decide based on the experiment. 

Risk number one, the model doesn’t fit the reality. 

Risk number 2, monitoring the production to predict the possible change, how many times the privacy of Facebook changes? 

Risk number 3, rewrite the model or PoC because it is not flexible enough. You perform only the product catalog, I cannot perform the login. Why? Because we identify that the login is not the most valuable feature.

Get to know Azure Static Web Apps

Azure Static Web Apps

Azure Static Web Apps is one of the new hosting options for static files built on HTML and JavaScript in the Azure Web Apps Family products. It is like a combination of several services bound together from Azure by offering streamlined full-stack development from source code to global high availability. The workflow of Azure Static Web Apps is tailored to a developer’s daily workflow. Apps are built and deployed based on GitHub interactions. There is not only Static content that can be deployed in this service but also API.

Features: What will you when using
Azure Static Web Apps

  • Web hosting for static content like HTML, CSS, JavaScript, and images.
  • Integrated API support provided by Azure Functions.
  • First-class GitHub integration where repository changes trigger builds and deployments.
  • Globally distributed static content, putting content closer to your users.
  • Free SSL certificates, which are automatically renewed.
  • Custom domains to provide branded customizations to your app.
  • Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.
  • Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter.
  • Customizable authorization role definition and assignments.
  • Back-end routing rules enabling full control over the content and routes you serve.
  • Generated staging versions powered by pull requests enabling preview versions of your site before publishing.
Developer Azure Static Web Apps

Support: What does
Azure Static Web Apps support

  • Front-End Frameworks  – Static Web Apps supports JavaScript and TypeScript front-end apps including those developed with popular frameworks like Vue.js, React, Angular, and more.
Angular schematic
Gatsby Logo
  • Programming Languages for Azure Functions – Static Web Apps supports JavaScript, TypeScript, Python, and C# Azure Functions apps.
Node JS
Microsoft .NET

Continuously deploy a containerized app to Azure App Service

The idea of app services – why do people love app services? For example, they have the concept of a deployment slot. That means, in one website, you can have one slot, two slots, three slots or four slots. For example, the first slot is like a production. The second slot is like staging or testing, and if you want to swap between staging and production, you can do that. Of course, you can swap back into production. A lot of people love this feature. And the second one, why is the app service very popular? Because you can even use the web browser to do the configuration, or you can do integration with many kinds of authentication. In addition, The one thing about the fields, for example, they will tightly integrate with a recorded logic app, we call it the App Insights, it allows us to see what happened inside the application if you have the relationship between the application and also other companies.

Cloud Computing

The reason why the App service is popular is because they also have a built-in daily backup for the source code and the service that is tightly integrated – like a database server. Another reason why they are popular is because if you want to deploy your own website, and you want to use the custom domain name, you need to pay for the custom domain. However, every website, if you want to have popular websites, you need to implement the implementation of SSL. If your website is really simple, for example, like www.something.com, you can get the benefits of the SSL for free. You don’t need to pay for the certification.

Relating to the website, when we think about an app service, the first thing we think about, we deploy the source code, deploy the program, deploy the code, and the second one, we can deploy the container because the container really got more popular. I believe Seven Peaks Software also does a lot of implementation on the container, that means with the whole function of App Service, we have a choice, you can deploy the program under the framework, or wrap everything in doctrine. After that, you put Docker image into the app service. Another good point is that it is integrated with a CI/CD pipeline, for example, like a native Microsoft, we call the Azure DevOps. In addition, if you want to have something else, for example, like a Jenkins, they can also work with another CI/CD pipeline.

For more details on using GitHub Actions, Azure App Service, Docker Container, Azure Container Registry, Node.js + Express.js, and Azure Cosmos DB together. Watch our meetup now!

arrow down

Watch this event on YouTube here

Get Instant FREE Access to our Tech Community!

What you’ll receive:

Latest news, reviews, and insights on emerging technologies

Updates on new job openings

Early invitations to events held at our office

Coding tips and tutorials

Interesting giveaway freebies

Plus much more!

Subscribe below to join our growing tech and design community.


Do you need help with your backend development for your project? Get in touch with us below to see how we can help you!

Meet the Writers:

Richie Liu

Digital Marketing Intern at
Seven Peaks Software

Richie is a Digital Marketing Intern at Seven Peaks Software who is graduating from Bangkok University School of Marketing. “I have learned so much within a short time compare to academic work. Here you are able to learn and perform in meaningful projects.”

Sign up today & start getting tech news.

Get the latest tech trends directly in your inbox each month. And get invited to exclusive events.

    Leave a Reply