Add GitHub Pages workflow for UX deployment

.github/workflows/ux-pages.yml

@@ -0,0 +1,55 @@
+name: Deploy UX to GitHub Pages
+on:
+  # TODO: Restore the push trigger after prod. Runs on pushes targeting the default branch
+  #push:
+  # branches: ["features/ux"]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+
+# Allow one concurrent deployment
+concurrency:
+    group: 'pages'
+    cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ./src/web
+      - name: Clean and Build
+        run: |
+          rm -rf ./dist || true
+          NODE_ENV=production npm run build
+        working-directory: ./src/web
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: List build output
+        run: ls -la ./src/web/dist
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: './src/web/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

src/web/components/__tests__/SideBar.test.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import SideBar from '../SideBar/SideBar';

src/web/pages/App.tsx

@@ -18,7 +18,7 @@ import {HomePage} from '../pages/HomePage';
 function App() {
   return (
     <FluentUIProvider>
-      <Router>
+    <Router basename={window.location.hostname === 'localhost' ? '/' : '/finops-toolkit'}>
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/bicep-registry" element={<BicepRegistryModulesPage />} />

src/web/tsconfig.app.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./pages/App.tsx","./pages/AzureOptimizationEnginePage.tsx","./pages/BicepRegistryModulesPage.tsx","./pages/CostOptimizationWorkbookPage.tsx","./pages/FinOpsHubsPage.tsx","./pages/FinOpsWorkbooksPage.tsx","./pages/GovernanceWorkbookPage.tsx","./pages/HomePage.tsx","./pages/OpenDataPage.tsx","./pages/PowerBIReportsPage.tsx","./pages/PowerShellModulePage.tsx","./pages/ToolsLandingPage.tsx","./pages/main.tsx","./pages/__tests__/App.test.tsx","./pages/__tests__/HomePage.test.tsx","./components/__tests__/SideBar.test.tsx"],"version":"5.7.2"}

src/web/tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.7.2"}

src/web/vite.config.ts

@@ -3,5 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+    plugins: [react()],
+    base: process.env.NODE_ENV === 'production' ? '/finops-toolkit/' : '/'
 })