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]

Minor styling feedback: when I hover over the buttons at the top, the border that appears on hover is causing the entire page layout to shift (see video below).

hover.shift.mov

[jattasNI]

We should update this URL to the NI repo

[jattasNI]

This is an NI internal environment so won't make sense for external customers. This page might be a little better, it's in the user manual and explains how to get to the niapis documentation: https://www.ni.com/docs/en-US/bundle/systemlink-api/page/http-api-reference.html

[jattasNI]

The fonts still aren't loading correctly for me. I think you need this line from the Nimble React example app.

@use '@ni/nimble-react/styles/fonts' as *;

In that app it's in an app-wide SCSS file index.scss which is imported from the top level index.html. This app doesn't have that file yet so you'll have to add it or put that import somewhere else.

https://github.com/ni/nimble/blob/be12d45184385572cc79dc6ac894080652766070/packages/react-workspace/react-client-app/src/index.scss#L1

[jattasNI]

Could we do some processing on the response to make it more user friendly? Right now it's a huge wall of text and hard to tell what it's saying.

Some ideas:

1. parse out a few key pieces of information and display them as the primary text. Maybe just the user's name and then display a string like "Welcome, Firstname Lastname"
2. include the full response JSON in a collapsed details disclosure element
3. see if there's anything more you can do to pretty print the JSON. I see you're following this guidance from Stack Overflow but I'm not seeing any line breaks when I run it locally (macOS Firefox after applying my font change suggested in another thread)