Sdílet prostřednictvím

Static React Web App + Functions with C# API and SQL Database on Azure

Browse code

Open in GitHub Codespaces Open in Dev Container

A blueprint for getting a React web app with a C# API and a SQL database running on Azure. The blueprint includes sample application code (a ToDo web app) which can be removed and replaced with your own application code. Add your own source code and leverage the Infrastructure as Code assets (written in Bicep) to get up and running quickly. This architecture is for hosting static web apps with serverless logic and functionality.

Let's jump in and get this up and running in Azure. When you are finished, you will have a fully functional web app deployed to the cloud. In later steps, you'll see how to setup a pipeline and monitor the application.

"Screenshot of deployed ToDo app"

Screenshot of the deployed ToDo app

Prerequisites

This template will create infrastructure and deploy code to Azure. If you don't have an Azure Subscription, you can sign up for a free account here. Make sure you have contributor role to the Azure subscription.

The following prerequisites are required to use this application. Please ensure that you have them all installed locally.

Quickstart

To learn how to get started with any template, follow the steps in this quickstart with this template(Azure-Samples/todo-csharp-sql-swa-func).

This quickstart will show you how to authenticate on Azure, initialize using a template, provision infrastructure and deploy code on Azure via the following commands:

# Log in to azd. Only required once per-install.
azd auth login

# First-time project setup. Initialize a project in the current directory, using this template.
azd init --template Azure-Samples/todo-csharp-sql-swa-func

# Provision and deploy to Azure
azd up

Application Architecture

This application utilizes the following Azure resources:

Here's a high level architecture diagram that illustrates these components. Notice that these are all contained within a single resource group, that will be created for you when you create the resources.

"Application architecture diagram"

Cost of provisioning and deploying this template

This template provisions resources to an Azure subscription that you will select upon provisioning them. Refer to the Pricing calculator for Microsoft Azure to estimate the cost you might incur when this template is running on Azure and, if needed, update the included Azure resource definitions found in infra/main.bicep to suit your needs.

Application Code

This template is structured to follow the Azure Developer CLI. You can learn more about azd architecture in the official documentation.

Next Steps

At this point, you have a complete application deployed on Azure. But there is much more that the Azure Developer CLI can do. These next steps will introduce you to additional commands that will make creating applications on Azure much easier. Using the Azure Developer CLI, you can setup your pipelines, monitor your application, test and debug locally.

Note: Needs to manually install setup-azd extension for Azure DevOps (azdo).

  • azd pipeline config - to configure a CI/CD pipeline (using GitHub Actions or Azure DevOps) to deploy your application whenever code is pushed to the main branch.

  • azd monitor - to monitor the application and quickly navigate to the various Application Insights dashboards (e.g. overview, live metrics, logs)

  • Run and Debug Locally - using Visual Studio Code and the Azure Developer CLI extension

  • azd down - to delete all the Azure resources created with this template

  • Enable optional features, like APIM - for enhanced backend API protection and observability

Additional azd commands

The Azure Developer CLI includes many other commands to help with your Azure development experience. You can view these commands at the terminal by running azd help. You can also view the full list of commands on our Azure Developer CLI command page.

Security

Roles

This template has been updated to be completely passwordless by default. Identity and Managed Identity is used instead in call cases.

This template creates a managed identity for your app inside your Azure Active Directory tenant, and it is used to authenticate your app with Azure and other services that support Azure AD authentication e.g. the Storage account used for the Function's AzureWebJobsStorage or the optional Key Vault via access policies.

You will see principalId referenced in the infrastructure as code files, that refers to the id of the currently logged in Azure Developer CLI user, which will be granted access policies and permissions to run the application locally.

Additionally you will see a User Assigned Managed Identity (UAMI) for the API (FunctionApp) that is used by the Function to call dependencies such as Storage, SQL and KeyVault. If you set the optional enableSQLScripts flag to true, then an additional SQLAdmin UAMI will be created to do admin tasks like running scripts, and then the API UAMI will only be used for the app to read and write data. To view your managed identity in the Azure Portal, follow these steps.

Virtual Network and Private Endpoints (Optional)

This template achieves an additional level of security by requiring all outbound traffic from your FunctionApp to its dependencies (e.g. Storage and SQL) using a VNET and Private Endpoints. This ensures true network isolation between the FunctionApp and the dependencies with a trusted endpoint for communication across the subnet boundary. To try this out select VNET_ENABLED=true when prompted.

Note if you enable VNET, you will not be able to access your cloud resources such as Storage or SQL from your development machine by default. However you can mitigate this by adding your developer machine's IP address to the respective Firewall IP allow list for the service, or by VNET joining your development environment.

Key Vault (Optional for running sql scripts)

This template uses Azure Key Vault to securely store your Azure SQL connection string for the provisioned Azure SQL Database, as well as to hold onto temporary values needed to run an admin script. Key Vault is a cloud service for securely storing and accessing secrets (API keys, passwords, certificates, cryptographic keys) and makes it simple to give other Azure services access to them. It is recommended to use Managed Identity whenever possible especially for Azure Services, however in cases where that is not possible, Key Vault is the recommendation.

Reporting Issues and Feedback

If you have any feature requests, issues, or areas for improvement, please file an issue. To keep up-to-date, ask questions, or share suggestions, join our GitHub Discussions. You may also contact us via AzDevTeam@microsoft.com.