GithubHelp home page GithubHelp logo

staticwebdev / vanilla-basic Goto Github PK

View Code? Open in Web Editor NEW
52.0 52.0 231.0 20 KB

Home Page: https://docs.microsoft.com/azure/static-web-apps/getting-started?tabs=vanilla-javascript

HTML 3.94% CSS 3.13% Dockerfile 19.06% Shell 73.87%
azure-static-web-apps javascript starter-project

vanilla-basic's People

Contributors

aaronpowell avatar craigshoemaker avatar fhinkel avatar hannahzhuswe avatar nitya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

vanilla-basic's Issues

What is the absolute minimum that can be in a GitHub repo for it to work with Azure 'Static Web 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).

Optimize for local playwright tests

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

image

[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.

image

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

  • Update that Test.README.md with the explicit steps to get local testing working.
  • Re-arrange our testing config to drop all of the results into the test-results` folder so we don't have to update the gitignore file? Something like this?
    image

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!

Add a vscode extensions.json with the recommended extensions.

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

dev container files

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

No build script in the default package.json

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"
   }
 }

Docker file fails

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.