feat: Added React Demo webApp and deployment workflow

[rockyRaccoon13]

Justification

Added a React demo web application using Vite to demonstrate how a customer might create a webApp and deploy it to SystemLink. The webApp demos how to call SystemLink APIs both in development (locally) and in production (within a SystemLink website).

The github actions webApp workflow automates building, linting, and deployment to the SystemLink website. The workflow also outputs a .nipkg artifact of the webApp to github. See /.github/workflows/webapp_deploy.yml

Implementation

• Webapp Design

  • The web app was created in TypeScript/React with nimble design components
  • see examples/web_apps/Framework_Examples/React/ApiKeyAuthApp

• Running in Development (locally) vs Production (hosted in SystemLink website)

  • Environment (.env.development and .env.production) files allow variable domain for fetches (dev will fetch from the local proxy server, prod will fetch from the hosting website)

• ApiServiceProxy -- Required to run web app locally

  • To run in development, developers must call a SystemLink API URL with an API key
  • A proxy is required in order to circumvent browser CORS issues
  • The proxy also allows for API authentication in development and session
    token authentication when the web app is hosted in the SystemLink website
  • Setup instructions for the proxy are included in ApiServiceProxy/README.md

• Production -- Running inside SystemLink Website

  • In production, the webApp will call the same APIs but from the hosting SystemLink website domain (instead of an API URL)
  • Instructions for deploying the webApp to production are included in the ApiKeyAuthApp/README.md
  • For developers, the deployment steps are also automated in ./deployDev.sh

• Workflow -- Building, Linting, Deployment to SystemLink website

  • Most of the workflow relies on npm scripts defined in a webApp's package.json (npm ci, npm lint, npm build).
    • This will work for any node.js project, but will need to change for future wasm apps such as blazor
      • Change will likely be using shell scripts instead of package manager scripts
  • Each webApp folder must be added to the job matrix to be included in the script

• SystemLink CLI (SL CLI) integration in Workflow

  • The SL CLI was installed into the workflow by using brew (brew was provided on the github-runner, but needed to be added to the env path)
  • The SL CLI allows for:
    • Packaging a webApp into an .nipkg file
    • Deploying to a user's workspace
  • Github Secrets
    • The workflow includes secrets which will allow any developer to copy the workflow and use it for CI/CD
    • Required secrets for the workflow:
      • SL_API_URL
      • SL_API_KEY
      • SL_WEBSITE_URL
      • SL_WORKSPACE

Testing

• Local env

  • The webApp was run locally on a few devices using the proxy server and successfully called the API.

• Within SystemLink website

  • The webApp was also successfully deployed to SystemLink website, where it was able to call the API for the logged in user.

• Workflow

  • The workflow was tested a couple of times on pushes to our fork's devOps branch. The workflow successfully built, packaged, and deployed the web application!

Checklist

• I have read and followed the Contributing Guidelines

[jattasNI]

@rockyRaccoon13 let's review this PR and #72 together at our next meeting. To other repo owners, no need to review these PRs yet, I'll help the team iterate on them first.

[jattasNI]

Here's my first batch of feedback. Overall it's going in a good direction: I was able to build the app locally and make the API call, which is a success for your implementation and your docs.

This feedback is mostly about docs and infrastructure high level organization and app capabilities. Once we get that dialed in I'll get finer grained on code.

[jattasNI]

Let's remove commented out code to reduce clutter.

Could you also take a pass at consistent spacing (avoid lots of repeated newlines, use consistent spaces after CSS selectors)?

[jattasNI]

It doesn't look like this is working. If I inspect in dev tools it says these variables are not set.

I suspect the issue is that you need to import tokens like the Nimble react example app does. It also imports fonts in the app wide index.scss file, not sure if that's needed too.

[jattasNI]

Does React have a configuration that lets you use SCSS instead of CSS? We tend to prefer SCSS because it gives better compile-time checking of variable names.

If there's not an obvious / cheap way to do this, I'm ok to defer it to a follow up task.

[rajsite]

Vite definitely does out of the box, the nimble react-client-app would be a good example:
https://github.com/ni/nimble/tree/main/packages/react-workspace/react-client-app
https://github.com/ni/nimble/blob/main/packages/react-workspace/react-client-app/src/index.scss

[rajsite]

nimble went with @vitejs/plugin-react-swc which skips babel and is super fast with a tradeoff of a bunch of compile checks instead of @vitejs/plugin-react but either way SCSS should be supported