{"id":18817015,"url":"https://github.com/microsoft/static-web-apps-examples","last_synced_at":"2025-04-12T19:50:03.152Z","repository":{"id":38962567,"uuid":"262150783","full_name":"microsoft/static-web-apps-examples","owner":"microsoft","description":"A community showcase of projects built with Azure Static Web Apps 🎉 ","archived":false,"fork":false,"pushed_at":"2024-11-07T07:05:25.000Z","size":31563,"stargazers_count":144,"open_issues_count":1,"forks_count":89,"subscribers_count":33,"default_branch":"main","last_synced_at":"2025-04-12T19:49:58.572Z","etag":null,"topics":["angular","azure","azure-static-web-apps","dotnet","gatsby","go","java","javascript","nodejs","python","react","static-site-generator","stenciljs","svelte","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-07T20:23:25.000Z","updated_at":"2025-04-04T02:04:40.000Z","dependencies_parsed_at":"2024-11-07T08:18:56.388Z","dependency_job_id":"b6b51f57-087f-41a7-9551-2960e546f0c8","html_url":"https://github.com/microsoft/static-web-apps-examples","commit_stats":null,"previous_names":["microsoft/static-web-apps-examples"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fstatic-web-apps-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fstatic-web-apps-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fstatic-web-apps-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fstatic-web-apps-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/static-web-apps-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625501,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","azure","azure-static-web-apps","dotnet","gatsby","go","java","javascript","nodejs","python","react","static-site-generator","stenciljs","svelte","typescript","vue"],"created_at":"2024-11-08T00:08:40.344Z","updated_at":"2025-04-12T19:50:03.122Z","avatar_url":"https://github.com/microsoft.png","language":null,"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e🌐Static Web Apps Examples\u003c/h1\u003e\n\n  [\u003cimg src=\"media/icons/ai-studio.svg\" alt=\"OpenAI\" width=\"24\" height=\"24\" /\u003e ](#azure-static-web-apps--ai)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)](#azure-static-web-apps--web-frameworks)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![Svelte](https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge\u0026logo=svelte\u0026logoColor=FF3E00)](#azure-static-web-apps--web-frameworks)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge\u0026logo=vue.js\u0026logoColor=4FC08D)](#azure-static-web-apps--web-frameworks)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white)](#azure-static-web-apps--web-frameworks)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)](#azure-static-web-apps-with-javascriptnodejs)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](#azure-static-web-apps-with-typescriptnodejs)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)](#azure-static-web-apps-with-javascriptnodejs)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![.NET](https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge\u0026logo=.net\u0026logoColor=white)](#azure-static-web-apps-with-net-and-blazor)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n  [![Python](https://img.shields.io/badge/Python-3776AB?style=for-the-badge\u0026logo=python\u0026logoColor=white)](#azure-static-web-apps-with-python)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![Java](https://img.shields.io/badge/Java-ED8B00?style=for-the-badge\u0026logo=openjdk\u0026logoColor=white)](#azure-static-web-apps-with-java)\n   \u003cspan\u003e\u0026nbsp;\u0026nbsp;•\u0026nbsp;\u0026nbsp;\u003c/span\u003e\n   [![Go](https://img.shields.io/badge/Go-00ADD8?style=for-the-badge\u0026logo=go\u0026logoColor=white)](#azure-static-web-apps-with-go)\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"media/images/appservicestatic.jpg\" alt=\"Azure Static Web Apps\" /\u003e\n\u003c/p\u003e\n\nThis 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](https://learn.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-154160-juliamuiruri)**.\n\nIf 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](#real-world-and-production-examples-com-azure-static-web-apps).\n\n\u003e [!NOTE]\n\u003e Missing an application or specific example? Provide us with your feedback by opening an Issue and suggesting the inclusion of new examples.\n\n## Azure Static Web Apps + AI\n\nHere 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.\n\n| # | Demo                 | Description |\n|---| -------------------- | ----------- |\n| 1 | [session-recommender](https://github.com/Azure-Samples/azure-sql-db-session-recommender-v2) | A session recommender for your next event. \u003cbr\u003e \u003cimg src=\"media/icons/openai-logomark.png\" alt=\"OpenAI\" width=\"18\" /\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/SQL.svg\" alt=\"Azure SQL\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/dab-logo.png\" alt=\"Data API Builder\" width=\"18\" height=\"19\" /\u003e \u003cbr\u003e[Try Live](https://ai.microsofthq.vslive.com/)        |\n| 2 | [create-your-own-chatgpt](https://github.com/Azure-Samples/azure-openai-rag-workshop) | An AI-powered chat application with RAG. \u003cbr\u003e \u003cimg src=\"media/icons/aoi.svg\" alt=\"Azure OpenAI\" width=\"15\" height=\"19\" /\u003e \u003cimg src=\"media/icons/nodejs.png\" alt=\"Nodejs\"  width=\"16\" height=\"18\" /\u003e  \u003cimg src=\"media/icons/fastify-logo.png\" alt=\"Fastify\" width=\"23\" /\u003e \u003cimg src=\"media/icons/langchainjs.png\" alt=\"Langchain.js\" width=\"29\" /\u003e |\n| 3 | [serverless-ai-chat](https://github.com/Azure-Samples/serverless-chat-langchainjs)  | A Serverless AI Chat application. \u003cbr\u003e \u003cimg src=\"media/icons/ollama.png\" alt=\"Ollama\" height=\"17\" /\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/cosmos.svg\" alt=\"Azure CosmosDB\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/langchainjs.png\" alt=\"Langchain.js\" width=\"23\" /\u003e        |\n| 4 | [crafting-dynamic-document-models-DI](https://github.com/Azure-Samples/azure-doc-intelligence-dynamic-models-patient) | Solution to improve the patient experience by automating the paper based registration process. \u003cbr\u003e \u003cimg src=\"media/icons/cosmos.svg\" alt=\"Azure CosmosDB\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/document-intelligence.svg\" alt=\"Azure Document Intelligence\" width=\"15\" height=\"15\" /\u003e        |\n| 5 | [podcast-synopsis-generation](https://github.com/Azure-Samples/podcast-synopsis-generation-openai) | A Pipeline For Podcast Synopsis Generation (and more) With Azure OpenAI. \u003cbr\u003e \u003cimg src=\"media/icons/openai-logomark.png\" alt=\"OpenAI\" width=\"16\" /\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"18\" height=\"18\" /\u003e  \u003cimg src=\"media/icons/cognitive-services.svg\" alt=\"Azure Cognitive services\" width=\"18\" height=\"18\" /\u003e         |\n| 6 | [openai-assistant-function-calling](https://github.com/Azure-Samples/azure-openai-assistant-javascript) | Serverless Azure OpenAI Assistant Quick Start Function Calling. \u003cbr\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"18\" height=\"18\" /\u003e   \u003cimg src=\"media/icons/aoi.svg\" alt=\"Azure OpenAI\" width=\"16\" height=\"16\" /\u003e       |\n\n## Azure Static Web Apps + Web Frameworks\n\nHere you will find examples of applications built using a variety of Frameworks running on Azure Static Web Apps.\n\n| # | Demo                 | Description |\n|---| -------------------- | ----------- |\n| 1 | [**svelte**-shop-at-home](https://github.com/azure-template-resources/shopathome-svelte) | Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. \u003cbr\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/fastify-logo.png\" alt=\"Fastify\" width=\"23\" /\u003e \u003cbr\u003e  [Try Live](https://svelte.shopathome.dev/home)        |\n| 2 | [**angular**-shop-at-home](https://github.com/azure-template-resources/shopathome-angular) | Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. \u003cbr\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/fastify-logo.png\" alt=\"Fastify\" width=\"23\" /\u003e \u003cbr\u003e [Try Live](https://angular.shopathome.dev/home)        |\n| 3 | [**react**-shop-at-home](https://github.com/azure-template-resources/shopathome-react) | Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. \u003cbr\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/fastify-logo.png\" alt=\"Fastify\" width=\"23\" /\u003e \u003cbr\u003e [Try Live](https://react.shopathome.dev/home)        |\n| 4 | [**vue**-shop-at-home](https://github.com/azure-template-resources/shopathome-vue) | Shop at Home app that allows customers to securely add, edit, view, and remove items such as food and household needs from their list. \u003cbr\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/fastify-logo.png\" alt=\"Fastify\" width=\"23\" /\u003e \u003cbr\u003e [Try Live](https://react.shopathome.dev/home)        |\n| 5 | [**vue.js**-fullstack-todo-list](https://github.com/Azure-Samples/azure-sql-db-fullstack-serverless-kickstart) | A todo e2e reference app \u003cbr\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/SQL.svg\" alt=\"Azure SQL\" width=\"18\" height=\"18\" /\u003e           |\n| 6 | [**React**-3Tier-todo-app](https://github.com/azure-template-resources/todo-nodejs-pgsql-googleAuth) |  A sample Todo app to help you learn how to build a full-stack application with authentication and authorization \u003cbr\u003e \u003cimg src=\"media/icons/nodejs.png\" alt=\"Nodejs\"  width=\"16\" height=\"18\" /\u003e \u003cimg src=\"media/icons/postgresql.svg\" alt=\"PostgreSQL DB\"  width=\"16\" height=\"18\" /\u003e \u003cimg src=\"media/icons/google-auth.png\" alt=\"Google Authentication\"  width=\"16\" height=\"18\" /\u003e            |\n\n\n## Azure Static Web Apps with JavaScript/Node.js\n\nThe following examples demonstrate how to create applications using JavaScript and Node.js, hosted on Azure Static Web Apps.\n\n| # | Demo                 | Description |\n|---| -------------------- | ----------- |\n| 1 | [nodejs-microservices](https://github.com/Azure-Samples/nodejs-microservices) | A sample application showing Node.js microservices usage with an Azure infrastructure. \u003cbr\u003e \u003cimg src=\"media/icons/icons8-vite.svg\" alt=\"Vite\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/nodejs.png\" alt=\"Nodejs\"  width=\"16\" height=\"18\" /\u003e \u003cimg src=\"media/icons/nestjs.png\" alt=\"Nestjs\"  width=\"16\" height=\"18\" /\u003e \u003cimg src=\"media/icons/fastify-logo.png\" alt=\"Fastify\" width=\"23\" /\u003e  |\n\n\n## Azure Static Web Apps with TypeScript/Node.js\n\nThe following examples demonstrate how to create applications using TypeScript and Node.js, hosted on Azure Static Web Apps.\n\n| # | Demo                 | Description |\n|---| -------------------- | ----------- |\n| 1 | [rest-graphql-todoMVC](https://github.com/Azure-Samples/azure-sql-db-prisma) | REST \u0026 GraphQL TodoMVC Sample App Full Stack Implementation with Prisma. \u003cbr\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/SQL.svg\" alt=\"Azure SQL\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/vuejs.png\" alt=\"Vuejs\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/prisma.webp\" alt=\"Prisma\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/github-actions.png\" alt=\"GitHub Actions\" width=\"18\" height=\"18\" /\u003e    |\n\n## Azure Static Web Apps with .NET and Blazor\n\nThe following examples demonstrate how to create applications using .NET and Blazor, hosted on Azure Static Web Apps.\n\n| # | Demo                 | Description |\n|---| -------------------- | ----------- |\n| 1 | [products-finder](https://github.com/Azure-Samples/dab-azure-cosmos-db-nosql-quickstart) | A products finder implemented using Data API Builder. \u003cbr\u003e \u003cimg src=\"media/icons/Blazor.png\" alt=\"Blazor\"  width=\"16\" height=\"18\" /\u003e \u003cimg src=\"media/icons/AzureFunctionsApp.svg\" alt=\"Azure Functions\" width=\"19\" height=\"18\" /\u003e \u003cimg src=\"media/icons/cosmos.svg\" alt=\"Azure CosmosDB\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/dab-logo.png\" alt=\"Data API Builder\" width=\"18\" height=\"19\" /\u003e    |\n\n## Azure Static Web Apps with Python\n\nThe following examples demonstrate how to create applications using Python, hosted on Azure Static Web Apps.\n\n| # | Demo                 | Description |\n|---| -------------------- | ----------- |\n| 1 | [todo-application](https://github.com/Azure-Samples/todo-python-mongo-swa-func) | A TODO blueprint placeholder frontend \u003cbr\u003e \u003cimg src=\"media/icons/cosmos.svg\" alt=\"Azure CosmosDB\" width=\"18\" height=\"18\" /\u003e \u003cimg src=\"media/icons/fastapi.svg\" alt=\"FastAPI\" width=\"18\" height=\"18\" /\u003e    |\n\n\n# Real World and Production Examples with Azure Static Web Apps\n\nHere 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.\n\n| # | Demo                 | Description |\n|---| -------------------- | ----------- |\n| 1 | [ngVikings 2020](https://github.com/ngvikings/ngvikings-2020) \u003cbr\u003e \u003cimg src=\"media/icons/hugo-icon.png\" alt=\"Hugo\" width=\"38\" /\u003e  | 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. \u003cbr\u003e [Try Live](https://www.ngvikings.org/)   |\n| 2 | [Nitro Workshop](https://github.com/nitro-stack/nitro-workshop) \u003cbr\u003e \u003cimg src=\"media/icons/nodejs.png\" alt=\"Nodejs\"  width=\"16\" height=\"18\" /\u003e \u003cimg src=\"media/icons/vuepress.png\" alt=\"Vuepress\"  width=\"22\"  /\u003e \u003cimg src=\"media/icons/nestjs.png\" alt=\"Nestjs\"  width=\"16\" height=\"18\" /\u003e | 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. \u003cbr\u003e [Try Live](https://nitro-stack.github.io/nitro-workshop/)   |\n| 3 | [Peacock for Visual Studio Code Documentation](https://github.com/johnpapa/vscode-peacock)  \u003cbr\u003e \u003cimg src=\"media/icons/nodejs.png\" alt=\"Nodejs\"  width=\"16\" height=\"18\" /\u003e \u003cimg src=\"media/icons/vuepress.png\" alt=\"Vuepress\"  width=\"22\"  /\u003e | 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. \u003cbr\u003e [Try Live](https://www.peacockcode.dev/)   |\n\n# 🤝 Contributing\n\nThis project welcomes contributions and suggestions.  Most contributions require you to agree to a\nContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\nthe rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.\n\nWhen you submit a pull request, a CLA bot will automatically determine whether you need to provide\na CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions\nprovided by the bot. You will only need to do this once across all repos using our CLA.\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n\u003cp align=\"center\"\u003e\n🚀 \u003cstrong\u003eGet started now and take your app to the next level with \u003ca href=\"https://learn.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-154160-juliamuiruri\"\u003eAzure Static Web Apps\u003c/a\u003e!\u003c/strong\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fstatic-web-apps-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoft%2Fstatic-web-apps-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fstatic-web-apps-examples/lists"}