Add GitHub Pages workflow for UX deployment #1404

akiskips · 2025-03-15T16:29:13Z

🛠️ Description

Added a new GitHub Actions workflow to automatically deploy the UX application to GitHub Pages. This workflow builds and deploys the web application whenever changes are pushed to the pages-action-ux branch or when manually triggered.

Changes

Created new workflow file ux-pages.yml for GitHub Pages deployment
Set up proper permissions for GitHub Pages deployment
Configured workflow to:
- Install dependencies
- Build the application
- Deploy to GitHub Pages environment
Added concurrency settings to prevent concurrent deployments
updated the vite.config.yml to set the base to /finops-toolkit/ branch
updated the router basename configuration for GitHub Pages support
Fixed an issue where the background image in the Showcase component wasn't loading properly in the production build. The problem was caused by an incorrect relative path reference to the image asset.

Implementation Details

Uses Node.js 20 for the build process
Builds from the web directory
Uploads the built artifacts from dist
Includes debugging step to list build output before deployment

Usage

Prequisite to run the workflow:

Workflow yml file (under .github) needs to be merged to the main branch
Github actions need to be activated and source set to "Github Actions". Go to settings->Pages
Features/ux branch needs to be allowed to deploy at pages. Set from Settings->Environments-> Deployment branches and tags.

The workflow can be triggered by:

Pushing to the features/ux branch
Manually from the Actions tab in GitHub

The deployed site will be available at the URL provided in the workflow run output.

📷 Screenshots

📋 Checklist

🔬 How did you test this change?

🤏 Lint tests

🤞 PS -WhatIf / az validate

👍 Manually deployed + verified

💪 Unit tests

🙌 Integration tests

🚨 This is a breaking change.

🤏 The change is less than 20 lines of code.

📑 Did you update `docs/changelog.md`?

✅ Updated changelog (required for dev PRs)

➡️ Will add log in a future PR (feature branch PRs only)

❎ Log not needed (small/internal change)

📖 Did you update documentation?

✅ Public docs in docs (required for dev)

✅ Internal dev docs in src (required for dev)

➡️ Will add docs in a future PR (feature branch PRs only)

❎ Docs not needed (small/internal change)

…not found and loaded when built

…to support deployment to GitHub Pages. This ensures assets are correctly referenced when hosted at the repository subdirectory path. Local development still uses root path ('/') for convenience.

Copilot

Pull Request Overview

This PR adds a GitHub Pages deployment workflow for the UX application and adjusts configuration settings for correct deployment routing.

Introduces a new GitHub Actions workflow file for GitHub Pages deployment
Updates Vite and Router configurations to support the GitHub Pages base path
Fixes an issue with the relative path for the background image in production

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

File	Description
src/web/vite.config.ts	Sets the base path conditionally for production builds
.github/workflows/ux-pages.yml	Defines a workflow to build and deploy the UX application to GitHub Pages
src/web/pages/App.tsx	Adjusts Router basename configuration for GitHub Pages compatibility
src/web/components/tests/SideBar.test.tsx	Adds testing-library/jest-dom import for improved assertions

Comments suppressed due to low confidence (1)

src/web/pages/App.tsx:21

There is an inconsistency between the base path in vite.config.ts ('/finops-toolkit/') and the Router basename in App.tsx ('/finops-toolkit'). To ensure consistent routing, consider aligning them (e.g., include the trailing slash in both).

<Router basename={window.location.hostname === 'localhost' ? '/' : '/finops-toolkit'}>

flanakin · 2025-03-17T07:07:43Z

.github/workflows/ux-pages.yml

+  push:
+    branches: ["features/ux"]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:


Does this need anything or is it intentionally blank? If so, maybe leave a comment so people know it's intentional.

flanakin · 2025-03-17T07:08:02Z

.github/workflows/ux-pages.yml

+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["features/ux"]


When this goes live, we only want to run it on main. It's fine to keep it on this branch for now, however.

.github/workflows/ux-pages.yml

flanakin · 2025-03-17T07:16:44Z

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"}


Do we need to list out every page manually? This seems like it'll break at some point when we forget to add one 😕

Not sure if this is from this PR or another.

Were doing some tests with build and vite preview, I think the TS compiler generated the file for incremental builds.

Does the compiler always generate it? Should it be in .gitignore?

flanakin · 2025-03-28T09:46:40Z

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"}


Does the compiler always generate it? Should it be in .gitignore?

flanakin · 2025-03-28T09:47:14Z

@Ivanmtta can you please review?

akiskips added 16 commits March 11, 2025 20:04

workflow to deploy ux branch to github pages with actions

d2ba378

change name

7e8081e

update workflow

607dcd9

update workflow

8383ad9

add base repo name to vite config

2837b38

add base repo name to vite config

bf51a76

add base repo name to vite config

d8d6984

update config

c23d0ea

update config

500c30d

router config

be17245

update router

06f2cdd

Merge remote-tracking branch 'upstream/features/ux' into akis/ux/actions

9af82fe

copied the ShowcaseBackground.png into the showcase folder as it was …

58f39ab

…not found and loaded when built

update workflow to trigger actions when features/ux branch gets pushed

b852f0f

modifySet the Vite base URL to '/finops-toolkit/' in production mode …

023c4b2

…to support deployment to GitHub Pages. This ensures assets are correctly referenced when hosted at the repository subdirectory path. Local development still uses root path ('/') for convenience.

add set env var in the workflow to set production

93d5b61

akiskips added Needs: Review 👀 PR that is ready to be reviewed Tool: Web app Web app to learn about and manage toolkit resources. labels Mar 15, 2025

akiskips added this to the 2025-03 - March milestone Mar 15, 2025

akiskips requested review from flanakin, Ivanmtta, jamelachahbar and Copilot March 15, 2025 16:29

akiskips self-assigned this Mar 15, 2025

akiskips requested a review from aromano2 as a code owner March 15, 2025 16:29

akiskips added this to FinOps toolkit – Hubs Mar 15, 2025

Copilot AI reviewed Mar 15, 2025

View reviewed changes

microsoft-github-policy-service bot requested a review from arthurclares March 15, 2025 16:29

microsoft-github-policy-service bot assigned arthurclares and flanakin Mar 15, 2025

flanakin reviewed Mar 17, 2025

View reviewed changes

comment out the brnach prush trigger for the github actions

e77d5dc

microsoft-github-policy-service bot requested a review from flanakin March 17, 2025 17:27

flanakin approved these changes Mar 28, 2025

View reviewed changes

flanakin modified the milestones: 2025-03 - March, Web app Mar 29, 2025

flanakin added Status: ▶️ Ready Issue is ready for a dev to start work and removed Needs: Review 👀 PR that is ready to be reviewed labels Apr 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add GitHub Pages workflow for UX deployment #1404

Add GitHub Pages workflow for UX deployment #1404

akiskips commented Mar 15, 2025

Copilot AI left a comment

flanakin Mar 17, 2025

flanakin Mar 17, 2025

flanakin Mar 17, 2025

akiskips Mar 17, 2025

flanakin Mar 28, 2025

flanakin Mar 28, 2025

flanakin commented Mar 28, 2025

		@@ -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"}

Add GitHub Pages workflow for UX deployment #1404

Are you sure you want to change the base?

Add GitHub Pages workflow for UX deployment #1404

Conversation

akiskips commented Mar 15, 2025

🛠️ Description

Changes

Implementation Details

Usage

📷 Screenshots

📋 Checklist

🔬 How did you test this change?

📑 Did you update docs/changelog.md?

📖 Did you update documentation?

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

flanakin Mar 17, 2025

Choose a reason for hiding this comment

flanakin Mar 17, 2025

Choose a reason for hiding this comment

flanakin Mar 17, 2025

Choose a reason for hiding this comment

akiskips Mar 17, 2025

Choose a reason for hiding this comment

flanakin Mar 28, 2025

Choose a reason for hiding this comment

flanakin Mar 28, 2025

Choose a reason for hiding this comment

flanakin commented Mar 28, 2025

📑 Did you update `docs/changelog.md`?