IT:AD:Azzure:Resources:Static Web App

The objective is to always move on from ClickOps and get to DevOps around a Infrastructure as Code approach to developing infrastructure assets on which to deploy code assets. ie, while it's common to start with a ClickOps approach, don't get stuck there.

Unfortunately, SWA is currently such a hot mess that you will struggle at the ClickOps approach first, and burn up any scheduled time you you had available to get to forming a better strategy…you just are going to have to grit your teeth.

Microsoft provides a lesson somewhwere on how to deploy an Angular app. Unfortunately it's too best case scenario, and yuo won't learn much. Specifically: * It was developed in VS Code, not VS. While i like VS Code just fine, there are plenty of us still developing multi-tier systems using VS. * The key difference might be that the above demo has the source code right at the root of the repo. Not nested under a project name as is the default case for VS. * And I go further. For example, I put all solutions under a SOURCE folder, so that I can have secondary sibling folders for documentation, research notes, etc. * THe difference means that the very default examples given in the MS tutorial quickly fall apart when applied to even the simplest angular app developed in VS.

Secondly, the image developed for the instance runner is always going to be developed in a cautious way, and the result is that the libs being used are quite far behind availability of components. Which means that if you are developing an angular app with even slightly current versions of modules, you'll run into issues with the build saying the version of node.js is out of date.

Node.js version v16.20.2 detected. The Angular CLI requires a minimum Node.js version of v18.13.

A couple of different approaches were suggested.

• staticwebapp.config.json:
  • develop a staticwebapp.config.json in the root of your app
  • where apiRuntime can be node:16 or node:18 (the latest today, but and presumably 20,22,node:24 in the future….)

snippet.json

{
  "platform": {
    "apiRuntime": "node:18"
  }
}

In package.json do similar, but in the following manner:

snippet.json

{
  "engines": { 
    "npm": ">=7.0.0",
    "node": ">=16.0.0"
  },
  "dependencies": {
    ...
  }
}

A note somewhere mentions:

snippet.json

{
  "platform":{
    "apiRuntime":"node:18"
  }
}

One that actually worked putting a NODE_VERSION under env under the build and deploy job that MS wrote, asfollowing:

snippet.json

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
        ...
        with:
        ...
        env:  # Put a node version on the following line
          NODE_VERSION: 20.11.0

For example:

Try to validate location at: '/github/workspace/SOURCE/Crapola'.
App Directory Location: '/SOURCE/Crapola' is invalid. Could not detect this directory. Please verify your workflow file reflects your repository structure.

Being deployed to linux, tHe case of the folders must be exact. so my application directory has to be set to /SOURCE/crapola, and not not /SOURCE/Crapola

Failed to find a default file in the app artifacts folder (dist). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your workflow file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.

Another issue you can run into is due to the browser list. Consider following this advice: https://dev.to/reniciuspagotto/azure-static-web-app-with-angular-and-visual-studio-code-3964

Failed to find a default file in the app artifacts folder (dist/crapola). Valid default files: index.html,Index.html. If your application contains purely static content, please verify that the variable 'app_location' in your workflow file points to the root of your application. If your application requires build steps, please validate that a default file exists in the build output directory.

But removing the outdir gives:

Try to validate location at: '/bin/staticsites/245e6ee5-3fb9-4dd5-a5ae-fdac68f8f322-swa-oryx/app/dist'.
Oryx has determined that the app build artifacts are in the 'dist' directory. If this is incorrect please specify the app artifact location.
Finished building app with Oryx
Failed to find a default file in the app artifacts folder (dist). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your workflow file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.

Changing the source made it go green. But that was a false herring:

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.

Buried so far deep that nobody is going to find it: https://learn.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks

Angular	dist/<APP_NAME>/browser	n/a	n/a

ie, stick browser after dist/myproj/… wow.

error @nicky-lenaers/ngx-scroll-to@14.0.0: The engine "yarn" is incompatible with this module. Expected version ">=1.22.18". Got "1.22.15"
error Found incompatible module.

A post talks about setting env ci:false

https://github.com/orgs/community/discussions/25228 https://github.com/Azure/static-web-apps/issues/179

Try to validate location at: '/bin/staticsites/c00fa5bc-f406-41f7-92ca-16cf2ee81b5b-swa-oryx/app/dist/base/browser'.
The app build failed to produce artifact folder: 'dist/base/browser'. Please ensure this property is configured correctly in your workflow file.

Hum.

• Configuration:
  • https://stackoverflow.com/questions/66142928/azure-static-web-apps-how-to-set-the-version-of-node-js
  • https://learn.microsoft.com/en-us/azure/static-web-apps/configuration
  • https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#platform
  • https://johnnyreilly.com/azure-static-web-apps-node-16-oryx
  • https://edi.wang/post/2022/1/27/how-to-specify-nodejs-version-when-building-azure-static-web-app
  • https://www.janssen.io/blog/azure/static-web-apps-with-azure-devops/part-1/