staticwebdev / vanilla-basic Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://docs.microsoft.com/azure/static-web-apps/getting-started?tabs=vanilla-javascript
Home Page: https://docs.microsoft.com/azure/static-web-apps/getting-started?tabs=vanilla-javascript
Azure Static Web Apps allows you to easily build JavaScript apps in minutes.
Is it that Azure Static Web Apps can build only JavaScript apps?
I would like to create a really simple Single Page Application on Azure.
I have cloned https://github.com/staticwebdev/vanilla-basic
It has lots of folders and files which are very foreign to me (eg .devcontainer
, .github/workflows
, tests
, playwright
, typescript files
)
I do not use Visual Studio Code Editor and do not want anything installed except for what is required for a site to run on Azure.
What is the absolute minimum that can be in a GitHub repo for it to work with Azure 'Static Web Apps'?
This is what the current default repo contents are:
.devcontainer
.github/workflows
src
tests
.gitignore
package-lock.json
package.json
playwright.config.ts
readme.md
Ideally, I would just like it to contain:
/js
/css
index.html
(It would be great if a tutorial existed which demonstrated how to create such a simple repo for Azure, I can't find one).
The /.gitignore file excludes the default /playwright-report directory, but when running the tests locally the /playwright.config.ts is configured to /pw-report on line 34/35 instead.
It's really cool to see this project updated with playwright tests.
However, like most folks I like to test locally first, and then automate it.
After cloning this project, I struggled to get local testing setup.
The Test.README.md
states to run npm run playwright_test
If we just naively run this we'll get an error ...
[WebServer] 'sirv' is not recognized as an internal or external command,
operable program or batch file.
Error: Process from config.webServer was not able to start. Exit code: 1
Luckily, we've got the playwright-onDemand.yml
that hints at what is needed for local testing. Specifically, we need to install the dependencies.
npx playwright install --with-deps
npm install --g sirv-cli
After getting those dependencies installed locally, I was up and running tests locally! ๐
However, the test results made a bit of a mess inside the project.
We've now got new files in root, new folders, and none of them were part of the .gitignore
so, they are set to get committed. Proposal, we're already ignoring the test-results
folder. In order to optimize the experience for local testing, would it make sense to do two things ...
Test.README.md
with the explicit steps to get local testing working.Alternatively, it might be that using a GitHub Codespace or using VS Code with the remote containers extension, resolves this?
Didn't try that. But, would prefer to NOT have those local environment dependencies if possible.
I know we'd have to touch a few files to make this happen. The workflows, playwright.config.ts, etc ...
However, I am happy to take a swing PR'ing this! I really just want the local playwright experience to be optimized.
Thanks!
There are 2 Visual Studio Code extensions for this repo recommended in the documentation.
One of them seems to have had a name change, and it takes a few extra steps and clicking around to manually search and install them from the VSCode marketplace.
I would suggest adding a /.vscode/extensions.json with those recommendations - based on the extension ID - this will trigger Visual Studio Code to display a notification asking developers to choose if they want to install the exact extensions that were recommended on repo open.
More info about the extensions.json file can be found here: https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions
It would be good if this template had dev container files so any SWAs created with this can be opened in a container or in code spaces
After following https://learn.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript my first deploy failed with logs like this:
/usr/bin/docker run --name c0442fd7fd7dbfb744c4f92002043a0736abb_229844 --label 6c0442 --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 "INPUT_SKIP_API_BUILD" -e "INPUT_PRODUCTION_BRANCH" -e "INPUT_DEPLOYMENT_ENVIRONMENT" -e "INPUT_IS_STATIC_EXPORT" -e "INPUT_DATA_API_LOCATION" -e "HOME" -e "GITHUB_JOB" -e "GITHUB_REF" -e "GITHUB_SHA" -e "GITHUB_REPOSITORY" -e "GITHUB_REPOSITORY_OWNER" -e "GITHUB_REPOSITORY_OWNER_ID" -e "GITHUB_RUN_ID" -e "GITHUB_RUN_NUMBER" -e "GITHUB_RETENTION_DAYS" -e "GITHUB_RUN_ATTEMPT" -e "GITHUB_REPOSITORY_ID" -e "GITHUB_ACTOR_ID" -e "GITHUB_ACTOR" -e "GITHUB_TRIGGERING_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_WORKFLOW_REF" -e "GITHUB_WORKFLOW_SHA" -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 "GITHUB_STEP_SUMMARY" -e "GITHUB_STATE" -e "GITHUB_OUTPUT" -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/staticwebdev/staticwebdev":"/github/workspace" 6c0442:fd7fd7dbfb744c4f92002043a0736abb
DeploymentId: 87d77552-21a5-4807-80fc-315a829fc18f
App Directory Location: '/' was found.
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.20221[10](https://github.com/foolip/staticwebdev/actions/runs/4597879955/jobs/8121162205#step:4:11)3.1, Commit: a2c65dde152b749fea395f4d1242ea9350942258, ReleaseTagName: 2022[11](https://github.com/foolip/staticwebdev/actions/runs/4597879955/jobs/8121162205#step:4:12)03.1
Build Operation ID: |julP4J9dgIQ=.3ba08750_
Repository Commit : 7ec1c3bb097bfd385b1ea9b88cdee3c363b6647f
Detecting platforms...
Detected following platforms:
nodejs: [16](https://github.com/foolip/staticwebdev/actions/runs/4597879955/jobs/8121162205#step:4:17).[19](https://github.com/foolip/staticwebdev/actions/runs/4597879955/jobs/8121162205#step:4:20).0
Version '16.19.0' of platform 'nodejs' is not installed. Generating script to install it...
Error: Could not find either 'build' or 'build:azure' node under 'scripts' in package.json. Could not find value for custom run build command using the environment variable key 'RUN_BUILD_COMMAND'.Could not find tools for building monorepos, no 'lerna.json' or 'lage.config.js' files found.
---End of Oryx build logs---
Oryx could not find a 'build' or 'build:azure' script in the package configuration. Please add one of these commands to your package configuration file (i.e. package.json). Alternatively, you can add the app_build_command to the build/deploy section of your workflow file. For example, app_build_command: 'npm run docs:build'
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
The important part:
Oryx could not find a 'build' or 'build:azure' script in the package configuration.
Adding a build script fixed this. A small (but wrong) fix is:
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
"name": "vanilla-basic",
"version": "1.0.0",
"scripts": {
+ "build": "cp -a src dist",
"start": "sirv ./src public --cors --single --no-clear --port 8000"
}
}
I've tried this on three different Windows environments (Windows 10 & 11, WLS2, Node v16.16.0, latest Docker ), all with the same error. Basically looks like the copy from /library-scripts/ fails.
Log ------------------------
[94 ms] Remote-Containers 0.251.0 in VS Code 1.71.1 (e7f30e38c5a4efafeec8ad52861eb772a9ee4dfb).
[94 ms] Start: Resolving Remote
[116 ms] Setting up container for folder or workspace: c:\projects\swa-basic
[121 ms] Start: Check Docker is running
[122 ms] Start: Run: docker version --format {{.Server.APIVersion}}
[321 ms] Server API version: 1.41
[323 ms] Start: Run: docker volume ls -q
[596 ms] Start: Run: docker ps -q -a --filter label=vsch.local.folder=c:\projects\swa-basic --filter label=vsch.quality=stable
[786 ms] Start: Run: docker ps -q -a --filter label=devcontainer.local_folder=c:\projects\swa-basic
[972 ms] Start: Run: C:\Users\viper\AppData\Local\Programs\Microsoft VS Code\Code.exe --ms-enable-electron-run-as-node c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js up --user-data-folder c:\Users\viper\AppData\Roaming\Code\User\globalStorage\ms-vscode-remote.remote-containers\data --workspace-folder c:\projects\swa-basic --workspace-mount-consistency cached --id-label devcontainer.local_folder=c:\projects\swa-basic --log-level debug --log-format json --config c:\projects\swa-basic\.devcontainer\devcontainer.json --default-user-env-probe loginInteractiveShell --mount type=volume,source=vscode,target=/vscode,external=true --skip-post-create --update-remote-user-uid-default on --mount-workspace-git-root true
[1169 ms] remote-containers 0.251.0.
[1169 ms] Start: Run: docker buildx version
[1443 ms] Start: Resolving Remote
[1445 ms] Start: Run: git rev-parse --show-cdup
[1500 ms] Start: Run: docker ps -q -a --filter label=devcontainer.local_folder=c:\projects\swa-basic
[1666 ms] local container features stored at: c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\node_modules\vscode-dev-containers\container-features
[1668 ms] Start: Run: tar --no-same-owner -x -f -
[1740 ms] Start: Run: docker buildx build --load --build-arg BUILDKIT_INLINE_CACHE=1 -f c:\projects\swa-basic\.devcontainer\Dockerfile -t vsc-swa-basic-d3791a392f70e508dd2f9c004254904d --build-arg NODE_VERSION=16 --build-arg CORE_TOOLS_VERSION=4 c:\projects\swa-basic\.devcontainer
[+] Building 0.7s (7/7) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 32B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for mcr.microsoft.com/azure-functions/python 0.0s
=> [1/3] FROM mcr.microsoft.com/azure-functions/python:4-python3.9-core- 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 87B 0.0s
=> CACHED [2/3] COPY library-scripts/*.sh library-scripts/*.env /tmp/lib 0.0s
=> ERROR [3/3] RUN bash /tmp/library-scripts/node-debian.sh "/usr/local/ 0.5s
------
> [3/3] RUN bash /tmp/library-scripts/node-debian.sh "/usr/local/share/nvm" "16
" "${USERNAME}" && su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh
&& nvm install 16 2>&1" && su vscode -c "umask 0002 && npm install --cache
/tmp/empty-cache -g @azure/static-web-apps-cli" && if [ 4 != "4" ]; then apt
-get remove -y azure-functions-core-tools-4 && apt-get update && apt-get install
-y "azure-functions-core-tools-4"; fi && apt-get clean -y && rm -rf /var/li
b/apt/lists/*:
#0 0.483 /tmp/library-scripts/node-debian.sh: line 11: $'\r': command not found
#0 0.484 /tmp/library-scripts/node-debian.sh: line 18: $'\r': command not found
: invalid optionbrary-scripts/node-debian.sh: line 19: set: -
#0 0.485 set: usage: set [-abefhkmnptuvxBCHP] [-o option-name] [--] [arg ...]
#0 0.485 /tmp/library-scripts/node-debian.sh: line 20: $'\r': command not found
#0 0.486 /tmp/library-scripts/node-debian.sh: line 35: syntax error near unexpec
ted token `$'do\r''
#0 0.486 /tmp/library-scripts/node-debian.sh: line 35: ` for CURRENT_USER in
'{POSSIBLE_USERS[@]}; do
------
ERROR: failed to solve: executor failed running [/bin/sh -c bash /tmp/library-sc
ripts/node-debian.sh "${NVM_DIR}" "${NODE_VERSION}" "${USERNAME}" && su vsco
de -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION
} 2>&1" && su vscode -c "umask 0002 && npm install --cache /tmp/empty-cache
-g @azure/static-web-apps-cli" && if [ $CORE_TOOLS_VERSION != "4" ]; then ap
t-get remove -y azure-functions-core-tools-4 && apt-get update && apt-get instal
l -y "azure-functions-core-tools-${CORE_TOOLS_VERSION}"; fi && apt-get clean
-y && rm -rf /var/lib/apt/lists/*]: exit code: 2
[3229 ms] Error: Command failed: docker buildx build --load --build-arg BUILDKIT_INLINE_CACHE=1 -f c:\projects\swa-basic\.devcontainer\Dockerfile -t vsc-swa-basic-d3791a392f70e508dd2f9c004254904d --build-arg NODE_VERSION=16 --build-arg CORE_TOOLS_VERSION=4 c:\projects\swa-basic\.devcontainer
[3229 ms] at OF (c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js:258:1490)
[3229 ms] at process.processTicksAndRejections (node:internal/process/task_queues:96:5)
[3230 ms] at async Wf (c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js:257:2801)
[3230 ms] at async pb (c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js:257:1779)
[3230 ms] at async DF (c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js:263:2006)
[3230 ms] at async to (c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js:263:3110)
[3230 ms] at async Ak (c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js:383:8108)
[3231 ms] at async Ok (c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js:383:7864)
[3249 ms] Exit code 1
[3252 ms] Command failed: C:\Users\viper\AppData\Local\Programs\Microsoft VS Code\Code.exe --ms-enable-electron-run-as-node c:\Users\viper\.vscode\extensions\ms-vscode-remote.remote-containers-0.251.0\dist\spec-node\devContainersSpecCLI.js up --user-data-folder c:\Users\viper\AppData\Roaming\Code\User\globalStorage\ms-vscode-remote.remote-containers\data --workspace-folder c:\projects\swa-basic --workspace-mount-consistency cached --id-label devcontainer.local_folder=c:\projects\swa-basic --log-level debug --log-format json --config c:\projects\swa-basic\.devcontainer\devcontainer.json --default-user-env-probe loginInteractiveShell --mount type=volume,source=vscode,target=/vscode,external=true --skip-post-create --update-remote-user-uid-default on --mount-workspace-git-root true
[3252 ms] Exit code 1
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.