I realise this is possibly a static apps or GitHub issue and I don't really understand the GitHub access system but when I created the Sandbox resource it requested what appears to be excessive access to GitHub. Many of my organisations have a green tick next to then with no way to disable.

Perhaps GitHub settings or the organisations settings default to allowing access. Perhaps it is safe as I have to grant explicit access later? Whatever, i'd be much happier if it was only given access to my account where I will create the repo, not any organsiations I am a member of.

When you do npm start the displayed Cards don't display the Delete and Edit buttons.

Has anybody checked that the website works and that the Cards can be edited and deleted?

On looking in the codebase there are a number of components that don't appear to be called within the React Project

• ButtonFooter
• InputDetail
• ModalYesNo
• NotFound

All the formatting files are not necessary for a simple static app that a user can upload. You should create a branch for your own development and remove the test dependencies so users don't have to install things they don't need. 

"npm install" reports above file missing

I have cloned the repository successfully, when l try to run the dependencies l get
npm install

changed 1 package, and audited 1408 packages in 6s

238 packages are looking for funding
run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

Seems the npm audit fix --force doesn't solve the problem either. Some l am stuck here.

In list-header.component.ts on line 7, router-link is used instead of routerLink. Clicking on the title doesn't send you back to the home route (products). You will also have to add imports : [RouterLink] in the @Component after selector.

I ran npm run serve on my machine and the build failed with the following.

 ERROR  Failed to compile with 1 errors                                                                                                                                                             9:08:38 PM

 error  in ./src/views/products/product-list.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/home/mattias/labbaswa/aswa-learn/vue-app/src/views/products/product-list.vue
  34:34  error  Replace `⏎······Loading·data·...⏎····` with `Loading·data·...`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

I ran npm run lint -- --fix and that fixed it for me. I had the same problems building with github actions and when I pushed my commits with the lint-fix the following build worked.

My repo that I created from this template: https://github.com/mnsc/aswa-learn

When following the tutorial the step where the azure functions are to be started locally with npm start in the ./api folder fails because the Azure Function Core Tools are missing.

They are not listed as dependency in api/package.json and the tutorial doesn't list it as a prerequisite either.

Finally I found instructions how to make it work here

Hello,

This is my first time trying Static Web Apps. I tried deployed my angular application using static web app vs code extension and ran into this error:

No url found for submodule path 'gitgraph-generator' in .gitmodules

This I say public repo: https://github.com/septst/gitgraph-generator

Please advise!

Thanks,
Parth

React version throws a node-sass error when installing NPM packages with Node 16.16.0

See Learn Module api step

I just followed the tutorial, and it failed on Unit 4/5: Create an Azure Static Web App. The failure is visible on the automatically generated workflow run here.

It can also be reproduced locally:

1. Clone this repo
2. cd react-app
3. npm install
4. npm run build
5. Observe error:

> [email protected] build
> react-scripts build

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

[eslint] Failed to load parser 'react-scripts/node_modules/babel-eslint' declared in '.eslintrc.json': Cannot find module 'react-scripts/node_modules/babel-eslint'
Require stack:
- /Users/victor/repos/victorlin/my-static-web-app/react-app/.eslintrc.json

The readme should include a recommendation to use the LTS version of Node - Node v12.18.3.

I found the warning messages distracting when following the tutorial with the current version of Node - v14.7.0 on the Mac.

I wonder if it should be possible to create a function with a cosmosDBbinding with Static web apps at the moment?

I get this error message when I try add a cosmosDB binding to a function:

Error in processing api build artifacts: the file 'products-post/function.json' does not specify a valid function with only HTTP triggers and bindings. Please ensure the JSON contains a single httpTrigger input trigger and a single http output binding.

My function.json looks like this:
{ "bindings": [ { "authLevel": "anonymous", "type": "httpTrigger", "direction": "in", "name": "req", "methods": ["post"], "route": "products" }, { "type": "http", "direction": "out", "name": "res" }, { "type": "cosmosDB", "name": "inputDocumentIn", "databaseName": "mydb", "collectionName": "mycol", "connectionStringSetting": "CosmosDBConnectionString", "direction": "in", "sqlQuery": "SELECT * from c" } ] }

Hi , Please help resolve this issue

Action ci: add Azure Static Web Apps workflow file failed on Build and Deploy job

Output:

Run Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ***
    repo_token: ***
    action: upload
    app_location: /vue-app
    api_location: api
    output_location: dist
/usr/bin/docker run --name a682579ac32752ae14d719b5f042e2cf3e031_0734b7 --label 6a6825 --workdir /github/workspace --rm -e INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN -e INPUT_REPO_TOKEN -e INPUT_ACTION -e INPUT_APP_LOCATION -e INPUT_API_LOCATION -e INPUT_OUTPUT_LOCATION -e INPUT_API_BUILD_COMMAND -e INPUT_APP_ARTIFACT_LOCATION -e INPUT_APP_BUILD_COMMAND -e INPUT_ROUTES_LOCATION -e INPUT_SKIP_APP_BUILD -e INPUT_CONFIG_FILE_LOCATION -e HOME -e GITHUB_JOB -e GITHUB_REF -e GITHUB_SHA -e GITHUB_REPOSITORY -e GITHUB_REPOSITORY_OWNER -e GITHUB_RUN_ID -e GITHUB_RUN_NUMBER -e GITHUB_RETENTION_DAYS -e GITHUB_RUN_ATTEMPT -e GITHUB_ACTOR -e GITHUB_WORKFLOW -e GITHUB_HEAD_REF -e GITHUB_BASE_REF -e GITHUB_EVENT_NAME -e GITHUB_SERVER_URL -e GITHUB_API_URL -e GITHUB_GRAPHQL_URL -e GITHUB_REF_NAME -e GITHUB_REF_PROTECTED -e GITHUB_REF_TYPE -e GITHUB_WORKSPACE -e GITHUB_ACTION -e GITHUB_EVENT_PATH -e GITHUB_ACTION_REPOSITORY -e GITHUB_ACTION_REF -e GITHUB_PATH -e GITHUB_ENV -e RUNNER_OS -e RUNNER_ARCH -e RUNNER_NAME -e RUNNER_TOOL_CACHE -e RUNNER_TEMP -e RUNNER_WORKSPACE -e ACTIONS_RUNTIME_URL -e ACTIONS_RUNTIME_TOKEN -e ACTIONS_CACHE_URL -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/my-static-web-app/my-static-web-app":"/github/workspace" 6a6825:79ac32752ae14d719b5f042e2cf3e031
DeploymentId: 15ac124b-a816-40bd-9959-ffbf6ebd225b

App Directory Location: '/vue-app' was found.
[WARNING] Api Directory Location: 'api' could not be found. Azure Functions will not be created.
Looking for event info
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---


Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20211001.1, Commit: f0cbc9b1f0d056493cdb36f92b62f11921c87261, ReleaseTagName: 20211001.1

Build Operation ID: |ehjMvWlCF7E=.687431c4_
Repository Commit : b15f6c3180e015b98aba6aeb5769d72e9a98f991

Detecting platforms...
Detected following platforms:
  nodejs: 14.17.6
Version '14.17.6' of platform 'nodejs' is not installed. Generating script to install it...


Source directory     : /github/workspace/vue-app
Destination directory: /bin/staticsites/ss-oryx/app


Downloading and extracting 'nodejs' version '14.17.6' to '/opt/nodejs/14.17.6'...
Downloaded in 0 sec(s).
Verifying checksum...
Extracting contents...
performing sha512 checksum for: nodejs...
Done in 1 sec(s).

Removing existing manifest file
Creating directory for command manifest file if it doesnot exist
Creating a manifest file...
Node Build Command Manifest file created.

Using Node version:

> [email protected] postinstall /github/workspace/vue-app/node_modules/ejs
> node ./postinstall.js


> @fortawesome/[email protected] postinstall /github/workspace/vue-app/node_modules/@fortawesome/fontawesome-svg-core
> node attribution.js

Font Awesome Free 1.2.35 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)


> @fortawesome/[email protected] postinstall /github/workspace/vue-app/node_modules/@fortawesome/free-solid-svg-icons
> node attribution.js

Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)


> [email protected] postinstall /github/workspace/vue-app/node_modules/node-sass
> node scripts/build.js

Binary found at /github/workspace/vue-app/node_modules/node-sass/vendor/linux-x64-83/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1462 packages from 724 contributors and audited 1468 packages in 80.815s

87 packages are looking for funding
  run `npm fund` for details

found 44 vulnerabilities (33 moderate, 11 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Running 'npm run build'...


> [email protected] build /github/workspace/vue-app
> vue-cli-service build

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

-  Building for production...
 ERROR  Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (/github/workspace/vue-app/node_modules/vue-loader/dist/index.js:8:11)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at /github/workspace/vue-app/node_modules/@vue/cli-service/lib/config/base.js:110:16
    at /github/workspace/vue-app/node_modules/@vue/cli-service/lib/Service.js:236:40
    at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service 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/2021-12-22T10_40_21_954Z-debug.log


---End of Oryx build logs---
Oryx has failed to build the solution.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting

Trying to run vue-app after creating from template repo I am unable to run npm install with Node 17

I am able to resolve this by using NVS to switch to Node 16.

I'd suggest this project add an engines section to package.json to advice which Node versions the is compatible with so that people can use this with engine-strict mode npm config set engine-strict=true

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^16 || ^15 || ^14 || ^13 || ^12 || ^11 || ^10 || ^9 || ^8 || ^7 || ^6'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v17.3.0', npm: '8.3.0' }
npm WARN EBADENGINE }

Angular static app build is completing successfully, however, the application is not really getting built. Please find the logs below. Finally, the static app runs an index.html page from azure without the associated resources. (This works fine locally)

Detecting platforms...
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.
---End of Oryx build logs---
Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
Finished building app with Oryx
Validated and moved 'routes.json' from 'assets' to '/' within the build artifacts folder.
Zipping App Artifacts
Done Zipping App Artifacts
Either no Api directory was specified, or the specified directory was not found. Azure Functions will not be created.
Uploading build artifacts.
Finished Upload. Polling on deployment.

In the course for building static web app has been written that cloned repository contains api-starter. But mslearn-staticwebapp repository doesn't exist api-starter folder. It's not possible to pass to the next step of the course.

I followed the instructions and successfully deployed your sample app to Azure Static Web Apps. I noticed that the react application does not update quantity properly. It does, however, update name and description - not quantity. Is this intentional or a bug?

Trying to get react-app workflow to build but it fails for reason could not detect the language from repo. Please find logs below.
Found something similar here https://github.com/MicrosoftDocs/vscodespaces/issues/85

Run Azure/[email protected]
...
App Directory Location: '/' was found.
[WARNING] Api Directory Location: 'api' could not be found. Azure Functions will not be created.
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---

Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20201112.1, Commit: a120bb248aa8d208ca5e02d7d9d075196e79cffd, ReleaseTagName: 20201112.1

Build Operation ID: |GAlwqTp1cA0=.298d1e3d_
Repository Commit : c8eee2b1fa80a879adb01693d6710c959ac9e49a

Detecting platforms...
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.

---End of Oryx build logs---
Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
Finished building app with Oryx

Trying to run vue-app after creating from template repo I am unable to run npm install without errors that suggest I need python2.exe in my PATH

I am able to resolve this by installing python 2.7 with using Scoop to install Python2 on Windows (note, I already had Python 3).

npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2

and also

npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Users\rohan\scoop\apps\python\current\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\rohan\scoop\apps\python\current\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?

and finally...

npm ERR! gyp ERR! System Windows_NT 10.0.22523
npm ERR! gyp ERR! command "C:\\Users\\rohan\\scoop\\apps\\nvs\\current\\nodejs\\node\\16.13.1\\x64\\node.exe" "C:\\Users\\rohan\\src\\github\\rohancragg\\my-static-web-app\\vue-app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\rohan\src\github\rohancragg\my-static-web-app\vue-app\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1