Azure Static Web Apps.

?Streamlined Hosting for Modern Web Applications

Azure Static Web Apps is a cutting-edge hosting service tailored for static web applications developed using various coding languages. With seamless GitHub integrations enabling automatic deployments to both production and staging environments, this service is rapidly gaining popularity among developers. While currently in public preview, it offers a user-friendly setup process and is poised to become a favored choice for developers in the near future.

What is Azure Static Web Apps?

?Azure Static Web Apps is a specialized hosting service designed explicitly for static web applications built on various coding languages. Essentially, it serves as an Azure App Service dedicated to static applications, offering straightforward setup and ease of use.

The service is deeply connected to a GitHub repository that houses the source code of the web application. Leveraging GitHub actions, it efficiently builds and deploys the static application to either the production environment or the staging environment. The production environment is anchored to a specific branch, while the staging environment dynamically adapts based on pull requests. Presently, the service allows only one active staging environment at a time.

Azure Static Web Apps operates in a manner akin to a regular App Service integrated with Azure DevOps. The following image succinctly illustrates the essence of this innovative hosting service.

Setting Up Azure Static Web Apps: Seamless GitHub Integration

To begin the process of setting up Azure Static Web Apps, you'll first need to have a GitHub repository where your service will be connected. If you're eager to explore the service and its capabilities, go ahead and create a GitHub repository before proceeding. This repository will be a crucial requirement for the next steps. Additionally, ensure that the master branch is published and readily available within the repository.

The actual creation of the Static Web App service can be done effortlessly through the Azure portal. Please note that as of writing this post, not all Azure regions fully support the service, given its current preview status. Nonetheless, you can still proceed with the setup using the available supported regions. Rest assured; Microsoft continues to expand the service's availability to a wider range of regions in the near future.

Now we can click Review + create and after few minutes we have Static Web App service set up for us. If everything went well then, we will see out Static Web App service running.

Configuring GitHub action

To change build definition we can open yml file shown in Static Web App overview. This file is available also in our source code repository. Example of build definition is here.

If everything went well then, it’s time to head over to GitHub and see under actions if our GitHub workflow is running. This workflow was automatically created by Static Web App service and it deploys application to production environment. After successful deployment we will see it under Environment section of service.

Click on Browse link to see static application running on Azure (For this lab I will use a sample portfolio website.)

Wrapping up

Azure Static Web Apps offers seamless integration between Azure App Service and Azure Static Website, making it an excellent choice for developers. Its GitHub integration through GitHub actions enables automatic deployments to production and staging environments. The platform-agnostic nature ensures compatibility with any code editor/IDE. Although it currently supports only one staging environment, it is continually evolving to meet the needs of applications in active development. Azure Static Web Apps is a versatile and user-friendly solution for modern web application hosting.