johnpapa / shopathome

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

Static Web Apps

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 you prefer.

The Shop at Home theme is used throughout the app. View it live at https://www.shopathome.dev

Deploy to Azure using App Spaces

• For New Users: Clicking the button above will take you to the App Sapce 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.
• Deployment: Click ‘Deploy’ to view the deployment progress.
• Post-Deployment: After deployment is complete, you will be redirected to your app space for management.

Learn how

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

Contents

The apps written in the following JavaScript frameworks/libraries:

Folder	Description	Live Demo
angular-app	Sample Angular app	angular.shopathome.dev
api	Sample Azure Functions app	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

Prerequisites

• A GitHub account
• Node.js and Git
• Visual Studio Code installed
• The Static Web Apps extension installed
• The SWA CLI installed
• The Azure Functions Core Tools installed

Problems or Suggestions

Open an issue here

Resources

Azure Static Web Apps

• Learn how to set up local development for Azure Static Web Apps using SWA CLI
  • Learn more about SWA CLI
• Learn how to Publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps
• Add an API to Azure Static Web Apps
• Authentication and authorization
• API support in Azure Static Web Apps
• Routes
• Review pre-production environments
• Azure Free Trial
• Learn about App Spaces - Simplifies the deployment and management of multiple services in the Azure Portal

shopathome's Issues

check scripts

@simonaco can you check the scripts for the SWA CLI and make sure I have these right for all 4 web frameworks?

Thanks!

After using the template, cloning, going to any app directory, example: cd vue-app, then running npm install, npm run serve

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\shopathome\vue-app\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\shopathome\vue-app\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\shopathome\vue-app\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\shopathome\vue-app\node_modules\webpack\lib\NormalModule.js:503:5
at C:\shopathome\vue-app\node_modules\webpack\lib\NormalModule.js:358:12
at C:\shopathome\vue-app\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\shopathome\vue-app\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array. (C:\shopathome\vue-app\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\shopathome\vue-app\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\shopathome\vue-app\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at C:\shopathome\vue-app\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Connection refused when using proxy

This solutions suggests it would be possible to run this locally with a mocked backend. Unfortunately I get the following error when typing npm start inside the angular-app folder:

[HPM] Error occurred while trying to proxy request /api/products/ from localhost:4200 to http://localhost:7071 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm probably doing something wrong here, but I can't find out what exactly. Any help would be appreciated.

Can't Upgrade to Angular v13

@mgechev Can you take a look at the Angular folder in the main branch, and try running ng update on it to get it to v13? When I did this I got all sorts of peer dependency issues with angular packages.

Issue Title

Set the commandCenter.* properties based on the existing color choices for:

commandCenter.border = activityBar.activeBorder;
commandCenter.activeBackground = titleBar.activeBackground;
commandCenter.background = titleBar.activeBackground;

Set the commandCenter.* properties

Set the commandCenter.* properties based on the existing color choices for:

commandCenter.border = activityBar.activeBorder; // if possible 
commandCenter.activeBackground = titleBar.activeBackground;
commandCenter.background = titleBar.inactiveBackground;

Running app locally PUT/POST APIs come as 404

Hi @johnpapa/@yooakim,
Thanks for the sample work for Static Web App files.

I'm using it both for honing my skills on Angular as well as working the Static Web App functions.

Running the app locally... all GET HTTP verbs work fine, but PUT/POST returns 404.

not sure, I am missing something in the routing setup. I ran it per instruction though.

Thank you for help,
Mohammad