shopathome
The Shop at Home app is a sample application that allows users to manage shopping lists for food and household items. It serves as a starting point for MS Learn Modules and demonstrates deployment to Azure services.
Key Features:
- Frontend built with multiple JavaScript frameworks: Angular, React, Svelte, and Vue
- Supports two backend API options:
- Azure Functions App
- Fastify server project
- Deployed to Azure services:
- Frontend: Azure Static Web Apps
- Backend: Azure Container Apps (for Fastify API)
Framework Support: The application provides equivalent implementations in four popular frameworks, with Svelte being one of the supported options. The default detection for Azure Static Web Apps deployment is set to Svelte.
Target Audience:
- Developers learning Azure deployment
- Those interested in comparing framework implementations
- Users wanting to understand full-stack JavaScript applications
Learning Resources:
- [Publish JavaScript apps with Azure Static Web Apps](https://docs.microsoft.com/learn/modules/publish-app-service-static-web-app-api/?WT.mc_id=academic-0000-jopapa fa-solid fa-up-right-from-square)
- [Azure Static Web Apps documentation](https://learn.microsoft.com/en-us/azure/static-web-apps/overview fa-solid fa-up-right-from-square)
- [App Spaces overview](https://learn.microsoft.com/en-us/azure/app-spaces/overview fa-solid fa-up-right-from-square)
Live Demos:
- [Angular version](https://angular.shopathome.dev fa-solid fa-up-right-from-square)
- [React version](https://react.shopathome.dev fa-solid fa-up-right-from-square)
- [Svelte version](https://svelte.shopathome.dev fa-solid fa-up-right-from-square)
- [Vue version](https://vue.shopathome.dev fa-solid fa-up-right-from-square)
angularvuevuejsreactreactjssveltesveltejsazure-functionsjavascript
Featured Stories
No featured articles here. Navigate to an article, then pick the Feature on menu button