🌐Static Web Apps Examples

  •     •     •     •     •     •     •     •     •     •     •  

This repository showcases a variety of examples, tutorials, and use cases of applications developed using different programming languages and frameworks, all hosted on Azure Static Web Apps.

If you have a real-world application in production and would like to share it, we invite you to contribute by opening an issue and then a pull request. If you would like to view examples at the production level, please refer to the designated section: Real World and Production examples with Azure Static Web Apps.

[!NOTE] Missing an application or specific example? Provide us with your feedback by opening an Issue and suggesting the inclusion of new examples.

Azure Static Web Apps + AI

Here you will find examples of intelligent (AI-Powered) applications running on Azure Static Web Apps, showcasing the diversity of scenarios and best practices for adopting AI integration in real-world projects.

#	Demo	Description
1	session-recommender	A session recommender for your next event. Try Live
2	create-your-own-chatgpt	An AI-powered chat application with RAG.
3	serverless-ai-chat	A Serverless AI Chat application.
4	crafting-dynamic-document-models-DI	Solution to improve the patient experience by automating the paper based registration process.
5	podcast-synopsis-generation	A Pipeline For Podcast Synopsis Generation (and more) With Azure OpenAI.
6	openai-assistant-function-calling	Serverless Azure OpenAI Assistant Quick Start Function Calling.

Azure Static Web Apps + Web Frameworks

Here you will find examples of applications built using a variety of Frameworks running on Azure Static Web Apps.

#	Demo	Description
1	svelte-shop-at-home	Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. Try Live
2	angular-shop-at-home	Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. Try Live
3	react-shop-at-home	Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. Try Live
4	vue-shop-at-home	Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. Try Live
5	vue.js-fullstack-todo-list	A todo e2e reference app
6	React-3Tier-todo-app	A sample Todo app to help you learn how to build a full-stack application with authentication and authorization

Azure Static Web Apps with JavaScript/Node.js

The following examples demonstrate how to create applications using JavaScript and Node.js, hosted on Azure Static Web Apps.

#	Demo	Description
1	nodejs-microservices	A sample application showing Node.js microservices usage with an Azure infrastructure.

Azure Static Web Apps with TypeScript/Node.js

The following examples demonstrate how to create applications using TypeScript and Node.js, hosted on Azure Static Web Apps.

#	Demo	Description
1	rest-graphql-todoMVC	REST & GraphQL TodoMVC Sample App Full Stack Implementation with Prisma.

Azure Static Web Apps with .NET and Blazor

The following examples demonstrate how to create applications using .NET and Blazor, hosted on Azure Static Web Apps.

#	Demo	Description
1	products-finder	A products finder implemented using Data API Builder.

Azure Static Web Apps with Python

The following examples demonstrate how to create applications using Python, hosted on Azure Static Web Apps.

#	Demo	Description
1	todo-application	A TODO blueprint placeholder frontend

Real World and Production Examples with Azure Static Web Apps

Here you will find examples of applications in production using Azure Static Web Apps, showcasing the diversity of scenarios and best practices for adopting this service in real-world projects.

#	Demo	Description
1	ngVikings 2020	Website for ngVikings conference. ngVikings is a non-profit, non-commercial, 100% community-driven event comprised of many Nordic Angular groups with more than 6500 active members in total. Try Live
2	Nitro Workshop	Online workshop built with Vuepress to learn how to build a backend using NestJS. This is a practical workshop where you'll learn "hands-on" by iteratively building an application from scratch using NestJS and Azure. Try Live
3	Peacock for Visual Studio Code Documentation	Peacock is a Visual Studio Code extension with 700,000+ installations. It subtly changes the color of your Visual Studio Code workspace. This is ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor. Try Live

🤝 Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

🚀 Get started now and take your app to the next level with Azure Static Web Apps!