Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/softchris/todocsharpsqla75d


https://github.com/softchris/todocsharpsqla75d

Last synced: 16 days ago
JSON representation

Awesome Lists containing this project

README 

        
---

page_type: sample

languages:

- azdeveloper

- aspx-csharp

- csharp

- bicep

- typescript

- html

products:

- azure

- azure-sql-database

- azure-app-service

- azure-monitor

- azure-pipelines

- aspnet-core

urlFragment: todo-csharp-sql

name: React Web App with C# API and SQL Database on Azure

description: A complete ToDo app with C# API and Azure SQL database for storage. Uses Azure Developer CLI (azd) to build, deploy, and monitor

---



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



[![Open in GitHub Codespaces](https://img.shields.io/static/v1?style=for-the-badge&label=GitHub+Codespaces&message=Open&color=brightgreen&logo=github)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=452043569&machine=standardLinux32gb&devcontainer_path=.devcontainer%2Fdevcontainer.json&location=WestUs2)

[![Open in Remote - Containers](https://img.shields.io/static/v1?style=for-the-badge&label=Remote%20-%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/azure-samples/todo-csharp-sql)



A blueprint for getting a React web app with a C# API and a SQL database 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.



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"](assets/web.png)



Screenshot of the deployed ToDo app



### Prerequisites



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



- [Azure Developer CLI](https://aka.ms/azd-install)

- [.NET SDK 6.0](https://dotnet.microsoft.com/download/dotnet/6.0) - for the API backend

- [Node.js with npm (16.13.1+)](https://nodejs.org/) - for the Web frontend



### Quickstart



The fastest way for you to get this application up and running on Azure is to use the `azd up` command. This single command will create and configure all necessary Azure resources - including access policies and roles for your account and service-to-service communication with Managed Identities.



1. Open a terminal, create a new empty folder, and change into it.

2. Run the following command to initialize the project.



```bash

azd init --template todo-csharp-sql

```



This command will clone the code to your current folder and prompt you for the following information:



- `Environment Name`: This will be used as a prefix for the resource group that will be created to hold all Azure resources. This name should be unique within your Azure subscription.



3. Run the following command to package a deployable copy of your application, provision the template's infrastructure to Azure and also deploy the application code to those newly provisioned resources.



```bash

azd up

```



This command will prompt you for the following information:



- `Azure Location`: The Azure location where your resources will be deployed.

- `Azure Subscription`: The Azure Subscription where your resources will be deployed.



> NOTE: This may take a while to complete as it executes three commands: `azd package` (packages a deployable copy of your application), `azd provision` (provisions Azure resources), and `azd deploy` (deploys application code). You will see a progress indicator as it packages, provisions and deploys your application.



When `azd up` is complete it will output the following URLs:



- Azure Portal link to view resources

- ToDo Web application frontend

- ToDo API application



!["azd up output"](assets/urls.png)



Click the web application URL to launch the ToDo app. Create a new collection and add some items. This will create monitoring activity in the application that you will be able to see later when you run `azd monitor`.



> NOTE:

>

> - The `azd up` command will create Azure resources that will incur costs to your Azure subscription. You can clean up those resources manually via the Azure portal or with the `azd down` command.

> - You can call `azd up` as many times as you like to both provision and deploy your solution.

> - You can always create a new environment with `azd env new`.



### Application Architecture



This application utilizes the following Azure resources:



- [**Azure App Services**](https://docs.microsoft.com/azure/app-service/) to host the Web frontend and API backend

- [**Azure SQL Database**](https://docs.microsoft.com/azure/azure-sql/database/sql-database-paas-overview?view=azuresql) for storage

- [**Azure Monitor**](https://docs.microsoft.com/azure/azure-monitor/) for monitoring and logging

- [**Azure Key Vault**](https://docs.microsoft.com/azure/key-vault/) for securing secrets



Here's a high level architecture diagram that illustrates these components. Notice that these are all contained within a single [resource group](https://docs.microsoft.com/azure/azure-resource-manager/management/manage-resource-groups-portal), that will be created for you when you create the resources.



!["Application architecture diagram"](assets/resources.png)



> This template provisions resources to an Azure subscription that you will select upon provisioning them. Please refer to the [Pricing calculator for Microsoft Azure](https://azure.microsoft.com/pricing/calculator/) and, if needed, update the included Azure resource definitions found in `infra/main.bicep` to suit your needs.



### Application Code



The repo is structured to follow the [Azure Developer CLI](https://aka.ms/azure-dev/overview) conventions including:



- **Source Code**: All application source code is located in the `src` folder.

- **Infrastructure as Code**: All application "infrastructure as code" files are located in the `infra` folder.

- **Azure Developer Configuration**: An `azure.yaml` file located in the root that ties the application source code to the Azure services defined in your "infrastructure as code" files.

- **GitHub Actions**: A sample GitHub action file is located in the `.github/workflows` folder.

- **VS Code Configuration**: All VS Code configuration to run and debug the application is located in the `.vscode` folder.



### Azure Subscription



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](https://azure.microsoft.com/free/). Make sure you have contributor role to the Azure subscription.



### Azure Developer CLI - VS Code Extension



The Azure Developer experience includes an Azure Developer CLI VS Code Extension that mirrors all of the Azure Developer CLI commands into the `azure.yaml` context menu and command palette options. If you are a VS Code user, then we highly recommend installing this extension for the best experience.



Here's how to install it:



#### VS Code



1. Click on the "Extensions" tab in VS Code

1. Search for "Azure Developer CLI" - authored by Microsoft

1. Click "Install"



#### Marketplace



1. Go to the [Azure Developer CLI - VS Code Extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.azure-dev) page

1. Click "Install"



Once the extension is installed, you can press `F1`, and type "Azure Developer CLI" to see all of your available options. You can also right click on your project's `azure.yaml` file for a list of commands.



### 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.



#### Set up a pipeline using `azd pipeline`



This template includes a GitHub Actions pipeline configuration file that will deploy your application whenever code is pushed to the main branch. You can find that pipeline file here: `.github/workflows`.



Setting up this pipeline requires you to give GitHub permission to deploy to Azure on your behalf, which is done via a Service Principal stored in a GitHub secret named `AZURE_CREDENTIALS`. The `azd pipeline config` command will automatically create a service principal for you. The command also helps to create a private GitHub repository and pushes code to the newly created repo.



Run the following command to set up a GitHub Action:



```bash

azd pipeline config

```



> Support for Azure DevOps Pipelines is coming soon to `azd pipeline config`. In the meantime, you can follow the instructions found here: [.azdo/pipelines/README.md](./.azdo/pipelines/README.md) to set it up manually.



#### Monitor the application using `azd monitor`



To help with monitoring applications, the Azure Dev CLI provides a `monitor` command to help you get to the various Application Insights dashboards.



- Run the following command to open the "Overview" dashboard:



  ```bash

  azd monitor --overview

  ```



- Live Metrics Dashboard



  Run the following command to open the "Live Metrics" dashboard:



  ```bash

  azd monitor --live

  ```



- Logs Dashboard



  Run the following command to open the "Logs" dashboard:



  ```bash

  azd monitor --logs

  ```



#### Run and Debug Locally



The easiest way to run and debug is to leverage the Azure Developer CLI Visual Studio Code Extension. Refer to this [walk-through](https://aka.ms/azure-dev/vscode) for more details.



#### Clean up resources



When you are done, you can delete all the Azure resources created with this template by running the following command:



```bash

azd down

```



### Enable Additional Features



#### Enable [Azure API Management](https://learn.microsoft.com/azure/api-management/)



This template is prepared to use Azure API Management (aka APIM) for backend API protection and observability. APIM supports the complete API lifecycle and abstract backend complexity from API consumers.



To use APIM on this template you just need to set the environment variable with the following command:



```bash

azd env set USE_APIM true

```

And then execute `azd up` to provision and deploy. No worries if you already did `azd up`! You can set the `USE_APIM` environment variable at anytime and then just repeat the `azd up` command to run the incremental deployment.



Here's the high level architecture diagram when APIM is used:



!["Application architecture diagram with APIM"](assets/resources-with-apim.png)



The frontend will be configured to make API requests through APIM instead of calling the backend directly, so that the following flow gets executed:



1. APIM receives the frontend request, applies the configured policy to enable CORS, validates content and limits concurrency. Follow this [guide](https://learn.microsoft.com/azure/api-management/api-management-howto-policies) to understand how to customize the policy.  

1. If there are no errors, the request is forwarded to the backend and then the backend response is sent back to the frontend.

1. APIM emits logs, metrics, and traces for monitoring, reporting, and troubleshooting on every execution. Follow this [guide](https://learn.microsoft.com/azure/api-management/api-management-howto-use-azure-monitor) to visualize, query, and take actions on the metrics or logs coming from APIM.



> NOTE:

>

> By default, this template uses the Consumption tier that is a lightweight and serverless version of API Management service, billed per execution. Please check the [pricing page](https://azure.microsoft.com/pricing/details/api-management/) for more details.



### 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](https://aka.ms/azure-dev/ref) page.



## Troubleshooting/Known issues



Sometimes, things go awry. If you happen to run into issues, then please review our ["Known Issues"](https://aka.ms/azure-dev/knownissues) page for help. If you continue to have issues, then please file an issue in our main [Azure Dev](https://aka.ms/azure-dev/issues) repository.



## Security



### Roles



This template creates a [managed identity](https://docs.microsoft.com/azure/active-directory/managed-identities-azure-resources/overview) 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 like 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. To view your managed identity in the Azure Portal, follow these [steps](https://docs.microsoft.com/azure/active-directory/managed-identities-azure-resources/how-to-view-managed-identity-service-principal-portal).



The template will also create a dedicated Azure SQL user for the application and store its credentials in a KeyVault (see below). The application user's access is restricted to the ToDo database only; a separate administrator account is set up for managing the whole Azure SQL instance. 



### Key Vault



This template uses [Azure Key Vault](https://docs.microsoft.com/azure/key-vault/general/overview) to securely store your Azure SQL Database credentials and the connection string used by the application to interact with the database. 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. As you continue developing your solution, you may add as many secrets to your Key Vault as you require.



## Uninstall



To remove the Azure Developer CLI, refer to [uninstall Azure Developer CLI](https://aka.ms/azd-install?tabs=baremetal%2Cwindows#uninstall-azd).



## Reporting Issues and Feedback



If you have any feature requests, issues, or areas for improvement, please [file an issue](https://aka.ms/azure-dev/issues). To keep up-to-date, ask questions, or share suggestions, join our [GitHub Discussions](https://aka.ms/azure-dev/discussions). You may also contact us via [email protected].