Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/microsoft/static-web-apps-examples
A community showcase of projects built with Azure Static Web Apps 🎉
https://github.com/microsoft/static-web-apps-examples
angular azure azure-static-web-apps dotnet gatsby go java javascript nodejs python react static-site-generator stenciljs svelte typescript vue
Last synced: about 7 hours ago
JSON representation
A community showcase of projects built with Azure Static Web Apps 🎉
- Host: GitHub
- URL: https://github.com/microsoft/static-web-apps-examples
- Owner: microsoft
- License: mit
- Created: 2020-05-07T20:23:25.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-07T07:05:25.000Z (about 24 hours ago)
- Last Synced: 2024-11-07T08:18:39.903Z (about 23 hours ago)
- Topics: angular, azure, azure-static-web-apps, dotnet, gatsby, go, java, javascript, nodejs, python, react, static-site-generator, stenciljs, svelte, typescript, vue
- Homepage:
- Size: 30.1 MB
- Stars: 122
- Watchers: 31
- Forks: 76
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
🌐Static Web Apps Examples
[
](#azure-static-web-apps--ai)
•
[](#azure-static-web-apps--web-frameworks)
•
[](#azure-static-web-apps--web-frameworks)
•
[](#azure-static-web-apps--web-frameworks)
•
[](#azure-static-web-apps--web-frameworks)
•
[](#azure-static-web-apps-with-javascriptnodejs)
•
[](#azure-static-web-apps-with-typescriptnodejs)
•
[](#azure-static-web-apps-with-javascriptnodejs)
•
[](#azure-static-web-apps-with-net-and-blazor)
•
[](#azure-static-web-apps-with-python)
•
[](#azure-static-web-apps-with-java)
•
[](#azure-static-web-apps-with-go)
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](https://learn.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-154160-juliamuiruri)**.
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](#real-world-and-production-examples-com-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](https://github.com/Azure-Samples/azure-sql-db-session-recommender-v2) | A session recommender for your next event.
[Try Live](https://ai.microsofthq.vslive.com/) |
| 2 | [create-your-own-chatgpt](https://github.com/Azure-Samples/azure-openai-rag-workshop) | An AI-powered chat application with RAG.
|
| 3 | [serverless-ai-chat](https://github.com/Azure-Samples/serverless-chat-langchainjs) | A Serverless AI Chat application.
|
| 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.
|
| 5 | [podcast-synopsis-generation](https://github.com/Azure-Samples/podcast-synopsis-generation-openai) | A Pipeline For Podcast Synopsis Generation (and more) With Azure OpenAI.
|
| 6 | [openai-assistant-function-calling](https://github.com/Azure-Samples/azure-openai-assistant-javascript) | 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](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.
[Try Live](https://svelte.shopathome.dev/home) |
| 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.
[Try Live](https://angular.shopathome.dev/home) |
| 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.
[Try Live](https://react.shopathome.dev/home) |
| 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.
[Try Live](https://react.shopathome.dev/home) |
| 5 | [**vue.js**-fullstack-todo-list](https://github.com/Azure-Samples/azure-sql-db-fullstack-serverless-kickstart) | A todo e2e reference app
|
| 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
|
## 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](https://github.com/Azure-Samples/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](https://github.com/Azure-Samples/azure-sql-db-prisma) | 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](https://github.com/Azure-Samples/dab-azure-cosmos-db-nosql-quickstart) | 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](https://github.com/Azure-Samples/todo-python-mongo-swa-func) | 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](https://github.com/ngvikings/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](https://www.ngvikings.org/) |
| 2 | [Nitro Workshop](https://github.com/nitro-stack/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](https://nitro-stack.github.io/nitro-workshop/) |
| 3 | [Peacock for Visual Studio Code Documentation](https://github.com/johnpapa/vscode-peacock)
| 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](https://www.peacockcode.dev/) |
# 🤝 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](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
🚀 Get started now and take your app to the next level with Azure Static Web Apps!