Part of the HackaLearn event from Angular Night's

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

11. 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