The document outlines the steps to create a full-stack solution using Azure technologies with a focus on a TodoMVC application. It details the installation of necessary tools, the implementation of an API using Azure Functions, and steps to integrate a Vue.js client with Azure SQL database. The document also emphasizes the benefits of using Azure SQL, particularly its flexibility and serverless capabilities.

2. Example Dividing Slide

3. Session’s Goal
Give you a kickstart on creating a fully-working full-stack solution with
Web Client: HTML + Vue.js
Backend: Azure Static Web Apps (+ Azure Functions)
Language: .NET Core
Database: Azure SQL

4. Sample Application
https://todomvc.com/ http://www.todobackend.com/

5. Architecture

6. Install Azure Functions Core Tools
Make sure you have Node installed
https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local
npm i -g azure-functions-core-tools@3 --unsafe-perm true

7. Install Azure Static Web App CLI
https://docs.microsoft.com/en-us/azure/static-web-apps/local-development
npm install -g @azure/static-web-apps-cli

8. Vue Client
https://vuejs.org/v2/examples/todomvc.html
Uses local storage to save todo items
curl https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/v2/examples/vue-20-todomvc/index.html -o index.html

9. Next steps
1. Create an Azure Function to implement the TodoMVC API Specs
- http://www.todobackend.com/
2. Update the Vue Client to use the REST API instead of local storage
3. Deploy the full-stack solution to Azure Static Web Apps
4. Change the API to save data into an Azure SQL DB
5. Update CI/CD pipeline to also deploy and update the DB
6. Add Authentication support
7. Have some good chocolate!

10. Why Azure SQL Database?
We want to be ready for anything, so we need flexibility AND
security, performance, data consistency:
• Multi-model support (JSON / Graph / GeoSpatial)
• In-Memory Lock Free Tables
• Ledger Tables
• Row-Store and Column-Store on the same table
• Encryption (Column/Database/Transparent/Full)
• Row Level Security

11. Why Azure SQL Database Serverless?
Automatically scale up/down
Automatically pause if not used
Billed per second
Also check out Anna’s session “Catch the Serverless Bus: Azure Functions, Logic Apps, and Azure SQL Database”

12. Sample Repository
Fork the repo:
https://github.com/yorek/serverless-conference-2021
Then
Three branches:
v1.0: Very basic kickstart project, no database connectivity
v2.0: Full project, with database connectivity and CI/CD pipeline
v3.0: End-To-End with also Authentication support!
git clone https://github.com/your-org/serverless-conference-2021

13. Demo!
Let’s build something!

14. Additional References to used Tools / Samples
DbUp : https://dbup.github.io/

15. Thanks!