SlideShare a Scribd company logo

Intro to Azure Static Web Apps

Download as PPTX, PDF
M
Moaid Hathot

This document discusses Azure Static Web Apps, which provides globally distributed static content, integrated API support through Azure Functions, and automatic building and deployment of full stack web apps. It can support authentication/authorization and is easily scaled. The document demonstrates creating an Angular-based static web app using Cosmos DB for storage, Azure Functions for APIs, and Application Insights for monitoring.

Technology
1 of 18
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
HackaLearn Azure Static Web Apps Moaid Hathot Senior Software Engineer | ex-Azure MVP Moaid.Hathot@outlook.com @MoaidHathot https://moaid.codes https://meetup.com/Code-Digest
Web GET index.html Index.html, css, images, etc… Node.js, ASP.NET, Django, Flacon, etc… Static Files
Web GET index.html Index.html, css, images, etc… Node.js, ASP.NET, Django, Flacon, etc… Server-side rendering
Web GET index.html Index.html, css, images, etc… Node.js, ASP.NET, Django, Flacon, etc… Static Files SPA
Web GET index.html Index.html, css, images, etc… Storage, CDN Static Files SPA HTTP WEB API Node.js, ASP.NET, Django, Flacon, etc… SPA
Web GET index.html Index.html, css, images, etc… Storage, CDN Static Files SPA HTTP WEB API C#, JavaScript, Python, TypeScript, Java, PowerShell, F# SPA
Web – SWA Reverse Proxy Storage, CDN Azure Functions
 Create a Azure Static Web App in Angular  Use Azure Functions with TypeScript  Use Cosmos Db as a Database  Monitoring via Application Insights Azure Static Web Apps
About Moaid Hathot  Senior software Engineer @ Microsoft  Ex-Azure MVP  Software Craftsmanship advocate  Clean Coder  Co-Founder of Code.Digest();  https://meetup.com/Code-Digest Moaid Hathot
 Secure via a reverse-proxy  Web hosting  static content like HTML, CSS, JavaScript, and images  Globally distributed static content  Custom Domains  Integrated API support (Azure Functions)  Support Authentication & Authorization  Support routing  Automatically builds and deploys full stack web apps  CI & CD using Github and Azure DevOps Azure Static Web Apps
Azure Static Web Apps
 Supported Frameworks  Angular  React  Svelte  Blazor  Vue.js  Vanilla JS/TS  More… Azure Static Web Apps
 Serverless  Pay for use  Based on triggers  Supports a variety of programming languages  C#, JavaScript, TypeScript, Python, PowerShell, F#  Easily scalable Azure Functions
 Fully managed NoSQL database  Supports multiple APIs  SQL, Table, MongoDB, Cassandra, Gremlin (graph)  Single-digit millisecond response time  New Serverless offering Cosmos DB
 Monitors live applications  Automatically detect performance anomalies  Powerful Analytics tool  Monitor and analyze telemetry  Supports custom logs Application Insights
Demo  Create your first Angular-based Azure Static Web App  Implement a simple Hackathon project management system  Use Cosmos DB as the backing store  Configure Authentication and Authorization  Monitor the app via Application Insights https://github.com/MoaidHathot/HackaLearn-SWA-Angular-Demo
 Globally distributed static content  Integrated API support (Azure Functions)  Support Authentication & Authorization  Automatically builds and deploys full stack web apps  Easily scaled Summary
HackaLearn Thank You Moaid Hathot Senior Software Engineer | ex-Azure MVP Moaid.Hathot@outlook.com @MoaidHathot https://moaid.codes https://meetup.com/Code-Digest https://github.com/MoaidHathot/HackaLearn-SWA-Angular-Demo

More Related Content

PPTX
Nextjs13.pptx
DivyanshGupta922023
 
PDF
Static Web AppsとBlazor WebAssemblyのすすめ
TomomitsuKusaba
 
PDF
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
 
PPT
React js
Jai Santhosh
 
PPT
Tomcat
Venkat Pinagadi
 
PPTX
Application Load Balancer
Amazon Web Services Japan
 
PDF
Workshop 4: NodeJS. Express Framework & MongoDB.
Visual Engineering
 
PDF
Tailwind CSS - KanpurJS
Naveen Kharwar
 
Nextjs13.pptx
DivyanshGupta922023
 
Static Web AppsとBlazor WebAssemblyのすすめ
TomomitsuKusaba
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
 
React js
Jai Santhosh
 
Tomcat
Venkat Pinagadi
 
Application Load Balancer
Amazon Web Services Japan
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Visual Engineering
 
Tailwind CSS - KanpurJS
Naveen Kharwar
 

What's hot (20)

PPTX
Introduction to NodeJS
Cere Labs Pvt. Ltd
 
PDF
Ansible
Rahul Bajaj
 
PPTX
Git
Surya Sreedevi Vedula
 
PPTX
Infra as Code with Packer, Ansible and Terraform
Inho Kang
 
PDF
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
Amazon Web Services Japan
 
PDF
Introduction to Docker Compose
Ajeet Singh Raina
 
ODP
An Introduction To Jenkins
Knoldus Inc.
 
PPTX
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
 
PDF
20190821 AWS Black Belt Online Seminar AWS AppSync
Amazon Web Services Japan
 
PDF
Angular
Lilia Sfaxi
 
PDF
AngularJS
NexThoughts Technologies
 
PPTX
Tailwind CSS.11.pptx
Harish Verma
 
PDF
AWSのログ管理ベストプラクティス
Akihiro Kuwano
 
PPTX
Redis勉強会資料(2015/06 update)
Yuji Otani
 
PPTX
Introduction to spring boot
Santosh Kumar Kar
 
PDF
NestJS
Wilson Su
 
PDF
nioで作ったBufferedWriterに変えたら例外になった
chibochibo
 
PDF
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
Amazon Web Services Japan
 
PPTX
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
PDF
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイド
Yoichi Kawasaki
 
Introduction to NodeJS
Cere Labs Pvt. Ltd
 
Ansible
Rahul Bajaj
 
Git
Surya Sreedevi Vedula
 
Infra as Code with Packer, Ansible and Terraform
Inho Kang
 
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
Amazon Web Services Japan
 
Introduction to Docker Compose
Ajeet Singh Raina
 
An Introduction To Jenkins
Knoldus Inc.
 
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
 
20190821 AWS Black Belt Online Seminar AWS AppSync
Amazon Web Services Japan
 
Angular
Lilia Sfaxi
 
AngularJS
NexThoughts Technologies
 
Tailwind CSS.11.pptx
Harish Verma
 
AWSのログ管理ベストプラクティス
Akihiro Kuwano
 
Redis勉強会資料(2015/06 update)
Yuji Otani
 
Introduction to spring boot
Santosh Kumar Kar
 
NestJS
Wilson Su
 
nioで作ったBufferedWriterに変えたら例外になった
chibochibo
 
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
Amazon Web Services Japan
 
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイド
Yoichi Kawasaki
 
Ad

Similar to Intro to Azure Static Web Apps (20)

PPTX
The Future of ASP.NET
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
 
PDF
Single Page Apps
Gil Fink
 
PPTX
ASP.NET: Present and future
Hrvoje Hudoletnjak
 
PDF
Seattle StrongLoop Node.js Workshop
Jimmy Guerrero
 
PPTX
Best of Microsoft Dev Camp 2015
Bluegrass Digital
 
PPT
A Microsoft primer for PHP devs
guest0a62e8
 
DOCX
Resume Priyanka Bandekar MS CSYE
Priyanka Bandekar
 
PPTX
SSR with Quasar Framework - JSNation 2019
Razvan Stoenescu
 
PPTX
Windows Azure
Murali Krishna Alluri
 
PDF
Single page applications with backbone js
Gil Fink
 
PPTX
Websites, Web Services and Cloud Applications with Visual Studio
Microsoft Visual Studio
 
PPTX
Microsoft Azure
Mohab El-Shishtawy
 
DOCX
Resume Priyanka Bandekar MS CSYE
Priyanka Bandekar
 
PPTX
devops_
flopaconsult
 
PPTX
NodeJS - Creating a Restful API
Rogério Rodrigues
 
PPTX
Angular jS Introduction by Google
ASG
 
PPT
Cloud State of the Union for Java Developers
Burr Sutter
 
PPTX
Windows Azure Web Sites - Things they don’t teach kids in school - Comunity D...
Maarten Balliauw
 
PPSX
Web development concepts using microsoft technologies
Hosam Kamel
 
PPTX
MSDN - Converting an existing ASP.NET application to Windows Azure
Maarten Balliauw
 
The Future of ASP.NET
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
 
Single Page Apps
Gil Fink
 
ASP.NET: Present and future
Hrvoje Hudoletnjak
 
Seattle StrongLoop Node.js Workshop
Jimmy Guerrero
 
Best of Microsoft Dev Camp 2015
Bluegrass Digital
 
A Microsoft primer for PHP devs
guest0a62e8
 
Resume Priyanka Bandekar MS CSYE
Priyanka Bandekar
 
SSR with Quasar Framework - JSNation 2019
Razvan Stoenescu
 
Windows Azure
Murali Krishna Alluri
 
Single page applications with backbone js
Gil Fink
 
Websites, Web Services and Cloud Applications with Visual Studio
Microsoft Visual Studio
 
Microsoft Azure
Mohab El-Shishtawy
 
Resume Priyanka Bandekar MS CSYE
Priyanka Bandekar
 
devops_
flopaconsult
 
NodeJS - Creating a Restful API
Rogério Rodrigues
 
Angular jS Introduction by Google
ASG
 
Cloud State of the Union for Java Developers
Burr Sutter
 
Windows Azure Web Sites - Things they don’t teach kids in school - Comunity D...
Maarten Balliauw
 
Web development concepts using microsoft technologies
Hosam Kamel
 
MSDN - Converting an existing ASP.NET application to Windows Azure
Maarten Balliauw
 
Ad

More from Moaid Hathot (20)

PPTX
Demystifying C#'s Interpolated string Handlers
Moaid Hathot
 
PPTX
Azure Bicep for Developers
Moaid Hathot
 
PPTX
Demystifying C#'s Interpolated string Handlers
Moaid Hathot
 
PPTX
ChatGPT and Beyond Using AI Tools to Enhance Academic Researc
Moaid Hathot
 
PPTX
Dapr- Distributed Application Runtime
Moaid Hathot
 
PPTX
What's coming in C# 11
Moaid Hathot
 
PPTX
Introduction to .NET MAUI
Moaid Hathot
 
PPTX
What's new in C# 11
Moaid Hathot
 
PPTX
Best of build 2021 - C# 10 & .NET 6
Moaid Hathot
 
PPTX
What's new in c# 10
Moaid Hathot
 
PDF
Developer cloud roadmap keynote
Moaid Hathot
 
PPTX
What's new in c# 10
Moaid Hathot
 
PPTX
About me - Atidna
Moaid Hathot
 
PPTX
About me - Rothschild Partnerships
Moaid Hathot
 
PPTX
What's coming in c# 9.0
Moaid Hathot
 
PPTX
What's Coming in C# 9.0
Moaid Hathot
 
PPTX
Introduction to azure
Moaid Hathot
 
PPTX
Distributed Application Runtime (Dapr) - Azure Israel 2020
Moaid Hathot
 
PPTX
Dapr: distributed application runtime
Moaid Hathot
 
PPTX
Dapr: the glue to your microservices
Moaid Hathot
 
Demystifying C#'s Interpolated string Handlers
Moaid Hathot
 
Azure Bicep for Developers
Moaid Hathot
 
Demystifying C#'s Interpolated string Handlers
Moaid Hathot
 
ChatGPT and Beyond Using AI Tools to Enhance Academic Researc
Moaid Hathot
 
Dapr- Distributed Application Runtime
Moaid Hathot
 
What's coming in C# 11
Moaid Hathot
 
Introduction to .NET MAUI
Moaid Hathot
 
What's new in C# 11
Moaid Hathot
 
Best of build 2021 - C# 10 & .NET 6
Moaid Hathot
 
What's new in c# 10
Moaid Hathot
 
Developer cloud roadmap keynote
Moaid Hathot
 
What's new in c# 10
Moaid Hathot
 
About me - Atidna
Moaid Hathot
 
About me - Rothschild Partnerships
Moaid Hathot
 
What's coming in c# 9.0
Moaid Hathot
 
What's Coming in C# 9.0
Moaid Hathot
 
Introduction to azure
Moaid Hathot
 
Distributed Application Runtime (Dapr) - Azure Israel 2020
Moaid Hathot
 
Dapr: distributed application runtime
Moaid Hathot
 
Dapr: the glue to your microservices
Moaid Hathot
 

Recently uploaded (20)

PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Modernizing your data center with Dell and AMD
Principled Technologies
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Modernizing your data center with Dell and AMD
Principled Technologies
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Approach and Philosophy of On baking technology
30anthuong17
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Encapsulation theory and applications.pdf
gurumoop
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 

Intro to Azure Static Web Apps

  • 1. HackaLearn Azure Static Web Apps Moaid Hathot Senior Software Engineer | ex-Azure MVP Moaid.Hathot@outlook.com @MoaidHathot https://moaid.codes https://meetup.com/Code-Digest
  • 2. Web GET index.html Index.html, css, images, etc… Node.js, ASP.NET, Django, Flacon, etc… Static Files
  • 3. Web GET index.html Index.html, css, images, etc… Node.js, ASP.NET, Django, Flacon, etc… Server-side rendering
  • 4. Web GET index.html Index.html, css, images, etc… Node.js, ASP.NET, Django, Flacon, etc… Static Files SPA
  • 5. Web GET index.html Index.html, css, images, etc… Storage, CDN Static Files SPA HTTP WEB API Node.js, ASP.NET, Django, Flacon, etc… SPA
  • 6. Web GET index.html Index.html, css, images, etc… Storage, CDN Static Files SPA HTTP WEB API C#, JavaScript, Python, TypeScript, Java, PowerShell, F# SPA
  • 7. Web – SWA Reverse Proxy Storage, CDN Azure Functions
  • 8.  Create a Azure Static Web App in Angular  Use Azure Functions with TypeScript  Use Cosmos Db as a Database  Monitoring via Application Insights Azure Static Web Apps
  • 9. About Moaid Hathot  Senior software Engineer @ Microsoft  Ex-Azure MVP  Software Craftsmanship advocate  Clean Coder  Co-Founder of Code.Digest();  https://meetup.com/Code-Digest Moaid Hathot
  • 10.  Secure via a reverse-proxy  Web hosting  static content like HTML, CSS, JavaScript, and images  Globally distributed static content  Custom Domains  Integrated API support (Azure Functions)  Support Authentication & Authorization  Support routing  Automatically builds and deploys full stack web apps  CI & CD using Github and Azure DevOps Azure Static Web Apps
  • 12.  Supported Frameworks  Angular  React  Svelte  Blazor  Vue.js  Vanilla JS/TS  More… Azure Static Web Apps
  • 13.  Serverless  Pay for use  Based on triggers  Supports a variety of programming languages  C#, JavaScript, TypeScript, Python, PowerShell, F#  Easily scalable Azure Functions
  • 14.  Fully managed NoSQL database  Supports multiple APIs  SQL, Table, MongoDB, Cassandra, Gremlin (graph)  Single-digit millisecond response time  New Serverless offering Cosmos DB
  • 15.  Monitors live applications  Automatically detect performance anomalies  Powerful Analytics tool  Monitor and analyze telemetry  Supports custom logs Application Insights
  • 16. Demo  Create your first Angular-based Azure Static Web App  Implement a simple Hackathon project management system  Use Cosmos DB as the backing store  Configure Authentication and Authorization  Monitor the app via Application Insights https://github.com/MoaidHathot/HackaLearn-SWA-Angular-Demo
  • 17.  Globally distributed static content  Integrated API support (Azure Functions)  Support Authentication & Authorization  Automatically builds and deploys full stack web apps  Easily scaled Summary
  • 18. HackaLearn Thank You Moaid Hathot Senior Software Engineer | ex-Azure MVP Moaid.Hathot@outlook.com @MoaidHathot https://moaid.codes https://meetup.com/Code-Digest https://github.com/MoaidHathot/HackaLearn-SWA-Angular-Demo