UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Upload
Sign in
Davide Mauri, profile picture
Uploaded byDavide Mauri
PPTX, PDF1,711 views

Azure serverless Full-Stack kickstart

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.

Software◦
Downloaded 18 times
1 / 15
2 / 15
3 / 15
4 / 15
5 / 15
6 / 15
7 / 15
8 / 15
9 / 15
10 / 15
Most read
11 / 15
12 / 15
Most read
13 / 15
14 / 15
Most read
15 / 15
Example Dividing Slide
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
Sample Application https://todomvc.com/ http://www.todobackend.com/
Architecture
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
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
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
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!
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
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”
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
Demo! Let’s build something!
Additional References to used Tools / Samples DbUp : https://dbup.github.io/
Thanks!