azure-samplesazure-samples
21

Dab Swa Todo

screenshot of Dab Swa Todo

End-to-end Jamstack Todo list application with Data API builder and Static Web Apps

Github

Overview

This article introduces a Todo application built with Vue.js that utilizes various Azure services such as Azure Static Web Apps, Data API builder, and Azure SQL Database. The Todo app allows users to create public or private todos, update or delete todos, mark todos as completed, and perform drag and drop operations to reorder todos. The application also incorporates backend REST API, authentication via Easy Auth with GitHub, and authorization via Data API builder policies.

Features

  • Backend REST API: The application has a backend REST API implemented using Data API builder.
  • Authentication: Easy Auth is configured to use GitHub for authentication in the application.
  • Authorization: The application utilizes Data API builder policies for authorization.
  • Database Connections: The Data API builder is hosted in Azure via Static Web Apps "Database Connections".
  • Local Development: The repository can be forked and cloned to the local machine for local development.
  • Deploying the Database: The article provides instructions for deploying the database project to an SQL Server or Azure SQL Emulator instance using VS Code Database Projects extension or the sqlpackage tool.
  • Running the App Locally: Instructions are provided for running the Vue frontend locally, including setting up the connection string to the local SQL Server instance or Azure SQL Emulator.
  • Deploying to Azure: The article guides users on deploying the application to Azure by setting up the Static Web App resource, creating a Resource Group, and obtaining the Static Web App deployment token.

Summary

The article presents a Todo application built with Vue.js and integrated with Azure services. The application allows users to manage their todos by creating, updating, deleting, marking as completed, and reordering. It incorporates features like backend REST API, authentication, and authorization using Azure services. The article provides detailed installation instructions for deploying the application locally as well as on Azure.