shopathome Svelte Themes

Shopathome

Choose from Angular, React, Svelte, and Vue applications with an Azure Functions API, that deploys to Azure Static Web Apps

About the Shop at Home app

The Shop at Home app allows customers to securely add, edit, view, and remove items such as food and household needs from their list.

This repository contains apps that can be used with as a starting point for some MS Learn Modules. because everyone has their own preference for their JavaScript frameworks/library, you can choose which one best suits your preferences and requirements.

  • The Frontend is built using 4 JavaScript frameworks (Angular, React, Svelte, Vue) and is deployed to Azure Static Web Apps
  • The sample contains 2 APIs you can choose from: An Azure Functions App and a Fastify server project which is deployed to Azure Container Apps

Run Shop at Home locally

Prerequisites

See instructions to install, setup and run the application locally in the README.md file located at the root of the respective folders.

Folder Description Live Demo
angular-app Sample Angular app angular.shopathome.dev
api Sample Azure Functions app protected
api Sample Fastify API protected
react-app Sample React app react.shopathome.dev
svelte-app Sample Svelte app svelte.shopathome.dev
vue-app Sample Vue app vue.shopathome.dev

Deploy to Azure using Azure Static Web Apps (Azure Functions API)

Deploy to Azure using App Spaces (Fastify API)

  1. Once you are signed in on Azure through the link above,

    • For New Users: Clicking the button above will take you to the App Space template gallery. Select a shopping app solution template based on your preferred framework.

    • For Existing Users: Clicking the button above will direct you to a page displaying your existing app spaces and a ‘Create App Space’ button. Click ‘Create App Space’ to access the template gallery and choose a shopping app solution template.

    • GitHub Login: Log in to your GitHub account and fill in your organization and other required fields on the form:

      • GitHub account – Connect to your GitHub Account.
      • Organization – Choose your organization.
      • New Repository – This will be automatically populated with a fork that's created on your account.
      • App Space name – Give your App Space a name (or use the default).
      • Subscription – Choose your subscription.
      • Region – Choose an Azure region.
    • Deployment: Click ‘Deploy’ to view the deployment progress.

    • Post-Deployment: After deployment is complete, you will be redirected to your app space for management.

    Since your frontend is already linked to the backend, to view your API, authentiate on the App through GitHub or Entra ID and the call will be securely proxied via /api/ path. Ie. Use the route /api/products to see product data

Learn how

Learn how to Publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps

Problems or Suggestions

Open an issue here

Learn More

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes