Building with Azure Static Web Apps

Launched at Microsoft Build in 2021, Azure Static Web Apps (SWA) takes the source code to global availability, allowing developer to build apps while Azure Static Web Apps automatically builds and hosts the application(s). Since then, they’ve made the service “GA” (generally available) and currently support two plans. The free plan allows developers to get started at no cost, while the standard plan includes all the free features along with the ability to customize functionalities.

Static Web App service is connected to GitHub repository where source code of web application is hosted. Developers also have the ability to have production and staging environments, depending on they have set up the code repository. The Production environment is based on a concrete branch while the Staging environment has a changing URL and is based on pull requests. SWAs are commonly built using libraries and frameworks like Angular, React, Svelte, or Vue. These applications include HTML, CSS, JavaScript, and image assets that make up the application. Under a traditional web server architecture, these files are served from a single server. SWA applications place static assets in an optimized server and makes them available in multiple servers. SWA also hosts your APIs using Azure Functions.

Essentially a Platform as a Service (PaaS) option, Azure SWA comes with several features as listed below. Post GA, the list of features and functionalities has considerably grown:

  • Fast creation of a GitHub Action Workflow
  • Automatic provisioning of staging environments
  • Free SSL/ TLS Certificates for an auto-generated domain name
  • Association of custom domains
  • Easy integration of Authentication and Authorization capabilities
  • Web hosting and global access for static content
  • Integrated API support
  • First-class GitHub and Azure DevOps integration
  • Custom domains to provide branded customizations
  • Seamless security model with a reverse proxy
  • Role-based authorization
  • Back-end routing rules giving full control over the content and routes

Not just for developers
Azure Static Web Apps have been created not just for developers, but for everyone. They are especially great for non-developers because they are so simple to set up and get started. Anyone can take advantage of SWA’s static web site frameworks like Hugo or Jekyll and build frameworks and websites for visitors without any complicated configuration.

Visual Studio Code Extension
The Visual Studio (VS) Code extension helps developers manage their Azure Static Web Apps from within the code without leaving, while also offering a single pane of glass. Using the VS Code, which has rapidly become a popular development environment, developers can build, verify, and then push their update to GitHub, which automatically updates your Azure Static Web App. If you already have a project, you can deploy it very easily. Following are examples of some of the supported frameworks:

  • Angular
  • React
  • Vue
  • Blazor
  • Web (App No Framework)

Blob Storage
For developers already familiar with Azure Blob Storage, it will be much easier for them to use the static websites feature of Azure Blob Storage. When they enable the static website functionality, it creates a $web blob container in the Azure Storage Account.
Any files that are available in the $web container can be served up through a web browser, by using a new URL endpoint that is available to all assets stored in the container. But unlike Static Web Apps, there is no additional functionality for Single Page Applications, and there are simple, straightforward features and functions that easily help host static web assets and expose them to the internet.

We can say that while Azure Static Web Apps provide a turnkey approach for Single Page Applications, Static Websites on Azure Storage require some additional work.

Building with Azure Static Web Apps
Azure Static Web Apps can host almost any flavor of static web app. Due to the fact that they are linked to a GitHub repository, these websites automatically update the site. Moreover, they are fully scalable which means developers can quickly roll out a concept and then scale it up to a production solution. However, before a developer begins creating using Azure Static Web Apps, the following tools are a prerequisite:

  • A Visual Studio account and Code
  • An Azure Account
  • Sample React Application
  • Azure Account extension and Azure Static Web Apps extension for VS Code
  • A GitHub account and repository for react application

Security
It is easier to handle expansion in Azure Static Web Apps, because developers can add authentication with Active Directory or OpenID Connect. They can easily add APIs using Azure Functions, enable Application Insights to monitor API requests, failures, and tracing information, and also bring their own domain name when you are ready.

Conclusion
Azure Static Web Apps are an excellent and easy-to-use tool for web designers and developers of any skill level and can be used for anything from a single page to a full-blown site. The features and functionalities are simple and straightforward. Beyond the basic functions, there are further levels of functionality to explore. For the full DevOps experience, developers can use GitHub branches and pull requests to create up to three staged environments, which are available on a public URL, so that they can review production changes with their collaboration partners. To understand more about Azure Static Web Apps, you can find tons of information on the documentation site at Azure Static Web Apps documentation | Microsoft Docs.