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.
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. |
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   |
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.   |
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.    |
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.  |
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  |
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 |
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!
