SlideShare a Scribd company logo
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
Ad

Recommended

Azure Database Services for MySQL PostgreSQL and MariaDB
Azure Database Services for MySQL PostgreSQL and MariaDB
Nicholas Vossburg
 
Apache Kafka Architecture & Fundamentals Explained
Apache Kafka Architecture & Fundamentals Explained
confluent
 
Aws VPC
Aws VPC
Abhishek Amralkar
 
Migrate to Microsoft Azure with Confidence
Migrate to Microsoft Azure with Confidence
David J Rosenthal
 
Amazon SageMaker 모델 학습 방법 소개::최영준, 솔루션즈 아키텍트 AI/ML 엑스퍼트, AWS::AWS AIML 스페셜 웨비나
Amazon SageMaker 모델 학습 방법 소개::최영준, 솔루션즈 아키텍트 AI/ML 엑스퍼트, AWS::AWS AIML 스페셜 웨비나
Amazon Web Services Korea
 
Event Hub & Azure Stream Analytics
Event Hub & Azure Stream Analytics
Davide Mauri
 
SharePoint Online (365) vs SharePoint On-Premises
SharePoint Online (365) vs SharePoint On-Premises
Lior Zamir
 
Real-Life Use Cases & Architectures for Event Streaming with Apache Kafka
Real-Life Use Cases & Architectures for Event Streaming with Apache Kafka
Kai Wähner
 
Kafka presentation
Kafka presentation
Mohammed Fazuluddin
 
Microsoft Azure Technical Overview
Microsoft Azure Technical Overview
gjuljo
 
아름답고 유연한 데이터 파이프라인 구축을 위한 Amazon Managed Workflow for Apache Airflow - 유다니엘 A...
아름답고 유연한 데이터 파이프라인 구축을 위한 Amazon Managed Workflow for Apache Airflow - 유다니엘 A...
Amazon Web Services Korea
 
Amazon SageMaker 모델 빌딩 파이프라인 소개::이유동, AI/ML 스페셜리스트 솔루션즈 아키텍트, AWS::AWS AIML 스...
Amazon SageMaker 모델 빌딩 파이프라인 소개::이유동, AI/ML 스페셜리스트 솔루션즈 아키텍트, AWS::AWS AIML 스...
Amazon Web Services Korea
 
Amazon OpenSearch Deep dive - 내부구조, 성능최적화 그리고 스케일링
Amazon OpenSearch Deep dive - 내부구조, 성능최적화 그리고 스케일링
Amazon Web Services Korea
 
IoT Architectures for Apache Kafka and Event Streaming - Industry 4.0, Digita...
IoT Architectures for Apache Kafka and Event Streaming - Industry 4.0, Digita...
Kai Wähner
 
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
Amazon Web Services Korea
 
The Future of Data Science and Machine Learning at Scale: A Look at MLflow, D...
The Future of Data Science and Machine Learning at Scale: A Look at MLflow, D...
Databricks
 
Azure Active Directory | Microsoft Azure Tutorial for Beginners | Azure 70-53...
Azure Active Directory | Microsoft Azure Tutorial for Beginners | Azure 70-53...
Edureka!
 
Why Splunk Chose Pulsar_Karthik Ramasamy
Why Splunk Chose Pulsar_Karthik Ramasamy
StreamNative
 
Understanding Azure Networking Services
Understanding Azure Networking Services
InCycleSoftware
 
OVERVIEW OF FACEBOOK SCALABLE ARCHITECTURE.
OVERVIEW OF FACEBOOK SCALABLE ARCHITECTURE.
Rishikese MR
 
Introduction to Azure monitor
Introduction to Azure monitor
Praveen Nair
 
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Web Services Korea
 
Top 5 Event Streaming Use Cases for 2021 with Apache Kafka
Top 5 Event Streaming Use Cases for 2021 with Apache Kafka
Kai Wähner
 
Introduction to Google Compute Engine
Introduction to Google Compute Engine
Colin Su
 
Microsoft Azure and Windows Application monitoring
Microsoft Azure and Windows Application monitoring
Site24x7
 
AWS CDK in Practice
AWS CDK in Practice
Chulwoo Choi
 
Grafana Loki: like Prometheus, but for Logs
Grafana Loki: like Prometheus, but for Logs
Marco Pracucci
 
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
Amazon Web Services Korea
 
slides.pptx
slides.pptx
xejoji6654
 
Azure Static Web Apps
Azure Static Web Apps
Jen Looper
 

More Related Content

What's hot (20)

Kafka presentation
Kafka presentation
Mohammed Fazuluddin
 
Microsoft Azure Technical Overview
Microsoft Azure Technical Overview
gjuljo
 
아름답고 유연한 데이터 파이프라인 구축을 위한 Amazon Managed Workflow for Apache Airflow - 유다니엘 A...
아름답고 유연한 데이터 파이프라인 구축을 위한 Amazon Managed Workflow for Apache Airflow - 유다니엘 A...
Amazon Web Services Korea
 
Amazon SageMaker 모델 빌딩 파이프라인 소개::이유동, AI/ML 스페셜리스트 솔루션즈 아키텍트, AWS::AWS AIML 스...
Amazon SageMaker 모델 빌딩 파이프라인 소개::이유동, AI/ML 스페셜리스트 솔루션즈 아키텍트, AWS::AWS AIML 스...
Amazon Web Services Korea
 
Amazon OpenSearch Deep dive - 내부구조, 성능최적화 그리고 스케일링
Amazon OpenSearch Deep dive - 내부구조, 성능최적화 그리고 스케일링
Amazon Web Services Korea
 
IoT Architectures for Apache Kafka and Event Streaming - Industry 4.0, Digita...
IoT Architectures for Apache Kafka and Event Streaming - Industry 4.0, Digita...
Kai Wähner
 
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
Amazon Web Services Korea
 
The Future of Data Science and Machine Learning at Scale: A Look at MLflow, D...
The Future of Data Science and Machine Learning at Scale: A Look at MLflow, D...
Databricks
 
Azure Active Directory | Microsoft Azure Tutorial for Beginners | Azure 70-53...
Azure Active Directory | Microsoft Azure Tutorial for Beginners | Azure 70-53...
Edureka!
 
Why Splunk Chose Pulsar_Karthik Ramasamy
Why Splunk Chose Pulsar_Karthik Ramasamy
StreamNative
 
Understanding Azure Networking Services
Understanding Azure Networking Services
InCycleSoftware
 
OVERVIEW OF FACEBOOK SCALABLE ARCHITECTURE.
OVERVIEW OF FACEBOOK SCALABLE ARCHITECTURE.
Rishikese MR
 
Introduction to Azure monitor
Introduction to Azure monitor
Praveen Nair
 
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Web Services Korea
 
Top 5 Event Streaming Use Cases for 2021 with Apache Kafka
Top 5 Event Streaming Use Cases for 2021 with Apache Kafka
Kai Wähner
 
Introduction to Google Compute Engine
Introduction to Google Compute Engine
Colin Su
 
Microsoft Azure and Windows Application monitoring
Microsoft Azure and Windows Application monitoring
Site24x7
 
AWS CDK in Practice
AWS CDK in Practice
Chulwoo Choi
 
Grafana Loki: like Prometheus, but for Logs
Grafana Loki: like Prometheus, but for Logs
Marco Pracucci
 
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
Amazon Web Services Korea
 
Microsoft Azure Technical Overview
Microsoft Azure Technical Overview
gjuljo
 
아름답고 유연한 데이터 파이프라인 구축을 위한 Amazon Managed Workflow for Apache Airflow - 유다니엘 A...
아름답고 유연한 데이터 파이프라인 구축을 위한 Amazon Managed Workflow for Apache Airflow - 유다니엘 A...
Amazon Web Services Korea
 
Amazon SageMaker 모델 빌딩 파이프라인 소개::이유동, AI/ML 스페셜리스트 솔루션즈 아키텍트, AWS::AWS AIML 스...
Amazon SageMaker 모델 빌딩 파이프라인 소개::이유동, AI/ML 스페셜리스트 솔루션즈 아키텍트, AWS::AWS AIML 스...
Amazon Web Services Korea
 
Amazon OpenSearch Deep dive - 내부구조, 성능최적화 그리고 스케일링
Amazon OpenSearch Deep dive - 내부구조, 성능최적화 그리고 스케일링
Amazon Web Services Korea
 
IoT Architectures for Apache Kafka and Event Streaming - Industry 4.0, Digita...
IoT Architectures for Apache Kafka and Event Streaming - Industry 4.0, Digita...
Kai Wähner
 
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
Amazon Web Services Korea
 
The Future of Data Science and Machine Learning at Scale: A Look at MLflow, D...
The Future of Data Science and Machine Learning at Scale: A Look at MLflow, D...
Databricks
 
Azure Active Directory | Microsoft Azure Tutorial for Beginners | Azure 70-53...
Azure Active Directory | Microsoft Azure Tutorial for Beginners | Azure 70-53...
Edureka!
 
Why Splunk Chose Pulsar_Karthik Ramasamy
Why Splunk Chose Pulsar_Karthik Ramasamy
StreamNative
 
Understanding Azure Networking Services
Understanding Azure Networking Services
InCycleSoftware
 
OVERVIEW OF FACEBOOK SCALABLE ARCHITECTURE.
OVERVIEW OF FACEBOOK SCALABLE ARCHITECTURE.
Rishikese MR
 
Introduction to Azure monitor
Introduction to Azure monitor
Praveen Nair
 
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Redshift의 이해와 활용 (김용우) - AWS DB Day
Amazon Web Services Korea
 
Top 5 Event Streaming Use Cases for 2021 with Apache Kafka
Top 5 Event Streaming Use Cases for 2021 with Apache Kafka
Kai Wähner
 
Introduction to Google Compute Engine
Introduction to Google Compute Engine
Colin Su
 
Microsoft Azure and Windows Application monitoring
Microsoft Azure and Windows Application monitoring
Site24x7
 
AWS CDK in Practice
AWS CDK in Practice
Chulwoo Choi
 
Grafana Loki: like Prometheus, but for Logs
Grafana Loki: like Prometheus, but for Logs
Marco Pracucci
 
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
Amazon Web Services Korea
 

Similar to Intro to Azure Static Web Apps (20)

slides.pptx
slides.pptx
xejoji6654
 
Azure Static Web Apps
Azure Static Web Apps
Jen Looper
 
GlobalAzure2022-Azure-Static-Web-Apps.pptx
GlobalAzure2022-Azure-Static-Web-Apps.pptx
Kalpesh Satasiya
 
Azure Web Apps: What it is and how to get started
Azure Web Apps: What it is and how to get started
BelleHenry
 
Azure cloud for the web frontend developers
Azure cloud for the web frontend developers
Maxim Salnikov
 
JSNation.com - Azure Static Web Apps (SWA) with Azure DevOps
JSNation.com - Azure Static Web Apps (SWA) with Azure DevOps
Juarez Junior
 
Deploying your static web app to the Cloud
Deploying your static web app to the Cloud
Christoffer Noring
 
Azure web apps
Azure web apps
Vaibhav Gujral
 
Building a website without a webserver on Azure
Building a website without a webserver on Azure
Todd Whitehead
 
#SPSBurgh 2018 How to do #devops with the #SharePoint Framework #spfx
#SPSBurgh 2018 How to do #devops with the #SharePoint Framework #spfx
Vincent Biret
 
Azure staticwebapps
Azure staticwebapps
Udaiappa Ramachandran
 
Containers on azure web apps
Containers on azure web apps
Rajesh Kolla
 
Azure from Rookie to DevStart
Azure from Rookie to DevStart
Sajeetharan
 
Tokyo Azure Meetup #7 - Introduction to Serverless Architectures with Azure F...
Tokyo Azure Meetup #7 - Introduction to Serverless Architectures with Azure F...
Tokyo Azure Meetup
 
How Joomla and Microsoft are a Great Open Source Success
How Joomla and Microsoft are a Great Open Source Success
Cory Fowler
 
ASP.NET Core 1.0
ASP.NET Core 1.0
Ido Flatow
 
Azure App Services для создания бэкенда мобильных приложений. Parse Open Sour...
Azure App Services для создания бэкенда мобильных приложений. Parse Open Sour...
UA Mobile
 
Design and Configure Azure App Service Web Apps
Design and Configure Azure App Service Web Apps
Roy Kim
 
Creating a Documentation Portal
Creating a Documentation Portal
Steve Anderson
 
Getting started with development in azure
Getting started with development in azure
Jasjit Chopra
 
Azure Static Web Apps
Azure Static Web Apps
Jen Looper
 
GlobalAzure2022-Azure-Static-Web-Apps.pptx
GlobalAzure2022-Azure-Static-Web-Apps.pptx
Kalpesh Satasiya
 
Azure Web Apps: What it is and how to get started
Azure Web Apps: What it is and how to get started
BelleHenry
 
Azure cloud for the web frontend developers
Azure cloud for the web frontend developers
Maxim Salnikov
 
JSNation.com - Azure Static Web Apps (SWA) with Azure DevOps
JSNation.com - Azure Static Web Apps (SWA) with Azure DevOps
Juarez Junior
 
Deploying your static web app to the Cloud
Deploying your static web app to the Cloud
Christoffer Noring
 
Building a website without a webserver on Azure
Building a website without a webserver on Azure
Todd Whitehead
 
#SPSBurgh 2018 How to do #devops with the #SharePoint Framework #spfx
#SPSBurgh 2018 How to do #devops with the #SharePoint Framework #spfx
Vincent Biret
 
Containers on azure web apps
Containers on azure web apps
Rajesh Kolla
 
Azure from Rookie to DevStart
Azure from Rookie to DevStart
Sajeetharan
 
Tokyo Azure Meetup #7 - Introduction to Serverless Architectures with Azure F...
Tokyo Azure Meetup #7 - Introduction to Serverless Architectures with Azure F...
Tokyo Azure Meetup
 
How Joomla and Microsoft are a Great Open Source Success
How Joomla and Microsoft are a Great Open Source Success
Cory Fowler
 
ASP.NET Core 1.0
ASP.NET Core 1.0
Ido Flatow
 
Azure App Services для создания бэкенда мобильных приложений. Parse Open Sour...
Azure App Services для создания бэкенда мобильных приложений. Parse Open Sour...
UA Mobile
 
Design and Configure Azure App Service Web Apps
Design and Configure Azure App Service Web Apps
Roy Kim
 
Creating a Documentation Portal
Creating a Documentation Portal
Steve Anderson
 
Getting started with development in azure
Getting started with development in azure
Jasjit Chopra
 
Ad

More from Moaid Hathot (20)

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

Recently uploaded (20)

Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 

Intro to Azure Static Web Apps

  • 1. HackaLearn Azure Static Web Apps Moaid Hathot Senior Software Engineer | ex-Azure MVP [email protected] @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 [email protected] @MoaidHathot https://moaid.codes https://meetup.com/Code-Digest https://github.com/MoaidHathot/HackaLearn-SWA-Angular-Demo