AZURE STATIC WEB APPS
Agenda

Architecture

  • Jamstack, Blamstack
  • Azure Static Web Apps
  • Azure Functions
  • Cosmos DB

Implemented Sample

  • Blog app using Blazor WebAssembly
Agenda

Architecture

  • Jamstack, Blamstack
  • Azure Static Web Apps
  • Azure Functions
  • Cosmos DB

Implemented Sample

  • Blog app using Blazor WebAssembly
What is Jamstack?

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup“

— Mathias Biilmann (CEO & Co-founder of Netlify).

  • Use markup files and JavaScript to build dynamic applications that run on web browsers. They can be complemented with API services to get and post data. Since the backend only serves data requests rather than pages, we can make use of serverless architectures like Azure Functions or AWS Lambda. This may help lower the costs of the services on the Cloud.
  • For this application, I’m using BlamsTack, which is Blazor WebAssembly rather than a JavaScript framework like React, Angular, or Vue for the front end. Blazor WebAssembly runs the same way as JamStack applications, running on users’ machines while an API provides data that makes the application dynamic.
  • We can see a difference with server-hosted applications when refreshing pages at our application, on traditional ones it will go back to the server to request the page, download the content and display it, in a SPA app like Blazor it delivers app code that runs on the browser, and it builds the page itself. If we refresh the page, we are not calling the SPA, so the page doesn’t exist. To avoid that we use navigation fallback and we set it at wwwrootstaticwebapp.config.json file.
 
Azure Static Web Apps:

Introduced in 2021, they provide the following elements necessary to implement a JamStack/BlamStack:

  • Static file hosting for FE
  • Serverless functions for the API
  • Routing components to connect in a secure way FE and backend APIs

It also provides services like authentication and CI/CD.

 
Azure Functions:
  • They are serverless solutions focusing on specific functionality like events management, database changes, managing messages, or processing IoT data streams.
  • Equivalents at other Cloud providers are AWS Lambda, and Google App Engine, among others.
  • In the case of Static Web Apps, we can use managed inside the service functions, so they provide the API services
 
Overview: Introduction to Azure Static Web Apps

A simple introduction and a brief example of how to build a blog using static Web Apps, Azure functions, Cosmos DB, and Blazor WebAssembly with steps and visuals to learn how to do it yourself. There are links provided for your reference if you are interested in looking into it more deeply. I hope you enjoy it!