microsoftdocs / mslearn-staticwebapp-api Goto Github PK

Apps that can be used with as a starting point for some MS Learn Modules, including Publish an API for an Angular, React, Svelte, or Vue JavaScript app with Azure Static Web Apps.

License: Creative Commons Attribution 4.0 International

TypeScript 27.48% HTML 4.86% JavaScript 25.39% CSS 0.44% Vue 14.78% SCSS 13.69% Svelte 13.36%

mslearn-staticwebapp-api's Introduction

page_type

languages

products

description

urlFragment

sample

javascript

typescript

azure functions

Apps that can be used with as a starting point for some MS Learn Modules.

https://github.com/MicrosoftDocs/mslearn-staticwebapp-api

Official Microsoft Sample

Follow the hands-on tutorial to publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps.

Static Web App

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 shopping theme is used throughout the app.

The apps written in the following JavaScript frameworks/libraries:

folder	Description
angular-app	Sample Angular app
api-starter	Sample Azure Functions app
react-app	Sample React app
svelte-app	Sample Svelte app
vue-app	Sample Vue app

Prerequisites

A GitHub account
Node.js and Git
Visual Studio Code installed
The Azure Functions extension installed
The Azure Functions Core Tools installed

Problems or Suggestions

Open an issue here

Resources

Azure Static Web Apps

Azure Functions

Learn how to Refactor Node.js and Express APIs to Serverless APIs with Azure Functions
Learn about the Azure Functions local.settings.json file
Learn how to Deploy to Azure Using Azure Functions
Sign up for a Free Trial of Azure

Visual Studio Code

Azure Free Trial
VS Code
VS Code Extension for Node on Azure
Azure Functions local.settings.json file

Debugging Resources

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. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

mslearn-staticwebapp-api's People

Contributors

Stargazers

Watchers

mslearn-staticwebapp-api's Issues

Fail on eslint on the react app

The build and deploy job (GitHub Actions) fails with the error below. I have tried to change lots of settings, but always gets the same error.

react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to load plugin 'import' declared in '.eslintrc.json': Cannot find module 'eslint'
Require stack:

/github/workspace/react-app/node_modules/eslint-plugin-import/lib/ExportMap.js
/github/workspace/react-app/node_modules/eslint-plugin-import/lib/rules/named.js
/github/workspace/react-app/node_modules/eslint-plugin-import/lib/index.js
/github/workspace/react-app/node_modules/react-scripts/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
Referenced from: /github/workspace/react-app/.eslintrc.json

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /github/home/.npm/_logs/2022-02-28T17_14_26_001Z-debug.log

React-app unsupported platform error

I am trying with the reac-app but after run the npm install command, I get the following error:

Unsupported platform for [email protected]: wanted {"os":"darwin"} (current: {"os":"win32","arch":"x64"})

OS: Windows 10
Node version: 18.12.1

POST and PUT routes for React app do not work

Hi, I am unable to add or edit products as the POST and PUT routes do not work. Seems like when the "+" or "Edit" functions are used, upon saving they will send requests to http://localhost:3000/products/api/products instead of http://localhost:3000/api/products thus causing the requests to fail.

Load and delete products features both work.

Same issue faced with the authentication tutorial: https://github.com/MicrosoftDocs/mslearn-staticwebapp-authentication

Visual Studio 2017 or newer required?

I'm using the react-app folder of this code. When I run npm install, I get these errors indicating that VS 2017 must be installed. I'm only running VS Code and would rather not install an entire IDE just for this to install. Is there a work-around?

npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp verb find VS looking for Visual Studio 2015
npm ERR! gyp verb find VS - not found
npm ERR! gyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS

Node.js 16 LTS support

Using node 16.x as provided by default in a GitHub Codespace, npm install fails with for the react & svelte apps due to package.json specifying node-sass < 6.0.0 (see https://github.com/sass/node-sass/releases for supported node versions for each node-sass release).