We’re back with another edition of the Azure Static Web Apps Community! This month was filled with fantastic content created by members of our community. Whether you’re looking to expand your knowledge or just starting, this selection of articles, videos, and tutorials will guide you!

If you’d like to see your content shared here, simply follow the steps below, and who knows, you could be featured next month!

How to Participate

Create content about Azure Static Web Apps (article, video, project, or podcast).

Share it on social media using the hashtag #AzureStaticWebApps.

Also, share it in our official Azure Static Web Apps GitHub repository under the Discussions tab. You’ll find a topic called: This Month In Azure Static Web Apps. Share the link to your content there based on the month you want it to be shared.

That’s it! We’ll share your content on the Microsoft TechCommunity the following month! Now, let’s check out what our community brought in August 2024!

Thanks!

A huge thank you to each of you who contributed your content in August! You rock and are pushing this community forward! 🚀

Community Content Highlights – August 2024

Let’s dive into the content shared in August 2024!

Video: What are Azure Static Web Apps? | 1 Minute Overview

Author: Frankie Riviera

If you’re looking for a quick and straightforward explanation of what Azure Static Web Apps is, this 1-minute video by Frankie Riviera is perfect for you! It’s ideal for beginners who want a clear overview of its functionalities.

Article: Static Sites on Azure Storage vs Azure Static Web Apps

Author: John Kilmister

In this article, John Kilmister compares two Azure services for hosting static sites: Azure Storage and Azure Static Web Apps. While Azure Storage provides a simple and direct solution for storing and displaying static files, Azure Static Web Apps offer a more robust approach with features like integration with APIs via Azure Functions, automated CI/CD, and built-in authentication. The choice between the two services depends on the complexity of the site and the need for advanced features like route management, custom error handling, and APIs.

To better understand the differences between these services and find out which is the best option for your project, read the full article and clear up any doubts about choosing between Azure Storage and Azure Static Web Apps!

Article: Azure Static Web App vs Azure App Service?

Author: Kuntumallashivani

In this article, Kuntumallashivani provides a detailed comparison between two Azure services for hosting web applications: Azure Static Web Apps and Azure App Service. While Azure Static Web Apps excel as an optimized solution for static content with features like serverless API support, GitHub integration, and global content delivery, Azure App Service is a more flexible platform, ideal for dynamic applications that require multi-framework support and advanced scalability.

Choosing between these two options depends on your application’s complexity and the functionalities you need, like integration with other Azure services, custom domain management, or a simplified development workflow with high performance.

To better understand these differences and choose the best platform for your project, read the full article and discover which Azure service is most suitable for your needs!

Documentation: Relocate Azure Static Web Apps to another region Author: Microsoft

Author: Microsoft

In this other updated documentation, you’ll learn how to migrate an Azure Static Web App to another region. Migration can be useful for taking advantage of new regions, accessing specific services, or meeting governance requirements. The documentation covers prerequisites like verifying availability in the new region and adjusting permissions. Additionally, it explains how to prepare the app, updating endpoints, API keys, and deployment templates. The process includes redeploying in the new region and updating repositories to ensure a smooth transition.

If you need to move your Static Web App to another region, read this complete guide to ensure an efficient migration!

Link: Build an image analysis web app with TypeScript

Blog: Using Environment Variables in Azure Static Web Apps

Author: Poespas Blog

In this article, you’ll learn how to use environment variables in Azure Static Web Apps to protect sensitive data and ensure secure configuration. It explains how to create a settings.json file in the project, where variables will be stored in key-value pairs like DB_HOST, DB_USER, and DB_PASSWORD. The article also details how to access these variables in the code using the process.env object so your application can use them efficiently.

Additionally, it covers security best practices, such as using Azure Key Vault to store secret keys, Role-Based Access Control (RBAC) to restrict permissions, and continuous monitoring to identify potential security flaws.

If you want to enhance the scalability, security, and integrity of your web applications in Azure, this article offers a complete guide on how to implement and manage environment variables securely.

Want to know more? Read the full article to understand how to configure environment variables in Azure Static Web Apps and boost your application’s security!

Video: Create Azure Static Web Apps API with C# Http Trigger

Author: TechWebDots

In this video, you’ll learn how to create a simple API using C# Http and integrate it into your Azure Static Web App. It’s a great option for those working with Backend and want to explore the potential of this technology.

Article: Using AZD for faster incremental Azure Static Web App deployments in GitHub Actions

Author: John Reilly

In this article, John Reilly explains how to use the Azure Developer CLI (azd) to speed up incremental deployments using Azure Static Web Apps within GitHub Actions. The author highlights the improvements brought by azd version 1.4, which allows skipping infrastructure reprovisioning when there are no changes, reducing deployment time from 3 minutes to 20 seconds.

The article also covers the necessary changes to project configuration files, such as azure.yml and main.bicep, to ensure that azd works optimally. Additionally, it explains how to replace the az deployment group create command with azd provision in the GitHub Actions

workflow, simplifying the deployment process and using environment variables for authentication and parameterization.

With these configurations, the article shows how to significantly accelerate infrastructure deployment time without altering the method for deploying the application code, allowing for a gradual transition to full use of azd.

Want to know how to optimize your Azure Static Web Apps deployments and save time in your CI/CD pipelines? Read the full article and discover all the details about these performance improvements!

Documentation: Step 3 – Deploy the search-enabled .NET website

Author: Microsoft

In this other documentation, you’ll learn how to deploy a .NET application with Azure AI Search, using Azure Static Web Apps. The solution includes a front-end in React and a backend API, managed with Azure Functions for search operations.

The tutorial starts with creating an Azure Static Web Apps resource in Visual Studio Code using an extension, where you’ll configure the environment, create resources in Azure, and prepare the GitHub workflow for continuous deployment. Then, you’ll add the necessary environment variables, such as API keys, in the Azure portal to ensure search integration.

The troubleshooting section guides you on identifying and fixing deployment failures, from GitHub Actions errors to configuration issues in the front-end or API. The documentation also includes detailed instructions on how to clean up created resources and delete the resource group in Azure.

If you’re looking to implement a powerful search solution in your .NET application, read this documentation now to understand the step-by-step process!

Link: Step 3 – Deploy the search-enabled .NET website

Blog: Blazor WASM in Azure Static Web Apps 404 when authenticating with Entra ID

Author: Marius Solbakken

This article addresses how to resolve the 404 error that occurs in an Azure Static Web App using Blazor WASM and Entra ID when attempting to redirect for authentication/login. The problem occurs because the web.config file, common in Blazor WASM projects, is incompatible with Azure Static Web Apps.

The proposed solution is simple: just add a staticwebapp.config.json file in the project’s wwwroot folder. This file should contain the following configuration: { “navigationFallback”: { “rewrite”: “/index.html” } }, which redirects all navigation to index.html, resolving the redirection and authentication issue.

If you’d like to understand more about this configuration and how to fix the redirection error in your Blazor WASM applications hosted on Azure, read the full article and discover how to apply this solution!

Blog: Deploy a Highly Available Static Website on Azure Using Terraform

Author: Baivab Mukhopadhyay

In this article, it explains how to host a highly available static site on Azure using Terraform. There are several options for hosting static sites on Azure, such as Azure Blob Storage, Azure Static Web Apps, Azure App Service, Azure CDN, and Azure Functions. However, the best choice for ensuring high availability is to use a combination of Azure Front Door with an Azure Blob Storage account, providing a reliable and cost-effective solution for hosting HTML, CSS, and JavaScript files.

For Single Page Applications (SPA), the process is simplified as only the index.html file needs to be loaded initially, while the frontend framework handles rendering components and making API calls.

Instead of manually creating this infrastructure through the Azure portal, using Terraform is recommended. Terraform, an Infrastructure as Code (IaC) tool, automates and simplifies the creation and management of cloud resources, allowing reuse, versioning, and sharing of configuration files.

If you want to learn more about configuring a highly available static site on Azure and how Terraform can optimize this process, read the full article and discover how to apply these practices to your project!

Video: Add Custom Domain to Azure Static Web App | 4 Minute Tutorial

Author: Azure Innovation Station

In this video, the presenter teaches how to add a custom domain to an Azure Static Web App in four minutes. They already have a static web app created and use an external domain from Namecheap. To configure the domain, they generate a TXT record to validate the domain ownership in Azure. After validation, they create an alias record in Namecheap to point the custom domain to the Azure Static Web App. The process is completed successfully, allowing the site to be accessed through the new domain.

Want to know more? Watch the full video and learn how to set up your custom domain on Azure!

Video: Okta + Azure Static Web Apps: Seamless Authentication for Angular Developers

Author: Sparrow Note

The video demonstrates how to authenticate an Azure Static Web App using Okta, an identity and access management provider. It teaches how to create a static web app on Azure’s Standard plan, configure Okta for login and logout, and integrate Okta credentials into the application. The process also includes creating a release pipeline in Azure DevOps to deploy the application and test the login flow, verifying user details and cookies after authentication.

Learn more about how to integrate Okta into your project for secure and efficient authentication!

Documentation: Data API builder and Azure SQL database quickstart

Author: Microsoft

This incredible tutorial demonstrates how to create a Blazor Web Assembly application that uses the Data API builder to connect to the Azure SQL database. The application leverages Azure Static Web Apps to host the front-end and integrates other Azure services such as Azure Functions for business logic and Azure Storage for metadata. The tutorial teaches how to provision and configure all the necessary resources using Azure Developer CLI and how to set up CI/CD pipelines for continuous deployment.

If you want to learn how to build applications using Azure Static Web Apps and other Azure resources, check out the complete tutorial!

Link: Data API builder and Azure SQL database quickstart

Video: Make a blog site with Astro, Frontmatter CMS, and Azure Static Web Apps

Author: Graybush Labs

The video presents a demonstration of how to create a blog using Astro, Frontmatter CMS, and Azure Static Web Apps. The author chose these tools for their simplicity and efficiency in creating static sites, with Astro acting as a flexible framework and Frontmatter CMS allowing content management directly in Visual Studio Code without the need for a database. The site is deployed via Azure Static Web Apps, with integration to GitHub for automated deployment. The author highlights the ease of the process and invites viewers to give feedback and engage in the discussion.

Explore these tools and see how they can optimize your next project!

Azure Functions Community Standup – Performance testing and cost optimizing HTTP function apps

Author: Azure Developers YouTube Channel

In this Azure Functions Community Standup, it was presented how to optimize performance and reduce costs of HTTP applications by integrating Azure Load Testing with Azure Functions. The highlight was the ease of performing large-scale load tests directly in the Azure Functions portal, helping developers identify performance bottlenecks and adjust infrastructure as needed. Additionally, the new Flex Consumption plan and the Performance Optimizer tool were demonstrated to test different scalability and concurrency configurations, optimizing performance and costs.

The event also explored how to integrate these tools with Azure Static Web Apps, providing a complete solution for hosting your application’s front-end and using Azure Functions to handle business logic on the backend, ensuring that your applications can scale efficiently and cost-effectively.

If you want to learn how to improve performance and optimize costs in your applications with Azure Static Web Apps and Azure Functions, check out the full standup and explore these solutions!

Video: Building Production Ready Infrastructure on Azure with ARM Templates Bicep Terraform workshop 2

Author: Igor Iric

In this workshop titled “Building Production Ready Infrastructure on Azure with ARM Templates Bicep Terraform workshop 2,” it was discussed how to use ARM Templates, Bicep, and Terraform to automate cloud infrastructure deployment using the Infrastructure as Code (IaC) concept. The focus was on creating production-ready infrastructure in Microsoft Azure, covering virtual networks, security groups, and services like Azure Functions, Azure Cosmos DB, and Service Bus.

The practical demonstration included using GitHub Actions to automate the creation and deployment of applications like Azure Static Web Apps and App Services, showing how to integrate the front-end and back-end seamlessly, as well as monitor performance with Application Insights. Additionally, the speaker detailed the use of Bicep as an optimized solution for Azure-focused projects, comparing its advantages with Terraform, which is more cloud-agnostic.

If you’d like to learn how to implement robust automations in Azure projects using ARM Templates, Bicep, or Terraform, and ensure your infrastructure is production-ready, explore the complete workshop and see these tools in action!

Conclusion

Enjoyed this month’s content? There’s much more to come! If you want to see your article or video in the next highlights, don’t forget to share on social media and participate in our official GitHub repository. Maybe your work will be featured in our next edition?

Stay tuned and keep exploring what Azure Static Web Apps has to offer!

See you next month! 🚀😎

​Microsoft Tech Community – Latest Blogs –Read More