Welcome to the first edition of the Azure Static Web Apps Community! Every month, we’ll be sharing content created by the Technical Community, whether it’s articles, videos, or podcasts talking about Azure Static Web Apps.

Want to have your content featured on the TechCommunity in #ThisMonthInAzureStaticWebApps? Here’s how!

Create an article, video, podcast, or even an Open Source project that talks about or is related to Azure Static Web Apps.

Share your content on Twitter, LinkedIn, or Instagram 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 your content link there according to the month you’d like it to be featured.

Done! We’ll share your content on the Microsoft TechCommunity next month!

No matter what language you write in—whether it’s Portuguese, English, Spanish, French, German, or any other—we want to share your content!

If you’re using Azure Static Web Apps with another service or technology, feel free to share your content as well. It doesn’t matter what programming language you’re using. Whether it’s JavaScript, TypeScript, Python, Java, C#, Go, Rust, or others, we want to share your content!

One more thing: you don’t need to be an expert in Azure Static Web Apps to share your content. If you’re learning about the service and want to share your journey, feel free to do so!

Now, let’s dive into the content from July!

A Big Thank You!

Before we start sharing the content, we’d like to thank everyone who shared their work in July! You all are amazing!

Shared Content | July 2024

Let’s get into the content shared in July 2024!

Adding an API to an Azure hosted React Static Web App

Author: Janek Fellien

This article explains how to add an API to an Azure-hosted React Static Web App, setting up a development environment with SWA CLI and VS Code, creating an HTTP function in C#, and integrating the API with the React app to display data on the site.

Want to learn how to connect your React app to an API on Azure? Read the full article and find out how to add dynamic features to your project.

Link: Adding an API to an Azure hosted React Static Web App

Hosting Next.JS Static Websites on Azure Static Web App

Author: Parveen Singh

This article explains how to host static websites built with Next.js using Azure Static Web Apps, covering everything from setting up the GitHub repository to continuous deployment on Azure. It’s an ideal solution for developers looking for simplicity, security, and scalability in their websites.

Want to learn how to host your Next.js site simply and efficiently on Azure? Read the full article and discover how to leverage the features of Azure Static Web Apps!

Link: Hosting Next.JS Static Websites on Azure Static Web App

How to Deploy a React PWA to Azure Static Web Apps

Author: Petkir

This article teaches you how to deploy and automate the deployment process of a React PWA to Azure Static Web Apps using GitHub Actions and Azure DevOps, while also generating the necessary resources with Bicep.

Want to learn how to streamline the deployment of your React PWA apps? Read the full article and find out how to automate everything using GitHub Actions and Azure DevOps!

Link: How to Deploy a React PWA to Azure Static Web Apps

Azure Static Web App: Seamless Microsoft Entra (Azure AD) Integration with Angular

This video teaches how to integrate Microsoft Entra (Azure AD) with an Azure Static Web App using Angular, including SSO configuration, app registration, and displaying user information.

Want to learn how to integrate authentication with Microsoft Entra into your Angular apps? Watch now and master this essential integration for a unified login experience!

Link: Azure Static Web App: Seamless Microsoft Entra (Azure AD) Integration with Angular

Trimble Connect Workspace API 007 – Deployment

Author: LetsConstructIT YouTube Channel

This video demonstrates how to deploy a local app to the cloud using Azure Static Web Apps, making it accessible on the web and integrated with Trimble Connect, including setting up custom extensions.

Want to learn how to deploy your apps to the cloud simply and integrate with Trimble Connect? Watch the full video and find out how!

Link: Trimble Connect Workspace API 007 – Deployment

Blazor WASM Publishing to Azure Static Web Apps

Authors: Abdul Rahman | Regina Sharon

This article teaches you how to publish Blazor WebAssembly (WASM) apps to Azure Static Web Apps, covering everything from initial project setup to troubleshooting common issues like 404 errors on page refreshes. It also explains how to customize the build process and configure custom domains.

Want to learn how to publish your Blazor WASM apps to Azure simply and effectively? Read the full article and find out how to set everything up step by step, ensuring your app runs perfectly!

Link: Blazor WASM Publishing to Azure Static Web Apps

Azure Static Web Apps Community Standup: Create a RAG App with App Spaces

Authors: Skyler Hartle | Dheeraj Bandaru

This video introduces App Spaces, a new Azure tool that simplifies the creation and management of smart applications, especially when integrating Azure Static Web Apps and Azure Container Apps. During the session, they demonstrate how to create and deploy a Retrieval-Augmented Generation (RAG) app using a simple interface that connects GitHub repositories and automates the CI/CD process.

Discover how to simplify building smart apps with Azure App Spaces! Watch the full video and learn how to deploy a RAG app in minutes. Don’t miss this opportunity to elevate your cloud development skills!

Link: Azure Static Web Apps Community Standup: Create a RAG App with App Spaces

Serverless Single Page Application (Vue.js) mit Azure Static Web Apps

Author: Florian Lenz
Language: German

This article shows how to create and deploy a single-page application (SPA) using Vue.js and Azure Static Web Apps. It guides the reader from project creation to adding a serverless backend with Azure Functions, highlighting the ease of use and benefits of the serverless model for full-stack applications.

Want to learn how to deploy your Vue.js app to the cloud with Azure Static Web Apps and take advantage of serverless benefits? Read the full article and find out how to create and manage a full-stack app simply and efficiently!

Link: Serverless Single Page Application (Vue.js) mit Azure Static Web Apps

Conclusion

If you want to be featured in next month’s #ThisMonthInAzureStaticWebApps article, share your content on social media with the hashtag #AzureStaticWebApps and also in our official GitHub repository. We’re excited to share your content next month!

Remember, you don’t need to be an expert in Azure Static Web Apps to share your content. If you’re learning about the service and want to share your journey, feel free to do so!

See you in the next edition! 

​Microsoft Tech Community – Latest Blogs –Read More