Add Blazor WebAssembly example with SystemLink API authentication

.github/workflows/webapp-deploy.yml

@@ -0,0 +1,104 @@
+name: Deploy React WebApps
+
+on:
+  pull_request:
+    paths:
+      - "examples/Web Applications/Framework Examples/**"
+      - ".github/workflows/deploy.yml"
+
+  push:
+    branches:
+      - "**"
+    paths:
+      - "examples/Web Applications/Framework Examples/**"
+      - ".github/workflows/deploy.yml"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-package-deploy:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix: # Add  frameworks and Folder names here
+        include:
+          - framework: React
+            app-folder: ApiKeyAuthApp
+
+          # - framework: Angular
+          #   app-folder: my-angular-app-1    # example entry
+
+    env:
+      NODE_VERSION: "24.x.x"
+      REACT_APPS_DIR: "examples/Web Applications/Framework Examples/React"
+      ANGULAR_APPS_DIR: "examples/Web Applications/Framework Examples/Angular"
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Set App Directory
+        run: |
+          if [ "${{ matrix.framework }}" == "React" ]; then
+            echo "APP_DIR=${{ env.REACT_APPS_DIR }}/${{ matrix.app-folder }}" >> $GITHUB_ENV
+          else
+            echo "APP_DIR=${{ env.ANGULAR_APPS_DIR }}/${{ matrix.app-folder }}" >> $GITHUB_ENV
+          fi
+
+      - name: Install dependencies
+        working-directory: ${{ env.APP_DIR }}
+        run: npm ci
+
+      - name: Lint
+        working-directory: ${{ env.APP_DIR }}
+        run: npm run lint
+
+      - name: Build
+        working-directory: ${{ env.APP_DIR }}
+        run: npm run build
+
+      - name: Setup Homebrew + Install slcli
+        run: |
+          eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
+          brew tap ni-kismet/homebrew-ni
+          brew install slcli
+          echo "/home/linuxbrew/.linuxbrew/bin" >> $GITHUB_PATH
+
+      - name: Package into .nipkg
+        working-directory: ${{ env.APP_DIR }}
+        run: |
+          WEBAPP_NAME=$(basename "$PWD")
+          slcli webapp pack dist/ --output "${WEBAPP_NAME}.nipkg"
+          echo "WEBAPP_NAME=${WEBAPP_NAME}" >> $GITHUB_ENV
+
+      - name: Upload .nipkg artifact to gitHub
+        uses: actions/upload-artifact@v6
+        with:
+          name: ${{ matrix.app-folder }}.nipkg
+          path: ${{env.REACT_APPS_DIR}}/${{matrix.app-folder}}/${{env.WEBAPP_NAME}}.nipkg
+
+      - name: Login to SystemLink
+        run: |
+          slcli login --profile ghActions --url "${{ secrets.SL_API_URL }}" --api-key "${{ secrets.SL_API_KEY }}" --web-url "${{ secrets.SL_WEBSITE_URL }}" --workspace "${{secrets.SL_WORKSPACE}}"
+
+      - name: Deploy (publish new/update) webapp (nipkg) to NI internal SystemLink test tier
+        working-directory: ${{ env.APP_DIR }}
+        run: |
+          pkg=${{env.WEBAPP_NAME}}.nipkg
+          WEBAPP_NAME="$(basename "$pkg" .nipkg)_PROD"
+          echo "**Deploying "$pkg" "$WEBAPP_NAME"**"
+          WEBAPP_ID=$(slcli webapp list --workspace "${{ secrets.SL_WORKSPACE }}" --filter "$WEBAPP_NAME" --format json | jq -r '.[0].id // empty')
+          if [[ -z "$WEBAPP_ID" ]]; then
+            echo "   *Webapp does not exist -- publishing new"
+            slcli webapp publish "$pkg" --name "$WEBAPP_NAME" --workspace "${{ secrets.SL_WORKSPACE }}"
+          else
+            echo "  *Webapp exists -- updating"
+            slcli webapp publish "$pkg" --id "$WEBAPP_ID"
+          fi
+          echo "**Deployed "$WEBAPP_NAME"**"

.gitignore

@@ -1,3 +1,13 @@
+#auto
+../../../../DotNet
+
+# Blazor WASM publish output and SystemLink packages
+pub/
+*.nipkg
+
+# Blazorwasm configurations
+**/wwwroot/appsettings.Development.json
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]
@@ -127,3 +137,7 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+#config files
+**/proxyConfig.js
+**/appsettings.Development.json

README.md

@@ -64,6 +64,18 @@ and extend SystemLink Enterprise for your organization's needs.
   - Create work item templates for standardization
   - Define custom workflows with specialized states and actions
 
+### Web App Examples
+
+- **[Framework Examples](examples/Web%20Applications/Framework%20Examples/)**
+  - Create your own custom web applications using SystemLink APIs
+  - Host your custom web apps in your SystemLink environment to add custom UIs
+
+- **[Dev Tools](examples/Web%20Applications/Dev%20Tools/)**
+  - Includes a proxy server that can be used to call SystemLinks APIs from
+    outside of your SystemLink website
+  - The proxy server that can be used to develop web apps locally, while later
+    hosting your applications in SystemLink
+
 ## Getting Started
 
 ### Prerequisites
@@ -114,6 +126,10 @@ tailored to that specific example.
   - Customize the SystemLink user interface
   - Standardize test plan creation
   - Implement custom workflows for your processes
+- **Web App Examples** - When you need to:
+  - Call SystemLink APIs from a web application
+  - Host your web app in your SystemLink environment
+  - Extend SystemLink's environment to meet your needs
 
 ## Documentation
 

examples/Web Applications/Dev Tools/ApiServiceProxy/.gitignore

@@ -0,0 +1,2 @@
+proxyConfig.js
+node_modules/

examples/Web Applications/Dev Tools/ApiServiceProxy/README.md

@@ -0,0 +1,43 @@
+# API Service Proxy
+
+The API Service Proxy is used to **locally** run web applications that call
+SystemLink APIs.
+
+## Purpose -- Local development
+
+The API Service Proxy is used to forward requests to a SystemLink API server
+(e.g. https://demo-api.lifecyclesolutions.ni.com). The forward proxy is
+necessary because the API server does not allow cross origin sharing (no CORS).
+
+The service proxy should be used when testing a web application in a local
+environment. An api key is required to authorize requests made to a SystemLink
+API server.
+
+### Do not make calls through the proxy in production
+
+Web applications that are hosted in a SystemLink environment should route
+requests to the environment's domain (i.e.
+https://demo.lifecyclesolutions.ni.com).
+
+The endpoints in the SystemLink deployment environment are the same as the
+SystemLink API endpoints, but authorization is done via a cookie which the
+browser will automatically send with the request.
+
+## Setup
+
+1. Install dependencies:
+
+   ```bash
+   npm ci
+   ```
+
+2. Create a `proxyConfig.js` from `proxyConfig.example.js` and add your
+   SystemLink API URL and API key
+
+3. Start the backend server:
+
+   ```bash
+   node index.js
+   ```
+
+4. Server will be running on `localhost:4000`

examples/Web Applications/Dev Tools/ApiServiceProxy/index.js

@@ -0,0 +1,44 @@
+import express from "express";
+
+import cors from "cors";
+
+import { apiKey, apiServerUrl } from "./proxyConfig.js";
+const app = express();
+const PORT = 4000;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Simple proxy endpoint
+
+app.all("/apiProxy/*splat", async (req, res) => {
+  const forwardPath = req.originalUrl.replace(/^\/apiProxy/, "");
+  const forwardFullUrl = `${apiServerUrl}${forwardPath}`;
+
+  const forwardReq = {
+    method: req.method,
+    headers: {
+      "x-ni-api-key": apiKey,
+    },
+    body: req.body,
+  };
+
+  try {
+    const upstreamResponse = await fetch(forwardFullUrl, forwardReq);
+
+    if (!upstreamResponse.ok) {
+      return res.status(response.status).send({});
+    }
+
+    const data = await upstreamResponse.json();
+    res.json(data);
+  } catch (err) {
+    console.error(err);
+    res.status(500).send({ error: "Proxy server error" });
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Proxy server running on http://localhost:${PORT}`);
+});