ToDo Application with a FastAPI with sqlite3 and HTMX on Azure App Service (Terraform)
A ToDo template that includes everything you need to build, deploy, and monitor an Azure solution. Uses the Azure Developer CLI (azd) to get you up and running on Azure quickly using Terraform as the IaC provider, Htmx for the Web application, Python (FastAPI) for the API, and Azure Monitor for monitoring and logging. It includes application code, tools, and pipelines that serve as a foundation from which you can build upon and customize when creating your own solutions.
Prerequisites
The following prerequisites are required to use this application. Please ensure that you have them all installed locally.
- Azure Developer CLI
- Python (3.8+) - for the API backend
- Terraform CLI
- Azure secrets
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.
- Open a terminal, create a new empty folder, and change into it.
- Create a new Python virtual environment.
- Run the following command to initialize the project.
azd init --template atrakic/fastapi-htmx-azd-template
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.
- Run the following commands 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.
azd config set alpha.terraform on
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), andazd 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 API application
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 theazd 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 to host the Web app
Application Code
The repo is structured to follow the Azure Developer CLI 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.
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. 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
- Click on the "Extensions" tab in VS Code
- Search for "Azure Developer CLI" - authored by Microsoft
- Click "Install"
Marketplace
- Go to the Azure Developer CLI - VS Code Extension page
- 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.
azd pipeline
Set up a pipeline using 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.
Before you call the azd pipeline config
command, you'll need to install the following:
Run the following command to set up a GitHub Action:
azd pipeline config
azd monitor
Monitor the application using 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:
azd monitor --overview
-
Live Metrics Dashboard
Run the following command to open the "Live Metrics" dashboard:
azd monitor --live
-
Logs Dashboard
Run the following command to open the "Logs" dashboard:
azd monitor --logs
Clean up resources
When you are done, you can delete all the Azure resources created with this template by running the following command:
azd down