Serverless Reference Architecture: Web Application

The Web Application reference architecture is a general-purpose, event-driven, web application back-end that uses Azure Functions, Azure API Gateway for its business logic. It also uses Cosmos DB as its database and Azure AD for user management. All static content is hosted using Azure Static webapps. 

This application implements a simple To Do app, in which a registered user can create, update, view the existing items, and eventually, delete them.

Application Components: The Web Application is built from 3 different components.

Front End Application: The front-end application is all the static content (HTML files, CSS files, JavaScript files and images) that are generated by create-react-app. All these objects are hosted on Azure Static webapp.

When a user connects to the web site, the needed resources are downloaded to their browser and start to run there. When the application needs to communicate with the backend it does so by issuing REST API calls to the backend.

Back End Application (Business Logic): The backend application is where the actual business logic is implemented. The code is implemented using Azure functions fronted by an API Gateway REST API. In our case, we have different Azure functions, each handling a different aspect of the application: list the to-do items, get details about a specific item, update an item, create a new item, mark an item as complete and delete an existing item. The application saves all items in Azure SQL.

User Registration and Authentication: As the ToDo application contains personal information (the user's ToDo items), access is restricted only to registered and authenticated users. Each user can access only their own items.

To accomplish this, we are using Azure AD, which allows users to register to the application, authenticate and so on. Only after a user is authenticated, the client will receive a JWT token which it should then use when making the REST API calls.